Vue有一个很方便的特性就是Vue的双向绑定,即响应式变化,在Vue2.X版本中,Vue响应式变化靠的是Object.defineProperty方法实现的,但是这个方法有个问题,就是对数组的支持不全面,如我们想要通过arr[0] = 11这种下标修改值的方式,Vue是不会监听并重新渲染组件的,以及arr.length = 0这种方式清空数组,也是不支持的。

那么在Vue中,是如何实现数据的双向绑定的呢?我们可以简单模拟一下。

实现原理就是:给数据绑定get/set方法,当修改对应的属性值时,会触发对应的get/set方法,在get/set方法中实现绑定逻辑。如果是数组,会重写数组的方法,如果是对象,会使用Object.defineProperty方法。

先定义一个最简单的对象obj

let obj = {

  name:"Alice",

  age:18

}

定义一个渲染函数

function render(){
console.log("渲染")
}

给对象obj的每一个属性都绑定get/set方法

let handler = function(obj,key,value){
Object.defineProperty(obj,key,{
get(){
return value;
},
set(newValue){
if(value!==newValue){
value = newValue;
// 修改属性值时,调用渲染函数
render();
}
}
});
}

调用handler方法给obj的属性绑定get/set

function observe(obj){
for(let k in obj){
handler(obj,k,obj[k])
}
}
observer(obj);
obj.name = "Fiona" // 此时修改obj的属性值,会触发name的set方法,然后调用render函数,重新渲染

上面介绍了最简单的对象的数据双向绑定逻辑,那如果我们的对象中的属性值又是一个对象呢?如下

obj = {

  name:{"name1":"Alice"}

}

这时候,我们给name绑定了get/set方法,但是name1并没有绑定,所以我们在使用obj.name.name1 = "Fiona"的时候,是没有办法触发name1的set方法的。

我们再对上面的方法进行改进:

var handler = function(obj,key,value){
// value可能还是对象,所以需要再次给它绑定get/set方法
observe(value);
Object.defineProperty(obj,key,{
get(){
return value;
},
set(newValue){
       // 设置的值,可能还是一个对象,所以需要将设置的值的对象属性也绑定get/set方法
       observe(value);
if(value !== newValue){
value = newValue;
render();
}
}
})
} function observe(obj){
if(typeof(obj)!=="object" || obj === null){
return obj
}
for (let k in obj){
handler(obj,k,obj[k]);
}
} observe(obj);
obj.name.name1 = 'Fiona'; //此时会触发name1的set方法,调用render()
obj.age = {"age1":19}
obj.age.age1 = 20

到这里,对象【非数组】的响应式变化就完成了,但是这里还有一个问题,就是如果想要给对象新增一个属性,也是不会触发的

如上面的obj,想给它新增一个gender,是不会触发set方法的,想要给对象新增属性同时触发set方法,需要使用$set方法

vm.$set(obj,newProperty,value)

接下来我们再看看数组的响应式变化的实现

数组需要重写数组的所有方法。但是还是不支持数组的长度变化,也不支持通过数组的下标修改值的方法

数组常用的方法有7个:pop,   push,   shift,   unshift,   splice,   sort,   reverse

