(vue3): stage3(refactor xxx)

Author: Xiang Liu

vue/vue3/src/dep.js

@@ -0,0 +1,11 @@
+
+
+export class Dep {
+  constructor() {
+    this.subs = [];
+  }
+  
+  addSub(watcher) {
+    this.subs.push(watcher);
+  }
+}

vue/vue3/src/index.js

@@ -5,12 +5,15 @@
  */
 import {VNode} from "./vnode";
 import {Watcher} from "./watcher";
+import {clearTarget, createProxy, setTarget} from "./proxy";
+import {Dep} from "./dep";
 
 export class Vue3 {
   constructor(options) {
     this.$options = options;
     this.initProps();
-    this.proxy = this.initDataProxy();
+    // this.proxy = this.initDataProxy();
+    this.proxy = createProxy(this);
     this.initWatcher();
     this.initWatch();
 
@@ -115,13 +118,13 @@ export class Vue3 {
       this.collected[key] = true;
     }
 
-    if (this.$target) {
+    /*if (this.$target) {
       this.$watch(key, this.$target.update.bind(this.$target));
-    }
+    }*/
   }
 
   initWatcher() {
-    this.dataNotifyChain = {};
+    this.deps = {};
   }
 
   initWatch() {
@@ -148,20 +151,30 @@ export class Vue3 {
   }
 
   $watch(key, cb) {
-    this.dataNotifyChain[key] = this.dataNotifyChain[key] || [];
-    this.dataNotifyChain[key].push(cb);
+    if (!this.deps[key]) {
+      this.deps[key] = new Dep();
+    }
+    
+    this.deps[key].addSub(new Watcher(this.proxy, key, cb));
+    
+    // this.dataNotifyChain[key] = this.dataNotifyChain[key] || [];
+    // this.dataNotifyChain[key].push(cb);
   }
 
   $mount(root) {
-    const {mounted, render} = this.$options;
-
-    const vnode = render.call(this.proxy, this.createElement.bind(this));
-    this.$el = this.createDOMElement(vnode);
-
-    if (root) {
-      root.appendChild(this.$el);
-    }
+    this.$el = root;
+    // const vnode = render.call(this.proxy, this.createElement.bind(this));
+    // this.$el = this.createDOMElement(vnode);
+    //
+    // if (root) {
+    //   root.appendChild(this.$el);
+    // }
+    setTarget(this);
+    this.update(); // first-time render and trigger 'mounted' hook
+    clearTarget();
 
+    // mounted lifecycle
+    const {mounted} = this.$options;
     mounted && mounted.call(this.proxy);
 
     return this;

vue/vue3/src/proxy.js

@@ -0,0 +1,86 @@
+let _target = null;
+
+export function setTarget(target) {
+  _target = target;
+}
+
+export function clearTarget() {
+  _target = null;
+}
+export function createProxy(vue) {
+  const collect = (key) => {
+    if (_target) {
+      vue.$watch(key, _target.update.bind($target));
+    }
+  };
+  
+  const createDataProxyHandler = (path) => {
+    return {
+      set: (data, key, value) => {
+        const fullPath = path ? path + '.' + key : key;
+        
+        const prev = data[key];
+        data[key] = value;
+        
+        if (prev !== value) {
+          vue.notify(fullPath, prev, value);
+        }
+        
+        return true;
+      },
+      get: (data, key) => {
+        const fullPath = path ? path + '.' + key : key;
+  
+        collect(fullPath);
+        
+        if (!!data[key] && typeof data[key] === 'object') {
+          return new Proxy(data[key], createDataProxyHandler(fullPath));
+        } else {
+          return data[key];
+        }
+      },
+      deleteProperty: (target, key) => {
+        if (key in target) {
+          const fullPath = path ? path + '.' + key : key;
+          const pre = target[key];
+          delete target[key];
+          
+          this.notify(fullPath, pre);
+        }
+        
+        return true;
+      }
+    };
+  };
+  
+  const handler = {
+    set: (target, key, value) => {
+      if (key in props) { // check in props firstly
+        return createDataProxyHandler().set(props, key, value);
+      } else if (key in data) { // check in data secondly
+        return createDataProxyHandler().set(data, key, value);
+      } else {
+        this[key] = value;
+      }
+    
+      return true;
+    },
+    get: (target, key) => {
+      const methods = this.$options.methods || {};
+    
+      if (key in props) {
+        return createDataProxyHandler().get(props, key);
+      } else if (key in data) { // 收集模板中用了 data 的属性到依赖集合中
+        return createDataProxyHandler().get(data, key);
+      } else if (key in computed) {
+        return computed[key].call(this.proxy);
+      } else if (key in methods) {
+        return methods[key].bind(this.proxy);
+      }
+    
+      return this[key];
+    },
+  };
+  
+  return new Proxy(this, handler);
+}