前言
之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是 vue ,所以免不了问到其响应式原理和 Vue 的双向数据绑定。但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别。
响应式原理
是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 的响应式原理的实现细节相信大多数同学已经很熟悉了,这里就不在展开细谈了,如果还想更详细的了解,或者想要做一个简易的 Vue 实现,可以参考这篇Vue原理,相信你会有不小收获。
双向数据绑定
双向数据绑定通常是指我们使用的 v-model 指令的实现,是 Vue 的一个特性,也可以说是一个 input 事件和 value 的语法糖。 Vue 通过 v-model 指令为组件添加上 input 事件处理和 value 属性的赋值。
上述的组件就相当于如下代码
因此当我们修改input输入框中的值时,我们通过v-model绑定的值也会同步修改,基于上述原理,我们可以很容易的实现一个数据双向绑定的组件。
v-model实践
首先我们定义一个 Vue 组件,相信大家已经很熟悉了。
click me {{value}}
上面的组件定了我们通过在 props 中添加 value 属性,并且在值更新时触发 input 事件。 created 钩子和 watch 中为 localvalue 赋值是为了同步父组件状态到子组件中。通过上面:point_up_2:的组件定义,我们就可以在组件上使用 v-model 指令做双向数据绑定了。
0 Comments