return new Observer(value, ARRAY, options) } else if ( _.isObject(value) && !value.$scope // avoid Vue instance ) { return new Observer(value, OBJECT, options) } } 我们首先从Observer.create看起,如果value值没有响应化过(通过是否含有$observer属性去判断),则使用new操作符创建Obsever实例(区分...
vue Observer类uml 使用场景 Observer 的实例化只在 observe 函数中进行,函数在文件 /src/core/observer/index.js 中,上一节我们已经研究过,传入参数为一个对象或数组。 export function observe (value: any, asRootData: ?boolean): Observer | void { if (!isObject(value) || value instanceof VNode) ...
通过Object.defineProperty()来劫持各个属性(只会劫持已经存在的属性)的 setter,getter,dep 和 Watcher 实现依赖收集和派发更新的过程: vue 将 data 初始化为一个 Observer 并对对象中的每个值,重写了其中的 get、set,data 中的每个 key,都有一个独立的 dep(依赖收集器)。 在get 中,向 dep(依赖收集器)添加了...
AI代码解释 vararrayProto=Array.prototypevararrayMethods=Object.create(arrayProto);['push','pop','shift','unshift','splice','sort','reverse'].forEach(function(item){Object.defineProperty(arrayMethods,item,{value:functionmutator(){//缓存原生方法,之后调用console.log('array被访问');varoriginal=arra...
childOb是标志属性值是否为基础类型的标志,observe如果遇到基本类型数据,则直接返回,不做任何处理,如果遇到对象或者数组则会递归实例化Observer,会为每个子属性设置响应式数据,最终返回Observer实例。而实例化Observer又回到之前的老流程:添加__ob__属性,如果遇到数组则进行原型重指向,遇到对象则定义getter,setter,这一过程...
JS 中数组是对象的一种,因为 Observer 部分对数组与普通对象的对待区别很大,所以下文说到对象,都是指 constructor 为 Object 的普通对象。 准备 可以先git clone git@github.com:vuejs/vue.git一份源码备看。observer 的部分在源码的 src/core/observer 目录下。
本文代码已经放在https://github.com/xyzingh/learn-vue-observer,运行npm i && npm run test可以测试。 新建文件夹 learn-vue-observer,创建几个文件。 util.ts /* 一些常用函数的简写 */exportfunctiondef(obj:any,key:string,value:any,enumerable:boolean=false){Object.defineProperty(obj,key,{value,enumera...
*/ // 暴露了一个自定义的Observer的类 export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that have this object as root $data constructor (value: any) { this.value = value this.dep = new Dep() // 可观察者对象的依赖,也就是watcher this.vmCount = 0...
如上我们已经了解了 Object.defineProperty()方法的基本使用了,因此我们现在可以封装一个数据监听器函数,比如叫它为 Observer. 它的作用是能够对数据对象的所有属性进行监听。如下代码实现: functionObserver(data) {this.data =data;this.init(); } Observer.prototype.init=function() {vardata =this.data;//遍历...
Vue通过Object.defineProperty或Proxy(在Vue 3中)来实现数据的响应式。当Vue将一个对象或数组转换为响应式数据时,它会为这个对象或数组添加一个__ob__属性,该属性指向一个Observer实例。这个Observer实例负责监听数据的变化,并在数据发生变化时触发视图的更新。