vue响应式原理

发布网友发布时间：2022-04-20 15:20

共2个回答

懂视网时间：2022-05-14 16:00

本篇文章给大家带来的内容是关于vue响应式原理及依赖收集的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Vue通过设定对象属性的setter/getter方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

将数据data变成可观察的（observable）

那么Vue是如何将所有data下面的属性变成可观察的呢？

function obsever(value,cb){
 Object.keys(value).forEach((key)=>defineReactive(value,key,value[key],cb))
}
function defineReactive(obj,key,val,cb){
 Object.defineProperty(obj,key,{
 enumerable;true,
 configurable:true,
 get:()=>{
  /*依赖收集*/
  return val;
 },
 set:newVal=>{
  val=newVal;
  cb();
 }
 })
}
class Vue{
 constructor(options){
 this._data = options.data;
 obsever(this._data,options.render)
 }
}

let app = new Vue({
 el:'#app',
 data:{
 text:'text',
 text2:'text2'
 },
 render(){
 console.log('render')
 }
})

为了便于理解，首先考虑一种最简单的情况，不考虑数组等情况，代码如上所示。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set，对订阅者进行回调（在这里是render）。
那么问题来了，需要对app._data.text操作才会触发set。为了偷懒，我们需要一种方便的方法通过app.text直接设置就能触发set对视图进行重绘。那么就需要到代理。

代理

我们可以在Vue的构造函数constructor中为data执行一个代理proxy。这样我们就把data上面的属性代理到了vm实例上。

_proxy.call(this,options.data);//构造函数
//代理
function _proxy(data){
 const that = this;
 Object.keys(data).forEach(key=>{
 configurable:true,
 enumerable:true,
 get:function proxyGetter(){
  return that._data[key]
 },
 set:function proxySetter(val){
  that._data[key] = val;
 }
 })
}

我们就可以用app.text代替app._data.text了。

为什么要依赖收集

先看下面这段代码

new Vue({
 template:`<p>
  <span>text1:</span>{{text1}}
  <span>text2:</span>{{tetx2}}
  </p>`,
 data:{
 text1:'text1',
 text2:'text2',
 text3:'text3'
 }
})

按照上面的响应式原理中的方法进行绑定则会出现一个问题--text3在实际模板中并没有被用到，然而当text3的数据被修改时，同样会触发text3的setter导致重新执行渲染，这显然不正确。

先说说Dep

当对data上的对象进行修改值的时候会触发它的setter，那么取值的时候自然会触发getter事件，所以我们只要在最开始进行一次render，那么所有被渲染所依赖的data中的数据就会被getter收集到Dep的subs中去。在对data中的数据进行修改的时候setter只会触发Dep的subs函数。
定义一个依赖收集类的Dep。

class Dep{
 constructor(){
 this.subs = [];
 }
 addSub(sub:Watcher){
 this.subs.push(sub)
 }
 removeSub(sub:Watcher){
 remove(this.subs,sub)
 }
 notify(){
 const subs = this.subs.slice()
 for(let i = 0;l=subs.length;i<1;i++){
  subs[i].update()
 }
 }
}
function remove(arr,item){
 if(arr.length){
 const index = arr.indexOf(item)
 if(index>-1){
  return arr.splice(index,1)
 }
 }
}

Watcher

订阅者，当依赖收集的时候会addSub到sub中，在修改data中数据的时候会触发dep对象的notify，通知所有Watcher对象去修改对应视图。

class Watcher {
 constructor (vm, expOrFn, cb, options) {
 this.cb = cb;
 this.vm = vm;

 /*在这里将观察者本身赋值给全局的target，只有被target标记过的才会进行依赖收集*/
 Dep.target = this;
 /*Github:https://github.com/answershuto*/
 /*触发渲染操作进行依赖收集*/
 this.cb.call(this.vm);
 }

 update () {
 this.cb.call(this.vm);
 }
}

开始依赖收集

class Vue {
 constructor(options) {
 this._data = options.data;
 observer(this._data, options.render);
 let watcher = new Watcher(this, );
 }
}

function defineReactive (obj, key, val, cb) {
 /*在闭包内存储一个Dep对象*/
 const dep = new Dep();

 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: ()=>{
  if (Dep.target) {
  /*Watcher对象存在全局的Dep.target中*/
  dep.addSub(Dep.target);
  }
 },
 set:newVal=> {
  /*只有之前addSub中的函数才会触发*/
  dep.notify();
 }
 })
}

