源码

# 源码

# 源码 clone 🔥

步骤：

git clone git@github.com:vuejs/vue-next.git
git checkout -b conangan-v3.2.9 v3.2.9切换并创建分支。可以使用git tag查看 tag
yarn安装依赖
在 package.json 中的 dev 选项后面加上 --sourcemap，就可以在debug时看到独立的文件而不是打包后的文件
执行yarn dev命令，会自动打包文件，并会生成packages/vue/dist/vue.global.js和*.map文件

创建packages/vue/examples/conanan这个目录，用于自己写demo

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="temp">
      <button @click="decrement">-</button>
      <span>{{counter}}</span>
      <button @click="increment">+</button>
    </template>

    <script src="../../dist/vue.global.js"></script>

    <script>
      const options = {
        template: '#temp', //
        data() {
          return {
            counter: 0
          }
        },
        methods: {
          decrement() {
            this.counter--
          },
          increment() {
            this.counter++
          }
        }
      }
      // debugger
      const vm = Vue.createApp(options).mount('#app')
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

debug会发现createApp进入的是index.ts文件，而不是上面生成的vue.global.js

# 源码之 createApp

# 源码阅读之挂载根组件

# 组件化的初始化

# template中数据的使用顺序

// data / props / ctx
// This getter gets called for every property access on the render context
// during render and is a major hotspot. The most expensive part of this
// is the multiple hasOwn() calls. It's much faster to do a simple property
// access on a plain object, so we use an accessCache object (with null
// prototype) to memoize what access type a key corresponds to.
let normalizedProps
if (key[0] !== '$') {
    const n = accessCache![key]
    if (n !== undefined) {
        switch (n) {
            case AccessTypes.SETUP:
                return setupState[key]
            case AccessTypes.DATA:
                return data[key]
            case AccessTypes.CONTEXT:
                return ctx[key]
            case AccessTypes.PROPS:
                return props![key]
                // default: just fallthrough
        }
    } else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
        accessCache![key] = AccessTypes.SETUP
        return setupState[key]
    } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
        accessCache![key] = AccessTypes.DATA
        return data[key]
    } else if (
        // only cache other properties when instance has declared (thus stable)
        // props
        (normalizedProps = instance.propsOptions[0]) &&
        hasOwn(normalizedProps, key)
    ) {
        accessCache![key] = AccessTypes.PROPS
        return props![key]
    } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
        accessCache![key] = AccessTypes.CONTEXT
        return ctx[key]
    } else if (!__FEATURE_OPTIONS_API__ || shouldCacheAccess) {
        accessCache![key] = AccessTypes.OTHER
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

由源码可知：setup——data——props——ctx（methods、computed）

编辑

上次更新: 2022/03/23, 17:55:39

← historyApiFallback MiniVue→