Vue源码解析之Object侦测1——Observer

最新推荐文章于 2024-08-31 08:35:43 发布

琦仔yyy

最新推荐文章于 2024-08-31 08:35:43 发布

阅读量551

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yuqiyyy8/article/details/115371934

版权

本文深入探讨Vue中的Observer机制，通过Object.defineProperty实现数据观测，详细解析Observer类、defineReactive()方法和observer()方法，阐述如何将对象转换为可观测对象，以及数据改变时如何通知依赖并触发视图更新。

摘要由CSDN通过智能技术生成

Vue 中Observer、Dep、Watcher的关系图
在这里插入图片描述

使Object变为可观测的对象——通过Object.definedPrototype()为数据对象添加get和set属性，实现数据劫持；
那么数据在改变的时候就会通过setter通知依赖他的视图，这里我们需要先收集数据有哪些依赖，这个收集的动作是在getter中进行的；
收集的依赖需要一个管理器去管理他们，此时就出现了Dep类；
在Dep中我们有depend()收集依赖，然后有nofiy()通知对应的依赖进行更新；
我们为这个依赖创建Watcher实例，当外界通过Watcher获取数据的时候会触发getter，此时会将当前的Watcher实例添加到dep的subs（即存放依赖的数组）数组中；
当数据放生变化时，会触发setter，向Dep发送notify，然后Dep中会调用Watcher中的更新操作；
Watcher接收到通知后，会向外界发送通知，变化通知到外界后可能会触发视图更新，也有可能触发用户的某个回调函数等。

begin

Object.defineProperty——简单例子

首先要了解一下Object.defineProperty的相关知识
Object.defineProperty()详解请戳我

var person = {
   }
       Object.defineProperty(person,'name',{
   
           configurable:false,//能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true
           enumerable:false,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true
           writable:false,//对象属性是否可修改,flase为不可修改，默认值为true
           value:'xiaoming' //对象属性的默认值，默认值为undefined 
        });

通过Object.defineProperty将一个对象转换为可以观测的示例

const cat = {
   };
let alike = 'fish';
Object.defineProperty(cat, 'like', {
   
  get() {
   
    console.log('触发了get方法');
    return alike;
  },
  set(val) {
   
    alike = val;
    console.log('触发了set方法');
  },
});
console.log(cat.like);
cat.like = 'mouse';
console.log(cat.like);

//输出的结果如下
触发了get方法
fish
触发了set方法
触发了get方法
mouse