Dep.target = null;

将观察者Watcher实例赋值给全局的Dep.target，然后触发render操作只有被Dep.target标记过的才会进行依赖收集。有Dep.target的对象会将Watcher的实例push到subs中，在对象被修改触发setter操作的时候dep会调用subs中的Watcher实例的update方法进行渲染。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

热心网友时间：2022-05-14 13:08

Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者(Watcher) ，在数据变更的时候通知订阅者(Dep) 更新视图。

核心API：

observer: 数据劫持

劫持对象的 getter和setter

重写数组方法

Dep：收集依赖, 订阅者

为什么引入Dep？

收集依赖需要为依赖找一个存储的地方，所以创建Dep，用它来收集，删除和向依赖发送消息等，主要用来存放 Watcher观察者对象，

Watcher：观察者

一个中介的角色，数据发生变化时通知它，然后它在通知其他地方。

遇到的问题：

Object.defineProperty 无法监听数组变化，需要对数组方法进行重写；

无法检测到对象属性的添加或删除(可使用Vue.set或者对象展开符

粗略实现observer:

function render() {

console.log('视图更新')

}

// 给定原数据

let data = {

hole: 'black',

person: {

name: 'xiao',

age: 29

ary: ['tpl']

}

// 重写数组方法

const aryMethods = [

'pop',

'shift',

'unshift',

'sort',

'reverse',

'splice',

'push'

]

// 取原型

const aryProto = Array.prototype

const proto = Object.create(aryProto)

aryMethods.forEach(method => {

proto[method] = function() {

// AOP

arrayProto[method].call(this, ...arguments)

render()

}

})

function observer(obj) {

if (Array.isArray(obj)) {

obj.__proto__ = proto

return

}

if (typeof obj === 'object') {

Object.keys(obj).forEach(key => {

defineReactive(obj, key, obj[key])

})

}

function defineReactive(reactiveObj, key, value) {

// 递归子属性

observer(reactiveObj)

// 新增

const dep = new Dep()

Object.defineProperty(reactiveObj, key, {

enumerable: true, // 可枚举，可遍历

configurable: true, // 可配置，可删除

get() {

// 监听

console.log('get', value)

// 将Watcher添加到订阅中

if (Dep.target) {

dep.addSub(Dep.target)

}

return value

set(newValue) {

// 如果赋值的是一个对象，也要递归子属性

observer(newValue)

if (newValue !== value) {

// 监听

console.log('set', newVal)

render()

value = newVal

// 执行 Watcher 中的 update方法

dep.notify()

}

})

}

// 模拟

class Vue {

constructor(options) {

this._data = options.data;

observer(this._data);

/* 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象 */

new Watcher();

console.log('模拟视图渲染');

Dep实现

使用 addSub 方法在目前的Dep对象中增加一个Watcher订阅操作

使用 notify 方法通知目前Dep对象的subs中所有的Watcher对象，并触发更新操作

class Dep {

constructor() {

this.subs = []

}

addSub(sub) {

this.subs.push(sub)

}

notify() {

this.subs.forEach(sub => {

sub.update()

})

}

观察者Watcher

为什么引入Watcher

Watcher类用于观察订阅依赖，当属性发生变化后，我们要通知用到该数据的地方，这个地方有很多，类型还不同，也有可能是用户写的一个watch，然后在依赖收集阶段只收集这个封装好的类的实例，通知也是只通知他一个，然后由他负责通知其他地方。

依赖收集的目的是将观察者Watcher对象存放到当前闭包中的Dep -> subs中

在执行构造函数的时候将 Dep.target 指向自身，从而收集到了对象的 Watcher，在派发更新的时候取出对应的Watcher，然后执行update函数

如何收集依赖

在getter中收集依赖，在setter中触发依赖！

class Watcher {

constructor(obj, key, value) {

// 首先将Dep.target指向自己

Dep.target = this

this.cb = cb

this.obj = obj

this.key = key

this.value = obj[value]

Dep.target = null

}

update() {

// 获取新值

this.value = this.obj[key]

// 定义一个cb函数，用来模拟视图更新，调用它代表视图更新

this.cb(this.value)

}

全部栏目

vue响应式原理