使用Vue框架进行开发时,我们在option的data和methods中定义属性和方法,在调用时直接使用 vm.attr 或 vm.func()的形式,而不是用vm.data.attr或vm.methods.func()的方式。
项目的git地址: https://github.com/xubaodian/SimuVue.git ,后续会持续更新,分析Vue的源码,争取实现一个乞丐版的Vue。
Vue解析系列文章如下:
Vue源码解析(二)Vue的双向绑定讲解及实现
我们传入Vue的options对象一般为以下这种形式,
{
data: {
name: 'xxx'
},
mounted() {
//调用方法,没有使用this.methods.getInfo();
this.getInfo();
},
methods: {
getInfo() {
//获取属性,没有使用this.data.name
this.name = 'xxxx2314';
//操作等等....
}
},
computed: {
getName() {
return this.name;
}
},
watch: {
'name'(val, oldVal) {
//这是操作
}
}
}
在vue实例中,我们无论data还是method,都直接调用,这是因为一下vue初始化时做了下面两点操作:
1、给data中的属性做了代理,所有访问和设置vm[key]时,最终操作的是vm._data[key],而Vue在初始化时,会vm._data其实是options中data的引用。
2、methods中的所有方法都直接在vue实例重新定义了引用。
看下我的实现代码,是对Vue源码的精简,如下:
//vue构造函数
class Vue {
constructor(options) {
//$options存储构造选项
this.$options = options || {
};
//data保存构造设置中的data,暂时忽略data为函数的情况
let data = options.data;
this._data = data;
//初始化
this._init();
}
_init() {
//映射key
mapKeys(this);
//在vue实例上重新定义方法的引用
initMethods(this, this.$options.methods)
}
}
//重新定义方法的引用,注意修改调用函数时的上下文环境,这里用bind,当然也可以用apply和call
function initMethods (vm, methods