// 数组的常用方法
let methods = ['pop','push', 'shift', 'unshift', 'splice', 'sort', 'reverse']; // 数组原型链上的方法
let ArrayProto = Array.prototype
// 我们需要重写数组的所有方法,但是又不能影响原有的原型链,所以这里需要将原型链重新拷贝一份
let proto = Object.create(ArrayProto); // 循环数组的所有方法,给拷贝的原型链复制
methods.forEach(fn=>{
proto[fn] = function(){
// 调用原有原型链的方法
ArrayProto[fn].call(this, ...arguments);
}
} // 定义渲染函数
function render(){
console.log("渲染...")
} var handler = function(obj, key, value){
observe(obj);
Object.defineProperty = function(obj, key, {
get(){
return value;
},
set(newValue){
observe(newValue);
if(value != newValue){
value = newValue;
render();
}
}
})
} function observe(obj){
if(Array.isArray(obj)){
// 如果obj是数组,将我们自定义的原型链复制给obj的原型链
obj.__proto__ = proto;
return;
}
if(typeof(obj) !=="object" || obj===null){
return obj;
}
for(let k in obj){
handler(obj, k, obj[k]);
}
}

到这里,数组的响应式变化也就完成了

let obj = [1,2,3];

observer(obj);

obj.push(4); // 这是,会直接调用自定义原型链的push方法,并调用render

let obj = {

  name:["alice"],

}

observe(obj)

obj.name.push("fiona")

前面说了,使用defineProperty会有两个问题,数组的长度改变和数组下标赋值这种修改数组的方法是不会被监听的,所以Vue3.x说会使用proxy来实现数据的绑定,可以解决这两个问题,但是proxy的兼容性是一个问题。

下面简单看一下,如何使用proxy实现数据的响应式

let obj = {
name:"Fiona",
loc:{x:100,y:200},
arr:[1]
} function render(){
console.log("渲染...")
} let handler = {
get(target, key){
// 如上面的loc,value还是一个对象,所以需要再次进行绑定
if(typeof(target[key] ==='object' && target[key] !==null)){
return new Proxy(target[key],handler)
}
return Reflect.get(target, key);
},
set(target, key, value){
render();
Reflect.set(target, key, value);
}
} // 给obj设置代理,绑定get/set方法
let proxy = new Proxy(obj, handler); // 此时应该使用proxy去修改obj属性值,使用obj是无效的
proxy.arr.push(2)
proxy.arr.length=0
proxy.loc.x=200

Vue响应式变化的更多相关文章

  1. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  2. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  3. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  4. Vue响应式原理及总结

    Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...

  5. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  6. 深入Vue响应式原理

    深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...

  7. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  8. vue响应式原理,去掉优化,只看核心

    Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...

  9. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

随机推荐

  1. PPR管各种接头产品名称

    PPR管各种接头产品名称 http://ishare.iask.sina.com.cn/f/19n7gOsntbX.html

  2. nginx listen 端口 443 80 https 和 wss

    端口号 443 和 80 端口的区别 一般指定 443 和 80 端口都是使用域名时所需要的 当我们使用域名请求时,一般是不添加端口号的 例如:http://www.baidu.com 在不添加端口号 ...

  3. Android常用优秀开源框架

    Android常用优秀开源框架 https://github.com/Ericsongyl/AOSF AOSF:全称为Android Open Source Framework,即Android优秀开 ...

  4. [转]在CentOS安装CMake (CentOS7 64位适用)

    一.环境描述 1.系统:CentOS 6.4 i386 (min) 2.登录用户:root 3.版本:CMake 2.8.10.2 4.虚拟机:Oracle VM VirtualBox 二.安装步骤 ...

  5. Python3基础 函数 多值参数 元组与字典形式(使用星号对列表与字典进行拆包)

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  6. doris: shell invoke .sql script for doris and passing values for parameters in sql script.

    1. background in most cases, we want to execute sql script  in doris  routinely. using azkaban, to l ...

  7. pytorch 中Dataloader中的collate_fn参数

    一般的,默认的collate_fn函数是要求一个batch中的图片都具有相同size(因为要做stack操作),当一个batch中的图片大小都不同时,可以使用自定义的collate_fn函数,则一个b ...

  8. 转Python开发之AJAX全套

    转自:https://www.cnblogs.com/nulige/p/6603415.html#4206261

  9. [转]Ubuntu安装ss客户端

    链接:https://www.cnblogs.com/hoanfir/p/9308148.html 配置好后,使用 chromium-browser --proxy-server=socks5://1 ...

  10. __proto__和prototype的一些理解

    var Person = function(name) { this.name = name; } var p = new Person(); new操作符的操作是 var p = {} p.__pr ...