js-dive · gogoend · Dec 26, 2021 · Dec 26, 2021 · Dec 26, 2021 · Apr 13, 2022
diff --git a/example/gogoend/index.html b/example/gogoend/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>gogoend CompositionAPI 测试</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="importmap">
+        {
+          "imports": {
+            "vue": "/node_modules/vue/dist/vue.esm.browser.js",
+            "@vue/composition-api": "/dist/vue-composition-api.esm.js"
+          }
+        }
+    </script>
+    <script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/example/gogoend/index.js b/example/gogoend/index.js
@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import VueCompositionAPI, {
+  ref,
+  createApp,
+  onMounted,
+  defineComponent,
+  watch,
+  effectScope,
+  watchEffect,
+  computed,
+  provide,
+} from '@vue/composition-api'
+
+Vue.use(VueCompositionAPI)
+
+// ----- effectScope相关开始 -----
+const scope = effectScope()
+const counter = ref(1)
+scope.run(() => {
+  const doubled = computed(() => counter.value * 2)
+
+  watch(doubled, () => console.log(doubled.value))
+
+  watchEffect(() => console.log('Count: ', doubled.value))
+})
+// 处理掉当前作用域内的所有 effect
+scope.stop()
+// ----- effectScope相关结束 -----
+
+const App = defineComponent({
+  template: `
+<div>
+<div>{{ msg }} {{ msg1 }}</div>
+<button @click="counter++">{{ counter }}</button>
+</div>
+`,
+  setup() {
+    const msg = ref('666')
+    console.log(msg)
+    provide(msg)
+
+    watch(
+      msg,
+      (...args) => {
+        debugger
+        console.log('w1', ...args)
+      },
+      {}
+    )
+    watch(
+      msg,
+      (...args) => {
+        debugger
+        console.log('w2', ...args)
+      },
+      {
+        immediate: true,
+      }
+    )
+    msg.value = '777'
+
+    onMounted(() => {
+      debugger
+      console.log(1)
+    })
+    onMounted(() => {
+      debugger
+      console.log(2)
+    })
+    return {
+      msg,
+      counter,
+    }
+  },
+  data() {
+    return {
+      msg1: '777',
+    }
+  },
+})
+
+createApp(App).mount('#app')
diff --git a/rollup.config.js b/rollup.config.js
@@ -79,7 +79,7 @@ function genConfig({ outFile, format, mode }) {
         'process.env.NODE_ENV':
           format === 'es'
             ? // preserve to be handled by bundlers
-              'process.env.NODE_ENV'
+              'undefined'
             : // hard coded dev/prod builds
               JSON.stringify(isProd ? 'production' : 'development'),
         __DEV__:

diff --git a/src/apis/computed.ts b/src/apis/computed.ts
@@ -27,10 +27,12 @@ export function computed<T>(
 export function computed<T>(
   getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
 ): ComputedRef<T> | WritableComputedRef<T> {
+  // 获得当前激活的（在作用域内的vm）
   const vm = getCurrentScopeVM()
   let getter: ComputedGetter<T>
   let setter: ComputedSetter<T> | undefined
 
+  // 归一化getterOrOptions，将它们分别赋值给getter、setter
   if (isFunction(getterOrOptions)) {
     getter = getterOrOptions
   } else {
@@ -41,19 +43,25 @@ export function computed<T>(
   let computedSetter
   let computedGetter
 
+  // 如果能拿到vm，并且在非服务器渲染环境下
   if (vm && !vm.$isServer) {
+    // 获得Vue内部的Watcher及Dep类
     const { Watcher, Dep } = getVueInternalClasses()
     let watcher: any
     computedGetter = () => {
       if (!watcher) {
+        // 设置计算属性Watcher —— 逻辑与传统的Vue 2主项目一致
         watcher = new Watcher(vm, getter, noopFn, { lazy: true })
       }
+      // 如果watcher dirty了，就重新进行一次计算来获取新的值
       if (watcher.dirty) {
         watcher.evaluate()
       }
+      // TODO: 如果存在全剧唯一正在被计算的watcher，那么就进行以来收集
       if (Dep.target) {
         watcher.depend()
       }
+      // 返回计算属性watcher的值
       return watcher.value
     }
 
@@ -67,7 +75,9 @@ export function computed<T>(
         setter(v)
       }
     }
-  } else {
+  }
+  // 否则，创建一个新的vue实例，来托管computed
+  else {
     // fallback
     const computedHost = defineComponentInstance(getVueConstructor(), {
       computed: {
@@ -91,6 +101,7 @@ export function computed<T>(
     }
   }
 
+  // 返回一个用于获得computed值的ref
   return createRef<T>(
     {
       get: computedGetter,

diff --git a/src/apis/effectScope.ts b/src/apis/effectScope.ts
@@ -7,6 +7,9 @@ import {
 import { defineComponentInstance } from '../utils'
 import { warn } from './warn'
 
+/**
+ * 正在活动（全局唯一）的effectScope
+ */
 let activeEffectScope: EffectScope | undefined
 const effectScopeStack: EffectScope[] = []
 
@@ -75,12 +78,20 @@ export class EffectScope extends EffectScopeImpl {
   }
 }
 
+/**
+ * 记录effectScope？
+ * @param effect
+ * @param scope
+ * @returns
+ */
 export function recordEffectScope(
   effect: EffectScope,
   scope?: EffectScope | null
 ) {
   scope = scope || activeEffectScope
   if (scope && scope.active) {
+    // 如果不是游离的Effect，那么就往当前scope effects里push一下传入的effect
+    // 看起来有点像一棵树
     scope.effects.push(effect)
     return
   }
@@ -109,21 +120,26 @@ export function onScopeDispose(fn: () => void) {
 }
 
 /**
+ * 获得当前在scope内的vm？TODO: 为何有两种写法？
  * @internal
  **/
 export function getCurrentScopeVM() {
   return getCurrentScope()?.vm || getCurrentInstance()?.proxy
 }
 
 /**
+ * 绑定当前scope到vm上？
  * @internal
  **/
 export function bindCurrentScopeToVM(
   vm: ComponentInternalInstance
 ): EffectScope {
+  // 如果vm上没有scope，就设置一下
   if (!vm.scope) {
     const scope = new EffectScopeImpl(vm.proxy) as EffectScope
     vm.scope = scope
+
+    // vm销毁的时候，scope给停掉
     vm.proxy.$on('hook:destroyed', () => scope.stop())
   }
   return vm.scope

diff --git a/src/apis/lifecycle.ts b/src/apis/lifecycle.ts
@@ -8,39 +8,77 @@ import {
 import { getCurrentInstanceForFn } from '../utils/helper'
 
 const genName = (name: string) => `on${name[0].toUpperCase() + name.slice(1)}`
+
+/**
+ * 生命周期工厂函数？
+ * @param lifeCyclehook 生命周期的名称
+ * @returns
+ */
 function createLifeCycle(lifeCyclehook: string) {
-  return (callback: Function, target?: ComponentInternalInstance | null) => {
-    const instance = getCurrentInstanceForFn(genName(lifeCyclehook), target)
-    return (
-      instance &&
-      injectHookOption(getVueConstructor(), instance, lifeCyclehook, callback)
-    )
-  }
+  return (
+    /**
+     * 在setup函数执行期间，在调用生命周期钩子（如onMounted等）将会执行的函数 - 该函数用于合并生命周期钩子
+     * @param callback 生命周期回调函数
+     * @param target Vue3 对象
+     * @returns
+     */
+    (callback: Function, target?: ComponentInternalInstance | null) => {
+      const instance = getCurrentInstanceForFn(genName(lifeCyclehook), target)
+      return (
+        instance &&
+        injectHookOption(getVueConstructor(), instance, lifeCyclehook, callback)
+      )
+    }
+  )
 }
 
+/**
+ * 合并生命周期钩子
+ * @param Vue Vue构造函数
+ * @param instance 当前实例（Vue3）
+ * @param hook 生命周期钩子名称
+ * @param val 值（生命周期回调函数）
+ * @returns
+ */
 function injectHookOption(
   Vue: VueConstructor,
   instance: ComponentInternalInstance,
   hook: string,
   val: Function
 ) {
+  // 当前实例中的选项
   const options = instance.proxy.$options as Record<string, unknown>
+  // 获得钩子的合并策略 - 见Vue2源代码 `mergeHook`
   const mergeFn = Vue.config.optionMergeStrategies[hook]
+  // 获得一个经过包裹的回调函数
   const wrappedHook = wrapHookCall(instance, val)
+  // 将经过合并的钩子重新赋值给到组件option
+  // options[hook] 是个数组，组件生命周期的执行实际上是挨个执行其中的函数
+  // 每调用一次对应的onHook（eg. onMounted）都会往对应数组里加一个函数
   options[hook] = mergeFn(options[hook], wrappedHook)
   return wrappedHook
 }
 
+/**
+ * 获得一个经过包裹的回调函数 - 经过包裹后，回调函数执行期间，将确保正在激活的组件实例是当前实例（Vue3）
+ * @param instance 当前实例（Vue3）
+ * @param fn 生命周期钩子中的回调函数
+ * @returns 经过包裹后的回调函数
+ */
 function wrapHookCall(
   instance: ComponentInternalInstance,
   fn: Function
 ): Function {
   return (...args: any) => {
+    // 保存上一个正在激活状态的组件（Vue3）
     let prev = getCurrentInstance()
+    // 设置激活状态组件为当前组件（Vue3）
     setCurrentInstance(instance)
     try {
+      // 执行生命周期钩子的回调函数
       return fn(...args)
     } finally {
+      // 恢复上一个正在激活状态的组件（Vue3）
       setCurrentInstance(prev)
     }
   }