VUE响应原理

2020-06-10

字数：840 阅读时间：5min

阅读量：6104

VUE的一个特点就是数据响应式；当我们改变一个数据时，页面中所有用到该数据的地方都会发生改变；那么在这个过程中VUE都做了什么工作呢

想要了解VUE如何实现响应式，可以从两个方面考虑
1. 在改变数据的时候，VUE是如何知道数据变化的？（主要是通过Object.defineProperty()的getter和setter方法）
2. 在知道数据变化之后，vue又是如何通知那些需要改变的数据进行改变的？（发布者订阅者模式）

我们可以简单模拟一下vue的响应式的核心代码

//VUE初始化阶段initData()函数会将data数据代理到vm._data中
let vm_data = {
name:'lele',
age:18
};
//二.通过订阅者发布者模式，通知需要改变数据的节点数据
//发布者 （依赖搜集器）
class Dep{
constructor(){
this.subs = []//订阅者列表
};
addSub(watcher){
this.subs.push(watcher)
};
notify(){
this.subs.forEach(item=>{
item.update()
})
}
}
//订阅者
class watcher{
constructor(name){
this.name = name;
}
update(){//在数据变化的时候会
console.log(this.name + '发生了update')
}
}
const dep = new Dep();//在数据初始化的时候每一个data属性都是一个依赖收集器
//一.通过Object.defineProperty()里的set和get函数，知道哪些数据发生了改变
Object.keys(vm_data).forEach(key => {//劫持vm._data数据
let value = vm_data[key];
Object.defineProperty(vm_data,key,{
set(newvalue){//改变属性的时候执行  进行发布更新
console.log(`我设置了${key}属性`);
value = newvalue;
dep.notify();//改变属性的时候就通知所有相关依赖发生变化
},
get(){//获取属性的时候执行  进行依赖搜集
//在complime模板编译的时候会为每一条数据添加一个watcher对象
let w1 = new watcher('message1');//模拟编译的时候添加的watcher
let w2 = new watcher('message2');
dep.addSub(w1);//模拟将每一个wahcher搜集到对应的依赖里
dep.addSub(w2);
console.log(`我获取了${key}属性`)
return value
}
});
})
console.log(vm_data.name);//我获取了age属性  lele
console.log(vm_data.age = 20);//我设置了age属性  20

//VUE初始化阶段initData()函数会将data数据代理到vm._data中

let vm_data = {

name:'lele',

age:18

};

//二.通过订阅者发布者模式，通知需要改变数据的节点数据

//发布者（依赖搜集器）

class Dep{

constructor(){

this.subs = []//订阅者列表

};

addSub(watcher){

this.subs.push(watcher)

};

notify(){

this.subs.forEach(item=>{

item.update()

})

}

//订阅者

class watcher{

constructor(name){

this.name = name;

}

update(){//在数据变化的时候会

console.log(this.name + '发生了update')

}

const dep = new Dep();//在数据初始化的时候每一个data属性都是一个依赖收集器

//一.通过Object.defineProperty()里的set和get函数，知道哪些数据发生了改变

Object.keys(vm_data).forEach(key => {//劫持vm._data数据

let value = vm_data[key];

Object.defineProperty(vm_data,key,{

set(newvalue){//改变属性的时候执行进行发布更新

console.log(`我设置了${key}属性`);

value = newvalue;

dep.notify();//改变属性的时候就通知所有相关依赖发生变化

get(){//获取属性的时候执行进行依赖搜集

//在complime模板编译的时候会为每一条数据添加一个watcher对象

let w1 = new watcher('message1');//模拟编译的时候添加的watcher

let w2 = new watcher('message2');

dep.addSub(w1);//模拟将每一个wahcher搜集到对应的依赖里

dep.addSub(w2);

console.log(`我获取了${key}属性`)

return value

}

});

})

console.log(vm_data.name);//我获取了age属性 lele

console.log(vm_data.age = 20);//我设置了age属性 20

vue初始化状态的时候initData()函数用observer函数观测data数据变化（数据劫持，主要通过defindeProperty），每一个属性都有一个Dep实例用于搜集对应的依赖
在模板编译时解析模板中的每一条指令，为每一条数据添加一个watcher对象，而每一个watcher又被添加到对应的Dep实例的subs订阅者列表里（触发getter方法），并初始化页面数据
在改变数据的时候触发observer里的setter方法setter方法里又触发notify()通知所有watcher进行更新，在watcher函数里调用update()将数据更新到页面中去

vue2响应原理的缺点

data数据类型是Object对象时，使用defineProperty重写对象的getter和setter方法，通过getter搜集对应的依赖，通过setter触发所有的依赖；需要遍历所有的key属性，会有性能消耗问题（不能检测数据的新增和删除）
data数据类型为Array时，会拦截push、pop、shift、unshift、splice、sort、rever这些能改变原数组的方法来实现响应式，除了这些方法，改变数组的其他操作是不能被检测的；eg： array[0] = 0； array.length = 0

VUE3响应原理：vue3改用了proxy代理方式实现数据响应；后续再研究

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →

VUE响应原理

相关推荐