1. 前言
之前面试了一些公司,大部分前端使用技术是VUE,所以免不了问到其响应式原理和Vue的双向数据绑定。那么这里我们就说一下二者的区别。
2.响应式原理
是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);
}
})

3.双向绑定
双向数据绑定通常是指我们使用的v-model指令的实现,是Vue的一个特性,也可以说是一个input事件和value的语法糖。 Vue通过v-model指令为组件添加上input事件处理和value属性的赋值。

QQ图片20220817233909.png
上述的组件就相当于如下代码

1.png

END
本文作者:
文章标题:别再把VUE的响应式跟双向绑定搞混淆了
本文地址:https://blog.imjunjun.cn/archives/137/
版权说明:若无注明,本文皆军军's Blog原创,转载请保留文章出处。
Last modification:August 17, 2022
如果觉得我的文章对你有用,请随意赞赏