每个Vue实例在被创建的时候都需要经过一系列的初始过程,如设置数据监听,编译模版,将实例挂载到DOM并在数据变化的时候更新DOM。在这个过程中,也会运行一些叫生命周期钩子的函数。如created, mountedupdated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

要注意箭头函数的使用:

箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

上面的init方法中,使用了箭头函数,这导致这个箭头函数里面的this,总是指向handler对象,否则,回调函数运行时,this.doSomething这一行会报错,因为此时this指向document对象。this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

另外,由于箭头函数没有自己的this,所以也就不能使用call(),apply(),bind()方法去改变this的指向.

vue使用填坑之生命周期钩子的 this 上下文的更多相关文章

  1. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  2. vue环境配置脚手架搭建,生命周期,钩子

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  3. Vue.js的指令、生命周期钩子与数据选项

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.常用指令 v-if ... v-else: 作用:控制元素是 ...

  4. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  5. vue学习三:生命周期钩子

    生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...

  6. vue 生命周期钩子的理解 watch computed

    一  理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...

  7. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  8. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  9. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

随机推荐

  1. java多线程编程建议

    多线程编程建议 1,将应用设计成支持多线程并发,可提高性能 2,编写多线程程序,首先保证它是正确的,其次再考虑性能 3,同步处理的开销大于非同步处理,如果可能,尽量使用非同步处理 4,避免多个共享变量 ...

  2. vue 报错:Cannot read property '_wrapper' of undefined

    我的情况是@click="xx" ,而xx函数未定义

  3. [转]WPF更换主题

    如果要做到一个应用程序其基本的内容不变,但改变整个应用程序的外观可以这样做: 对于每一套外观定义一个ResourceDictionary 在应用程序中,动态加载此应用程序(或窗体)的Resource ...

  4. 廖雪峰Java10加密与安全-1数据安全-1加密与安全概念

    数据安全 防窃听 防篡改 防伪造 古代加密方式: 移位密码:HELLO =>IFMMP 替代密码:HELLO=>p12,5,3 现代加密方式: 建立在严格的数学理论基础上 密码学逐渐发展成 ...

  5. Ionic 左侧菜单(登录主页详情demo)

    1.项目结构 2.截图效果展示        3.主要js 代码 $stateProvider .state('app', { url: "/app", abstract: tru ...

  6. JS 中 Tween 的使用

    JavaScript Tween算法及缓动效果   Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用flash的Tween类的算法,来做j ...

  7. PAT甲级——A1064 Complete Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  8. eclipse中运行java程序

    1 package ttt; public class Testttt { public static void main() { Person p =new Person(); p.name=&qu ...

  9. Vue. 之 报错 Uncaught (in promise)

    Vue. 之 报错 Uncaught (in promise) 在点击同一个URL的时候,会报错如下: 解决方案: 在项目目录下运行 npm i vue-router@3.0 -S 即可.

  10. struts2-自定义拦截器-struts2标签

    1 自定义拦截器 1.1 架构 1.2 拦截器创建 创建方式1 创建方式2 创建方式3 ★★★★ 1.3 拦截器api 放行 前后处理 不放行,直接跳转到一个结果页面 不执行后续的拦截器以及Actio ...