本文深入探讨了Vue中`this.init`的用法，通过源码分析了Vue组件事件绑定中`this`的指向问题。在Vue中，使用箭头函数定义组件方法会导致`this`为`undefined`，因为箭头函数不创建自己的`this`上下文，而在组件初始化时，Vue会将methods中的方法绑定到组件实例上。对比了Vue与React组件的`this`绑定差异，并讨论了Java与JavaScript中`this`绑定的区别。
vue组件定义methods使用箭头函数
直接从问题开始吧。
第一种情况代码：
say hellow
export default {
methods: {
sayHello() {
console.log('hello:',this);
}
}
}
运行结果：
第二种情况：
say hellow
export default {
methods: {
sayHello: () => {
console.log('hello:',this);
}
}
}
运行结果：
你能解释出为什么会这样么？
vue源码分析——从模板解析到运行时事件绑定
我们先通过源码来分析一下整个流程(vue@2.5.17的dist/vue.common.js)。
v-on的解析
分析事件绑定，先去找v-on的实现代码：
dist/vue.common.js
通过搜索，我定位了这样一段代码。
这个函数是处理模板中的属性的，其中有个分支是处理 v-on指令的
v-on:click.native.stop="sayHello"
这里的name就是click，value就是sayHello，而native和stop就是modifiers，el为传进来的当前解析的元素。
addHandler顾名思义就是给当前的xx事件绑定一个handler，我们接着去看addHandler的实现。
dist/vue.common.js
删掉了一些无关代码后的addHandler方法如图，开始是处理各种modifier，然后是创建一个newHandler，加到事件的handlers数组中去，因为我们这里只绑定了一个handler，所以走的else的分支。
到这，元素的click已经绑定了handler了。
模板编译流程
说起来，通过搜索定位到某段代码并不能吧流程看全，我们从模板编译的入口开始看。
你可以在vue@2.5.17的dist/vue.common.js文件的最后看到：
最低0.47元/天 解锁文章
扫一扫
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
