import observe from'./observe.js';import Dep from'./Dep.js';exportdefaultfunctiondefineReactive(data, key, val){const dep =newDep();if(arguments.length ==2){
val = data[key];}let childOb =observe(val);
Object.defineProperty(data, key,{
enumerable:true,
configurable:true,get(){if(Dep.target){
dep.depend();if(childOb){
childOb.dep.depend();}}return val;},set(newValue){
console.log('你试图改变'+ key +'属性', newValue);if(val === newValue){return;}
val = newValue;
childOb =observe(newValue);
dep.notify();}});};
Dep,代码如下所示:
var uid =0;exportdefaultclassDep{constructor(){this.id = uid++;this.subs =[];}addSub(sub){this.subs.push(sub);}depend(){if(Dep.target){this.addSub(Dep.target);}}notify(){const subs =this.subs.slice();for(let i =0, l = subs.length; i < l; i++){
subs[i].update();}}};
import Observer from'./Observer.js';exportdefaultfunction(value){if(typeof value !='object')return;var ob;if(typeof value.__ob__ !=='undefined'){
ob = value.__ob__;}else{
ob =newObserver(value);}return ob;}
Observer,代码如下所示:
import{ def }from'./utils.js';import defineReactive from'./defineReactive.js';import{ arrayMethods }from'./array.js';import observe from'./observe.js';import Dep from'./Dep.js';exportdefaultclassObserver{constructor(value){this.dep =newDep();def(value,'__ob__',this,false);if(Array.isArray(value)){
Object.setPrototypeOf(value, arrayMethods);this.observeArray(value);}else{this.walk(value);}}walk(value){for(let k in value){defineReactive(value, k);}}observeArray(arr){for(let i =0, l = arr.length; i < l; i++){observe(arr[i]);}}};
Watcher,代码如下所示:
import Dep from"./Dep";var uid =0;exportdefaultclassWatcher{constructor(target, expression, callback){
console.log('我是Watcher类的构造器');this.id = uid++;this.target = target;this.getter =parsePath(expression);this.callback = callback;this.value =this.get();}update(){this.run();}get(){
Dep.target =this;const obj =this.target;var value;try{
value =this.getter(obj);}finally{
Dep.target =null;}return value;}run(){this.getAndInvoke(this.callback);}getAndInvoke(cb){const value =this.get();if(value !==this.value ||typeof value =='object'){const oldValue =this.value;this.value = value;cb.call(this.target, value, oldValue);}}};functionparsePath(str){var segments = str.split('.');return(obj)=>{for(let i =0; i < segments.length; i++){if(!obj)return;
obj = obj[segments[i]]}return obj;};}
一、指令和生命周期核心原理及实现defineReactive,代码如下所示:import observe from './observe.js';import Dep from './Dep.js';export default function defineReactive(data, key, val) { const dep = new Dep(); if (arguments.length == 2) { val = data[key]; }