Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新
Vue2.x
是借助Object.defineProperty()
实现的,而Vue3.x
是借助Proxy
实现的,下面我们先来看一下2.x的实现。
响应式
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
//拦截get,当我们访问data.key时会被这个方法拦截到
get: function getter () {
//我们在这里收集依赖
return obj[key];
},
//拦截set,当我们为data.key赋值时会被这个方法拦截到
set: function setter (newVal) {
//当数据变更时,通知依赖项变更UI
}
})
复制代码
我们通过Object.defineProperty
为对象obj
添加属性,可以设置对象属性的getter
和setter
函数。之后我们每次通过点语法获取属性都会执行这里的getter
函数,在这个函数中我们会把调用此属性的依赖收集到一个集合中 ;而在我们给属性赋值(修改属性)时,会触发这里定义的setter
函数,在次函数中会去通知集合中的依赖更新,做到数据变更驱动视图变更。
3.x的与2.x的核心思想一致,只不过数据的劫持使用Proxy
而不是Object.defineProperty
,只不过Proxy相比Object.defineProperty在处理数组和新增属性的响应式处理上更加方便。
let nObj=new Proxy(obj,{
//拦截get,当我们访问nObj.key时会被这个方法拦截到
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
//拦截set,当我们为nObj.key赋值时会被这个方法拦截到
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
})
复制代码
Proxy
的详细使用方法参考ES6教程。
总结
vue是响应式的,默认数据不是双向绑定的,但是提供了实现数据双向绑定的手段,我们可以通过v-model的语法糖来实现