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

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



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

vue使用填坑之生命周期钩子的 this 上下文的更多相关文章
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- vue环境配置脚手架搭建,生命周期,钩子
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- Vue.js的指令、生命周期钩子与数据选项
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.常用指令 v-if ... v-else: 作用:控制元素是 ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- vue学习三:生命周期钩子
生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...
- vue 生命周期钩子的理解 watch computed
一 理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
随机推荐
- java中 &&与& ||与| 的区别
public class Demo { public static void main(String[] args) { int i = 5; int j = 3; // || 与 | 的区别 boo ...
- Leetcode145. Binary Tree Postorder Traversal二叉树的后序遍历
给定一个二叉树,返回它的 后序 遍历. 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归: class Solution { public: vector<int> res; ve ...
- mysql工具使用
mysql -u user_name -p123456 -h host_name -P 3306 -D database_name -e "show full processlist;&qu ...
- What is python .. (“dot dot”) notation syntax?
What you have is a float literal without the trailing zero, which you then access the __truediv__met ...
- set_clock_latency
set_clock_latancy用于定于虚拟时钟与真实时钟的延时 考虑最糟糕的情况,评估setup时数据会使用最大延时,时钟使用最小延时:评估hold时,数据使用最小延时,时钟使用最大延时.
- CODE[VS]1372:DNA
Description 为了进一步分析外星生物,专家们决定对 DNA 进行切割.限制性核酸内切酶是基因工程中的重要的工具酶.它会识别一段碱基序列(说白了就是只包含 ATGC 的序列)并且切割开.Eco ...
- vue-cli 手机上浏览自己的项目
首先我们需要更改config文件 拿我这个项目举例子,config文件下的index.js内的dev下的host需要更改为自己的电脑IP 其次,重点来了,我们需要更改路径,细节的为什么我还解释不来,简 ...
- hibernate 多表关联外键问题无法截断表的解决办法
目前只有一个办法 就是手动清除其他表的外键关联,然后在做一个小swing单独去操作这个表,而不运行主控方相关的代码 当web运行后,外键会再次设置好
- DES、RSA、MD5、SHA、随机生成加密与解密
一.数据加密/编码算法列表 常见用于保证安全的加密或编码算法如下: 1.常用密钥算法 密钥算法用来对敏感数据.摘要.签名等信息进行加密,常用的密钥算法包括: DES(Data Encr ...
- 2019-8-31-dotnet-控制台读写-Sqlite-提示-no-such-table-找不到文件
title author date CreateTime categories dotnet 控制台读写 Sqlite 提示 no such table 找不到文件 lindexi 2019-08-3 ...