├── .gitignore
├── README.md
├── babel.config.js
├── doc
    ├── 1.简介.md
    ├── 10.表单输入绑定.md
    ├── 11.生命周期.md
    ├── 12.侦听器.md
    ├── 13.模版引用.md
    ├── 14.组件基础.md
    ├── 2.创建应用.md
    ├── 3.模版语法.md
    ├── 4.响应式基础.md
    ├── 5.计算属性.md
    ├── 6.类与样式绑定.md
    ├── 7.条件渲染.md
    ├── 8.列表渲染.md
    ├── 9.事件处理.md
    └── high
    │   ├── 1.注册.md
    │   ├── 2.Props.md
    │   ├── 3.事件.md
    │   ├── 4.透传Attributes.md
    │   ├── 5.插槽slot.md
    │   └── 6.依赖注入.md
├── example
    ├── apiInject
    │   ├── App.js
    │   └── index.html
    ├── compiler-base
    │   ├── App.js
    │   ├── index.html
    │   └── main.js
    ├── componentEmit
    │   ├── App.js
    │   ├── Foo.js
    │   ├── index.html
    │   └── main.js
    ├── componentSlot
    │   ├── App.js
    │   ├── Foo.js
    │   ├── index.html
    │   └── main.js
    ├── componentUpdate
    │   ├── App.js
    │   ├── Child.js
    │   ├── index.html
    │   └── main.js
    ├── currentInstance
    │   ├── App.js
    │   ├── Foo.js
    │   ├── index.html
    │   └── main.js
    ├── customRenderer
    │   ├── App.js
    │   ├── index.html
    │   └── main.js
    ├── helloword
    │   ├── App.js
    │   ├── Foo.js
    │   ├── index.html
    │   └── main.js
    ├── nextTicker
    │   ├── App.js
    │   ├── index.html
    │   └── main.js
    ├── patchChildren
    │   ├── App.js
    │   ├── ArrayToArray.js
    │   ├── ArrayToText.js
    │   ├── TextToArray.js
    │   ├── TextToText.js
    │   ├── index.html
    │   └── main.js
    ├── state.js
    └── update
    │   ├── App.js
    │   ├── index.html
    │   └── main.js
├── lib
    ├── guide-mini-vue.cjs.js
    └── guide-mini-vue.esm.js
├── package.json
├── rollup.config.js
├── src
    ├── compiler-core
    │   ├── src
    │   │   ├── ast.ts
    │   │   ├── codegen.ts
    │   │   ├── compiler.ts
    │   │   ├── index.ts
    │   │   ├── parse.ts
    │   │   ├── runtimeHelpers.ts
    │   │   ├── transform.ts
    │   │   ├── transforms
    │   │   │   ├── transformElement.ts
    │   │   │   ├── transformExpression.ts
    │   │   │   └── transformText.ts
    │   │   └── utils.ts
    │   └── tests
    │   │   ├── __snapshots__
    │   │       └── codegen.spec.ts.snap
    │   │   ├── codegen.spec.ts
    │   │   ├── parse.spec.ts
    │   │   └── transform.spec.ts
    ├── index.ts
    ├── reactivity
    │   ├── baseHandlers.ts
    │   ├── computed.ts
    │   ├── effect.ts
    │   ├── index.ts
    │   ├── reactive.ts
    │   ├── ref.ts
    │   └── test
    │   │   ├── computed.spec.ts
    │   │   ├── effect.spec.ts
    │   │   ├── reactive.spec.ts
    │   │   ├── readonly.spec.ts
    │   │   ├── ref.spec.ts
    │   │   └── shallowReadonly.spec.ts
    ├── runtime-core
    │   ├── apiInject.ts
    │   ├── component.ts
    │   ├── componentEmit.ts
    │   ├── componentProps.ts
    │   ├── componentPublicinstance.ts
    │   ├── componentSlots.ts
    │   ├── componentUpdateUtils.ts
    │   ├── createApp.ts
    │   ├── h.ts
    │   ├── helpers
    │   │   └── renderSlots.ts
    │   ├── index.ts
    │   ├── renderer.ts
    │   ├── scheduler.ts
    │   └── vnode.ts
    ├── runtime-dom
    │   └── index.ts
    └── shared
    │   ├── ShapeFlag.ts
    │   ├── index.ts
    │   ├── test.ts
    │   └── toDisplayString.ts
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | admindb/
 5 | npm-debug.log*
 6 | yarn-debug.log*
 7 | yarn-error.log*
 8 | /test/unit/coverage/
 9 | /test/e2e/reports/
10 | selenium-debug.log
11 | 
12 | # Editor directories and files
13 | .idea
14 | .vscode
15 | *.suo
16 | *.ntvs*
17 | *.njsproj
18 | *.sln
19 | package-lock.json
20 | .env.production.local
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-mini-project
 2 | 
 3 | vue-mini-project
 4 | vue-mini 实现
 5 | 
 6 | 1. [x] dep done
 7 | 2. [x] reactive done
 8 | 3. [x] render done
 9 | 4. [x] setup
10 | 5. [x] effect & reactive
11 | 6. [x] runner
12 | 7. [x] scheduler
13 | 8. [x] stop
14 | 9. [x] readonly
15 | 10. [x] isReactive isReadonly
16 | 11. [x] shallowreadonly
17 | 12. [x] isref unref
18 | 13. [x] proxyRefs
19 | 14. [x] computed
20 | 15. [x] rollup
21 | 16. [x] element
22 | 17. [x] 组件代理对象
23 | 18. [x] shapeflags
24 | 19. [x] 注册事件
25 | 20. [x] props
26 | 21. [x] emit
27 | 22. [x] slots
28 | 23. [x] props
29 | 24. [x] children
30 | 25. [x] diff
31 | 26. [x] 组件更新
32 | 27. [x] nextTick
33 | 28. [x] test
34 | 29. [x] 编译流程
35 | 30. [x] 插值解析
36 | 31. [x] 解析 element 标签
37 | 32. [x] 解析 text
38 | 33. [x] 解析 text+element
39 | 34. [x] 有限状态机
40 | 35. [x] string--> render + slot-->render + 联合类型
41 | 36. [x] template --> render
42 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     ["@babel/preset-env", { targets: { node: "current" } }],
4 |     "@babel/preset-typescript",
5 |   ],
6 | };
7 | // nodejs 下默认的模块规范是common
8 | 


--------------------------------------------------------------------------------
/doc/1.简介.md:
--------------------------------------------------------------------------------
  1 | # 简介
  2 | 
  3 | ## vue
  4 | 
  5 | vue 的两个核心功能：
  6 | 
  7 | 1. 声明式渲染：Vue 基于标准 HTML 拓展了一套模版语法，使得我们可以声明式的描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  8 | 2. 响应式：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式的更新 DOM。
  9 | 
 10 | ## 渐进式框架
 11 | 
 12 | Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：
 13 | 
 14 | - 无需构建步骤，渐进式增强静态的 HTML
 15 | - 在任何页面中作为 Web Components 嵌入
 16 | - 单页应用（SPA）
 17 | - 全栈/服务端渲染（SSR）
 18 | - Jam stack / 静态站点生成(SSG)
 19 | - 开发桌面端，移动端，WebGL,甚至是命令行终端中的界面。
 20 | 
 21 | ## 单文件组件
 22 | 
 23 | 在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 \*.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例：
 24 | 
 25 | ```vue
 26 | <script>
 27 | export default {
 28 |   data() {
 29 |     return {
 30 |       count: 0,
 31 |     };
 32 |   },
 33 | };
 34 | </script>
 35 | 
 36 | <template>
 37 |   <button @click="count++">Count is: {{ count }}</button>
 38 | </template>
 39 | 
 40 | <style scoped>
 41 | button {
 42 |   font-weight: bold;
 43 | }
 44 | </style>
 45 | ```
 46 | 
 47 | ## API 风格
 48 | 
 49 | Vue 的组件可以按两种不同风格书写：选项式 API 和组合式 API.
 50 | 
 51 | ### 选项式 API(Options API)
 52 | 
 53 | 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
 54 | 
 55 | ```vue
 56 | <script>
 57 | export default {
 58 |   // data() 返回的属性将会成为响应式的状态
 59 |   // 并且暴露在 `this` 上
 60 |   data() {
 61 |     return {
 62 |       count: 0,
 63 |     };
 64 |   },
 65 | 
 66 |   // methods 是一些用来更改状态与触发更新的函数
 67 |   // 它们可以在模板中作为事件监听器绑定
 68 |   methods: {
 69 |     increment() {
 70 |       this.count++;
 71 |     },
 72 |   },
 73 | 
 74 |   // 生命周期钩子会在组件生命周期的各个不同阶段被调用
 75 |   // 例如这个函数就会在组件挂载完成后被调用
 76 |   mounted() {
 77 |     console.log(`The initial count is ${this.count}.`);
 78 |   },
 79 | };
 80 | </script>
 81 | 
 82 | <template>
 83 |   <button @click="increment">Count is: {{ count }}</button>
 84 | </template>
 85 | ```
 86 | 
 87 | ### 组合式 API(Composition API)
 88 | 
 89 | 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 `<script setup>` 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，`<script setup>` 中的导入和顶层变量/函数都能够在模板中直接使用。
 90 | 
 91 | 下面是使用了组合式 API 与 `<script setup>` 改造后和上面的模板完全一样的组件：
 92 | 
 93 | ```vue
 94 | <script setup>
 95 | import { ref, onMounted } from "vue";
 96 | // 响应式状态
 97 | const count = ref(0);
 98 | 
 99 | // 用来修改状态，触发更新的函数
100 | function increment() {
101 |   count.value++;
102 | }
103 | 
104 | onMounted(() => {
105 |   console.log(`The initial count is ${count.value}.`);
106 | });
107 | </script>
108 | <template>
109 |   <button @click="increment">Count is: {{ count }}</button>
110 | </template>
111 | ```
112 | 
113 | 两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。
114 | 
115 | 选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。
116 | 
117 | 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。
118 | 


--------------------------------------------------------------------------------
/doc/10.表单输入绑定.md:
--------------------------------------------------------------------------------
  1 | # 表单输入绑定
  2 | 
  3 | 在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中响应的变量。手动链接值绑定和更改事件监听器可能会很麻烦。
  4 | 
  5 | ```html
  6 | <input :value="text" @input="event => text = event.target.value" />
  7 | ```
  8 | 
  9 | v-model 指令帮我们简化了这一步骤。
 10 | 
 11 | ```html
 12 | <input v-model="text" />
 13 | ```
 14 | 
 15 | 另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：
 16 | 
 17 | - 文本类型的<input>和<textarea> 元素会绑定 value property 并侦听 input 事件。
 18 | - <input type ="checkbox">和<input type="radio">会绑定 checked property 并侦听 change 事件；
 19 | - <select>会绑定 value property 并侦听 change 事件。
 20 |   tip:
 21 |   v-model 会忽略任何表单元素上出事的 value,checked,或 selected attribute。他将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用 data 选项来声明该初始值。
 22 | 
 23 | ## 基本用法
 24 | 
 25 | ### 文本
 26 | 
 27 | ```html
 28 | <p>Message is: {{ message }}</p>
 29 | <input v-model="message" placeholder="edit me" />
 30 | ```
 31 | 
 32 | tip:
 33 | 对于需要使用 IME 的语言，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。
 34 | 
 35 | ### 多行文本
 36 | 
 37 | ```html
 38 | <span>Multiline message is:</span>
 39 | <p style="white-space: pre-line;">{{ message }}</p>
 40 | <textarea v-model="message" placeholder="add multiple lines"></textarea>
 41 | ```
 42 | 
 43 | 注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：
 44 | 
 45 | ```html
 46 | <!-- 错误 -->
 47 | <textarea>{{ text }}</textarea>
 48 | 
 49 | <!-- 正确 -->
 50 | <textarea v-model="text"></textarea>
 51 | ```
 52 | 
 53 | ### 复选框
 54 | 
 55 | 单一的复选框，绑定布尔类型值：
 56 | 
 57 | ```html
 58 | <input type="checkbox" id="checkbox" v-model="checked" />
 59 | <label for="checkbox">{{ checked }}</label>
 60 | ```
 61 | 
 62 | 我们也可以将多个复选框绑定到同一个数组或集合的值：
 63 | 
 64 | ```js
 65 | export default {
 66 |   data() {
 67 |     return {
 68 |       checkedNames: [],
 69 |     };
 70 |   },
 71 | };
 72 | ```
 73 | 
 74 | ```html
 75 | <div>Checked names: {{ checkedNames }}</div>
 76 | 
 77 | <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
 78 | <label for="jack">Jack</label>
 79 | 
 80 | <input type="checkbox" id="john" value="John" v-model="checkedNames" />
 81 | <label for="john">John</label>
 82 | 
 83 | <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
 84 | <label for="mike">Mike</label>
 85 | ```
 86 | 
 87 | 在这个例子中，checkedNames 数组将始终包含所有当前被选中的框的值。
 88 | 
 89 | ### 单选按钮
 90 | ```html
 91 | <div>Picked: {{ picked }}</div>
 92 | 
 93 | <input type="radio" id="one" value="One" v-model="picked" />
 94 | <label for="one">One</label>
 95 | 
 96 | <input type="radio" id="two" value="Two" v-model="picked" />
 97 | <label for="two">Two</label>
 98 | ```
 99 | ### 选择器
100 | 单个选择器的示例如下：
101 | ```html
102 | <div>Selected: {{ selected }}</div>
103 | 
104 | <select v-model="selected">
105 |   <option disabled value="">Please select one</option>
106 |   <option>A</option>
107 |   <option>B</option>
108 |   <option>C</option>
109 | </select>
110 | ```
111 | tip:
112 | 如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。
113 | 多选 (值绑定到一个数组)：
114 | ```html
115 | <div>Selected: {{ selected }}</div>
116 | <select v-model="selected" multiple>
117 |   <option>A</option>
118 |   <option>B</option>
119 |   <option>C</option>
120 | </select>
121 | ```
122 | 选择器的选项可以使用 v-for 动态渲染：
123 | ```js
124 | export default {
125 |   data() {
126 |     return {
127 |       selected: 'A',
128 |       options: [
129 |         { text: 'One', value: 'A' },
130 |         { text: 'Two', value: 'B' },
131 |         { text: 'Three', value: 'C' }
132 |       ]
133 |     }
134 |   }
135 | }
136 | ```
137 | ```html
138 | <select v-model="selected">
139 |   <option v-for="option in options" :value="option.value">
140 |     {{ option.text }}
141 |   </option>
142 | </select>
143 | 
144 | <div>Selected: {{ selected }}</div>
145 | ```
146 | ## 值绑定
147 | 对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：
148 | 
149 | ```html
150 | <!-- `picked` 在被选择时是字符串 "a" -->
151 | <input type="radio" v-model="picked" value="a" />
152 | 
153 | <!-- `toggle` 只会为 true 或 false -->
154 | <input type="checkbox" v-model="toggle" />
155 | 
156 | <!-- `selected` 在第一项被选中时为字符串 "abc" -->
157 | <select v-model="selected">
158 |   <option value="abc">ABC</option>
159 | </select>
160 | ```
161 | 但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。
162 | ### 复选框
163 | ```html
164 | <input
165 |   type="checkbox"
166 |   v-model="toggle"
167 |   true-value="yes"
168 |   false-value="no" />
169 | ```       
170 | true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：
171 | 
172 | ```html
173 | <input
174 |   type="checkbox"
175 |   v-model="toggle"
176 |   :true-value="dynamicTrueValue"
177 |   :false-value="dynamicFalseValue" />
178 | ```
179 | tip:
180 | `true-value` 和 `false-value` attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。
181 | ### 单选按钮
182 | ```html
183 | <input type="radio" v-model="pick" :value="first" />
184 | <input type="radio" v-model="pick" :value="second" />
185 | ```
186 | pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。
187 | ### 选择器选项
188 | ```html
189 | <select v-model="selected">
190 |   <!-- 内联对象字面量 -->
191 |   <option :value="{ number: 123 }">123</option>
192 | </select>
193 | ```
194 | v-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }。
195 | ## 修饰符
196 | ### .lazy
197 | 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
198 | ```html
199 | <!-- 在 "change" 事件后同步更新而不是 "input" -->
200 | <input v-model.lazy="msg" />
201 | ```
202 | ### .number
203 | 如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
204 | ```html
205 | <input v-model.number="age" />
206 | ```
207 | 如果该值无法被 parseFloat() 处理，那么将返回原始值。
208 | 
209 | number 修饰符会在输入框有 `type="number"` 时自动启用。
210 | ### .trim
211 | 如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
212 | ```html
213 | <input v-model.trim="msg" />
214 | ```
215 | ## 组件上的 v-model
216 | HTML的内置表单输入类型并不总能班组所有需求。但是我们可以使用Vue构建具有自定义行为的复用输入组件，并且这些输入组件也支持 v-model.


--------------------------------------------------------------------------------
/doc/11.生命周期.md:
--------------------------------------------------------------------------------
 1 | # 生命周期
 2 | 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
 3 | ## 注册周期钩子
 4 | 举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：
 5 | 
 6 | ```js
 7 | export default {
 8 |   mounted() {
 9 |     console.log(`the component is now mounted.`)
10 |   }
11 | }
12 | ```
13 | 还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted。
14 | 
15 | 所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。
16 | 
17 | ## 生命周期图示
18 | ![alt 属性文本](https://cn.vuejs.org/assets/lifecycle.16e4c08e.png)


--------------------------------------------------------------------------------
/doc/12.侦听器.md:
--------------------------------------------------------------------------------
  1 | # 侦听器
  2 | ## 基本示例
  3 | 计算属性允许我们声明性的计算衍生值。然而在有些情况下，我们需要在状态变化的时候执行一些副作用。例如更改DOM,或是根据异步操作的结果去修改另一处的状态。
  4 | 在选项式API中，我们可以使用watch选项在每次响应式属性发生变化时触发一个函数。
  5 | ```js
  6 | export default {
  7 |   data() {
  8 |     return {
  9 |       question: '',
 10 |       answer: 'Questions usually contain a question mark. ;-)'
 11 |     }
 12 |   },
 13 |   watch: {
 14 |     // 每当 question 改变时，这个函数就会执行
 15 |     question(newQuestion, oldQuestion) {
 16 |       if (newQuestion.includes('?')) {
 17 |         this.getAnswer()
 18 |       }
 19 |     }
 20 |   },
 21 |   methods: {
 22 |     async getAnswer() {
 23 |       this.answer = 'Thinking...'
 24 |       try {
 25 |         const res = await fetch('https://yesno.wtf/api')
 26 |         this.answer = (await res.json()).answer
 27 |       } catch (error) {
 28 |         this.answer = 'Error! Could not reach the API. ' + error
 29 |       }
 30 |     }
 31 |   }
 32 | }
 33 | ```
 34 | ```html
 35 | <p>
 36 |   Ask a yes/no question:
 37 |   <input v-model="question" />
 38 | </p>
 39 | <p>{{ answer }}</p>
 40 | ```
 41 | watch 选项也支持把键设置成用 . 分隔的路径：
 42 | ```js
 43 | export default {
 44 |   watch: {
 45 |     // 注意：只能是简单的路径，不支持表达式。
 46 |     'some.nested.key'(newValue) {
 47 |       // ...
 48 |     }
 49 |   }
 50 | }
 51 | ```
 52 | ## 深层侦听器
 53 | watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，你需要深层侦听器：
 54 | 
 55 | ```js
 56 | export default {
 57 |   watch: {
 58 |     someObject: {
 59 |       handler(newValue, oldValue) {
 60 |         // 注意：在嵌套的变更中，
 61 |         // 只要没有替换对象本身，
 62 |         // 那么这里的 `newValue` 和 `oldValue` 相同
 63 |       },
 64 |       deep: true
 65 |     }
 66 |   }
 67 | }
 68 | ```
 69 | 谨慎使用:
 70 | 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。
 71 | ## 即时回调的侦听器
 72 | watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
 73 | 
 74 | 我们可以用一个对象来声明侦听器，这个对象有 handler 方法和 immediate: true 选项，这样便能强制回调函数立即执行：
 75 | 
 76 | ```js
 77 | export default {
 78 |   // ...
 79 |   watch: {
 80 |     question: {
 81 |       handler(newQuestion) {
 82 |         // 在组件实例创建时会立即调用
 83 |       },
 84 |       // 强制立即执行回调
 85 |       immediate: true
 86 |     }
 87 |   }
 88 |   // ...
 89 | }
 90 | ```
 91 | 回调函数的初次执行就发生在 created 钩子之前。Vue 此时已经处理了 data、computed 和 methods 选项，所以这些属性在第一次调用时就是可用的。
 92 | ## 回调的触发时机
 93 | 当你更改了响应式状态，他可能会同时触发Vue组件更新和侦听器回调。
 94 | 默认情况下，用户创建的侦听器回调，都会在Vue组件之前被调用。这意味着你在侦听器回调中访问的DOM将是被Vue更新之前的状态。
 95 | 
 96 | 如果想在侦听器回调中能访问被Vue更新之后的DOM,你需要指明：`flush: 'post'`选项：
 97 | ```js
 98 | export default {
 99 |   // ...
100 |   watch: {
101 |     key: {
102 |       handler() {},
103 |       flush: 'post'
104 |     }
105 |   }
106 | }
107 | ```
108 | ## this.$watch()
109 | 可以使用组件示例的`$watch()` 来命令式的创建一个侦听器：
110 | ```js
111 | export default {
112 |   created(){
113 |     this.$watch('question', (newQuestion)=>{
114 |       // ...
115 |     })
116 |   }
117 | }
118 | ```
119 | 如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。他还允许你提前停止改侦听器。
120 | 
121 | ## 停止侦听器
122 | 用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止。因此，在大多数场景下，你无需关心怎么停止它。
123 | 
124 | 在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API 返回的函数：
125 | ```js
126 | const unwatch = this.$watch('foo', callback)
127 | // ...当该侦听器不再需要时
128 | unwatch()
129 | ```


--------------------------------------------------------------------------------
/doc/13.模版引用.md:
--------------------------------------------------------------------------------
 1 | # 模版引用
 2 | 虽然Vue的声明性渲染模型为你抽象来大部分对DOM的直接操作，但是在某些情况下，我们仍然需要直接访问底层的DOM元素。要实现这一点，可以使用特殊的 ref attribute:
 3 | `<input ref="input"/>`
 4 | `ref` 是一个特殊的attribute,和 v-for 章节中提到的 key 类似。他允许我们在体格特定的DOM元素或子组件实例被挂载后，获得对他的直接引用。这可能很有用。比如说在组件挂载时将焦点设置到一个input元素上，或在一个元素上初始化一个第三方库。
 5 | 
 6 | ## 访问模版引用
 7 | 挂载可数之后引用都会暴露在 this.$refs 之上：
 8 | ```js
 9 | <script>
10 | export default {
11 |   mounted() {
12 |     this.$refs.input.focus()
13 |   }
14 | }
15 | </script>
16 | 
17 | <template>
18 |   <input ref="input" />
19 | </template>
20 | ```
21 | 注意，你只可以在组件挂载后才能访问模版引用。如果你想在模版中的表达式上访问 `$refs.input`，在初次渲染时会时null。这是因为在初次渲染前，这个元素还不存在。
22 | 
23 | ## v-for 中的模版引用
24 | // 需要 v3.2.25 及以上版本
25 | 当在 v-for 中使用模版引用时，响应的引用中包含的值时一个数组：
26 | ```js
27 | export default {
28 |   data() {
29 |     return {
30 |       list: [
31 |         /* ... */
32 |       ]
33 |     }
34 |   },
35 |   mounted() {
36 |     console.log(this.$refs.items)
37 |   }
38 | }
39 | </script>
40 | 
41 | <template>
42 |   <ul>
43 |     <li v-for="item in list" ref="items">
44 |       {{ item }}
45 |     </li>
46 |   </ul>
47 | </template>
48 | ```
49 | 应该注意的是，ref数组并不保证与源数组相同的顺序。
50 | 
51 | ## 函数模版引用
52 | 除了使用字符串值作为名字，ref attribute 还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：
53 | `<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">`
54 | 注意我们这里需要使用动态的 `:ref`绑定才能够传入一个函数。当绑定的元素被卸载时，函数也会被调用一次，此时 el 参数会是 null。你当然也可以绑定一个组件方法而不是内联函数。
55 | 
56 | ## 组件上的ref
57 | 模版引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例：
58 | ```vue
59 | <script>
60 | import Child from './Child.vue'
61 | 
62 | export default {
63 |   components: {
64 |     Child
65 |   },
66 |   mounted() {
67 |     // this.$refs.child 是 <Child /> 组件的实例
68 |   }
69 | }
70 | </script>
71 | 
72 | <template>
73 |   <Child ref="child" />
74 | </template>
75 | ```
76 | 如果一个子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。
77 | 
78 | expose 选项可以用于限制对子组件实例的访问：
79 | ```js
80 | export default {
81 |   expose: ['publicData', 'publicMethod'],
82 |   data() {
83 |     return {
84 |       publicData: 'foo',
85 |       privateData: 'bar'
86 |     }
87 |   },
88 |   methods: {
89 |     publicMethod() {
90 |       /* ... */
91 |     },
92 |     privateMethod() {
93 |       /* ... */
94 |     }
95 |   }
96 | }
97 | ```
98 | 在上面这个例子中，父组件通过模板引用访问到子组件实例后，仅能访问 publicData 和 publicMethod。
99 | 


--------------------------------------------------------------------------------
/doc/14.组件基础.md:
--------------------------------------------------------------------------------
  1 | # 组件基础
  2 | 
  3 | 组件允许我们将 UI 划分为独立的，可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层签到的树状结构：
  4 | ![img](https://cn.vuejs.org/assets/components.7fbb3771.png)
  5 | 
  6 | 这和我们嵌套的 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们在每个组件内封装自定义内容与逻辑。Vue 同样也能很好的配合原声 WebComponent.本章节讲解 Vue 组件与原声 WebComponents 之间的关系。
  7 | 
  8 | ## 定义一个组件
  9 | 
 10 | 当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：
 11 | 
 12 | ```vue
 13 | <script>
 14 | export default {
 15 |   data() {
 16 |     return {
 17 |       count: 0,
 18 |     };
 19 |   },
 20 | };
 21 | </script>
 22 | 
 23 | <template>
 24 |   <button @click="count++">You clicked me {{ count }} times.</button>
 25 | </template>
 26 | ```
 27 | 
 28 | 当不实用构建步骤时，一个 Vue 组件以一个包含 Vue 特性选项的 JavaScript 对象来定义：
 29 | 
 30 | ```js
 31 | export default {
 32 |   data() {
 33 |     return {
 34 |       count: 0,
 35 |     };
 36 |   },
 37 |   template: `
 38 |     <button @click="count++">
 39 |       You clicked me {{ count }} times.
 40 |     </button>`,
 41 | };
 42 | ```
 43 | 
 44 | 这里的模版是一个内联的 JavaScript 字符串，Vue 将会在运行时编译他。也可以使用 ID 选择器来指向一个元素，通常是原生的<template>元素，Vue 将会使用其内容作为模版来源。
 45 | 上面例子中定义来一个组件，并在一个.js 文件里默认导出他自己，但你也可以通过 具名导出 在一个文件中导出多个组件。
 46 | 
 47 | ## 使用组件
 48 | 
 49 | tip:
 50 | 我们会在接下来的指引中使用 SFC 语法，无论你是否使用构建步骤，组件相关的概念都是相同的。示例一节中展示了两种场景中的组件使用情况。
 51 | 要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中，这个组件将会以默认导出的形式被暴露给外部。
 52 | 
 53 | ```vue
 54 | <script>
 55 | import ButtonCounter from "./ButtonCounter.vue";
 56 | 
 57 | export default {
 58 |   components: {
 59 |     ButtonCounter,
 60 |   },
 61 | };
 62 | </script>
 63 | 
 64 | <template>
 65 |   <h1>Here is a child component!</h1>
 66 |   <ButtonCounter />
 67 | </template>
 68 | ```
 69 | 
 70 | 若要将导入的组件暴露给模板，我们需要在 components 选项上注册它。这个组件将会以其注册时的名字作为模板中的标签名。
 71 | 
 72 | 当然，你也可以全局地注册一个组件，使得它在当前应用中的任何组件上都可以使用，而不需要额外再导入。关于组件的全局注册和局部注册两种方式的利弊，我们放在了组件注册这一章节中专门讨论。
 73 | 
 74 | 组件可以被重用任意多次：
 75 | 
 76 | ```js
 77 | <h1>Here is a child component!</h1>
 78 | <ButtonCounter />
 79 | <ButtonCounter />
 80 | <ButtonCounter />
 81 | ```
 82 | 
 83 | ## 传递 props
 84 | 
 85 | 如果我们正在构建一个博客，我们可能需要一个表示博客文章的组件。我们希望所有的博客文章分享相同的视觉布局，但有不同的内容。要实现这样的效果自然必须向组件中传递数据，例如每篇文章标题和内容，这就会使用到 props。
 86 | 
 87 | Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。这里要用到 props 选项：
 88 | 
 89 | ```vue
 90 | <!-- BlogPost.vue -->
 91 | <script>
 92 | export default {
 93 |   props: ["title"],
 94 | };
 95 | </script>
 96 | 
 97 | <template>
 98 |   <h4>{{ title }}</h4>
 99 | </template>
100 | ```
101 | 
102 | 当一个值被传递给 prop 时，它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样，在模板和组件的 this 上下文中访问。
103 | 
104 | 一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。
105 | 
106 | 当一个 prop 被注册后，可以像这样以自定义 attribute 的形式传递数据给它：
107 | 
108 | ```js
109 | <BlogPost title="My journey with Vue" />
110 | <BlogPost title="Blogging with Vue" />
111 | <BlogPost title="Why Vue is so fun" />
112 | ```
113 | 
114 | 在实际应用中，我们可能在父组件中会有如下的一个博客文章数组：
115 | 
116 | ```js
117 | export default {
118 |   // ...
119 |   data() {
120 |     return {
121 |       posts: [
122 |         { id: 1, title: "My journey with Vue" },
123 |         { id: 2, title: "Blogging with Vue" },
124 |         { id: 3, title: "Why Vue is so fun" },
125 |       ],
126 |     };
127 |   },
128 | };
129 | ```
130 | 
131 | 这种情况下，我们可以使用 v-for 来渲染它们：
132 | 
133 | ```js
134 | <BlogPost v-for="post in posts" :key="post.id" :title="post.title" />
135 | ```
136 | 
137 | 留意我们是如何使用 v-bind 来传递动态 prop 值的。当事先不知道要渲染的确切内容时，这一点特别有用。
138 | 
139 | 以上就是目前你需要了解的关于 props 的全部了。如果你看完本章节后还想知道更多细节，我们推荐你深入阅读关于 props 的完整指引。
140 | 
141 | ## 监听时间
142 | 让我们继续关注我们的 <BlogPost> 组件。我们会发现有时候它需要与父组件进行交互。例如，要在此处实现 A11y 的需求，将博客文章的文字能够放大，而页面的其余部分仍使用默认字号。
143 | 
144 | 在父组件中，我们可以添加一个 postFontSize 数据属性来实现这个效果：
145 | 
146 | ```js
147 | data() {
148 |   return {
149 |     posts: [
150 |       /* ... */
151 |     ],
152 |     postFontSize: 1
153 |   }
154 | }
155 | ```
156 | 
157 | 在模板中用它来控制所有博客文章的字体大小：
158 | 
159 | ```html
160 | <div :style="{ fontSize: postFontSize + 'em' }">
161 |   <BlogPost v-for="post in posts" :key="post.id" :title="post.title" />
162 | </div>
163 | ```
164 | 
165 | 然后，给 <BlogPost> 组件添加一个按钮：
166 | 
167 | ```vue
168 | <!-- BlogPost.vue, 省略了 <script> -->
169 | <template>
170 |   <div class="blog-post">
171 |     <h4>{{ title }}</h4>
172 |     <button>Enlarge text</button>
173 |   </div>
174 | </template>
175 | ```
176 | 这个按钮目前还没有做任何事情，我们想要点击这个按钮来告诉父组件它应该放大所有博客文章的文字。要解决这个问题，组件实例提供了一个自定义事件系统。父组件可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件，就像监听原生 DOM 事件那样：
177 | ```html
178 | <BlogPost
179 |   ...
180 |   @enlarge-text="postFontSize += 0.1"
181 |  />
182 | ```
183 | 自组件可以通过调用内置的 $emit 方法，通过传入事件名称来抛出一个事件：
184 | ```vue
185 | <template>
186 |   <div class="blog-post">
187 |     <h4>{{ title }}</h4>
188 |     <button @click="$emit('enlarge-text')">Enlarge text</button>
189 |   </div>
190 | </template>
191 | 
192 | ```
193 | 因为有了 @enlarge-text="postFontSize += 0.1" 的监听，父组件会接收这一事件，从而更新 postFontSize 的值。
194 | 
195 | 我们可以通过 `defineEmits` 宏来声明需要抛出的事件：
196 | ```vue
197 | <!-- BlogPost.vue -->
198 | <script setup>
199 | defineProps(['title'])
200 | defineEmits(['enlarge-text'])
201 | </script>
202 | ```
203 | 这声明了一个组件可能触发的所有事件，还可以对事件的参数进行验证。同时，这还可以让 Vue 避免将它们作为原生事件监听器隐式地应用于子组件的根元素。
204 | 和 defineProps 类似，defineEmits 仅可用于 `<script setup>` 之中，并且不需要导入，它返回一个等同于 $emit 方法的 emit 函数。它可以被用于在组件的 `<script setup> `中抛出事件，因为此处无法直接访问 $emit：
205 | ```vue
206 | <script setup>
207 | const emit = defineEmits(['enlarge-text'])
208 | emit('enlarge-text')
209 | </script>
210 | ```
211 | 如果你没有在使用 `<script setup>`，你可以通过 `emits` 选项定义组件会抛出的事件。你可以从 `setup()` 函数的第二个参数，即 setup 上下文对象上访问到 emit 函数：
212 | ```js
213 | export default {
214 |   emits: ['enlarge-text'],
215 |   setup(props, ctx){
216 |     ctx.emit('enlarge-text')
217 |   }
218 | }
219 | ```
220 | ## 通过插槽来分配内容
221 | 一些情况下我们会希望能和 HTML 元素一样向组件中传递内容：
222 | ```js
223 | <AlertBox>
224 |   Something bad happened.
225 | </AlertBox>
226 | ```
227 | 这可以通过 Vue 的自定义 <slot> 元素来实现：
228 | 
229 | ```vue
230 | <template>
231 |   <div class="alert-box">
232 |     <strong>This is an Error for Demo Purposes</strong>
233 |     <slot />
234 |   </div>
235 | </template>
236 | 
237 | <style scoped>
238 | .alert-box {
239 |   /* ... */
240 | }
241 | </style>
242 | ```
243 | 如上所示，我们使用 <slot> 作为一个占位符，父组件传递进来的内容就会渲染在这里。
244 | 
245 | ## 动态组件
246 | 有些场景会需要在两个组件间来回切换，比如tab界面：
247 | ```html
248 | <!-- currentTab 改变时组件也改变 -->
249 | <component :is="tabs[currentTab]"></component>
250 | ```
251 | 在上面例子中，被传给 :is 的值可以是一以下几种：
252 | - 被注册的组件名
253 | - 导入的组件对象
254 |   你也可以使用 is attribute 来创建一般的html元素。
255 |   当使用 `<component :is="...">` 来在多个组件间作为切换时，被切换掉的组件会被卸载。我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。
256 | ## DOM 模版解析注意事项
257 | 如果你想在 DOM 中直接书写 Vue 模板，Vue 则必须从 DOM 中获取模板字符串。由于浏览器的原生 HTML 解析行为限制，有一些需要注意的事项。
258 | tip:
259 | 请注意下面讨论只适用与直接在DOM中编写模版的情况。如果你适用来自以下来源的字符串模版，就不需要顾虑这些限制了。
260 | - 单文件组件
261 | - 内联模版字符串（例如：template）
262 | - <script type="text/x-template">
263 | ### 大小写区分
264 | HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写。这意味着当你使用 DOM 内的模板时，无论是 PascalCase 形式的组件名称、camelCase 形式的 prop 名称还是 v-on 的事件名称，都需要转换为相应等价的 kebab-case (短横线连字符) 形式：
265 | ```js
266 | // JavaScript 中的 camelCase
267 | const BlogPost = {
268 |   props: ['postTitle'],
269 |   emits: ['updatePost'],
270 |   template: `
271 |     <h3>{{ postTitle }}</h3>
272 |   `
273 | }
274 | ```
275 | ```html
276 | <!-- HTML 中的 kebab-case -->
277 | <blog-post post-title="hello!" @update-post="onUpdatePost"></blog-post>
278 | ```
279 | ### 闭合标签
280 | 我们在上面的例子中已经使用过了闭合标签（self-closing tag）:
281 | `<MyComponent />`
282 | 这是因为Vue的模版解析器支持任意标签使用 />作为标签关闭的标志。
283 | 然而在DOM模版中，我们必须显式的写出关闭标签。
284 | `<MyComponent></MyComponent>`
285 | 
286 | 这是由于 HTML 只允许一小部分特殊的元素省略其关闭标签，最常见的就是 <input> 和 <img>。对于其他的元素来说，如果你省略了关闭标签，原生的 HTML 解析器会认为开启的标签永远没有结束，用下面这个代码片段举例来说：
287 | 
288 | ```html
289 | <my-component /> <!-- 我们想要在这里关闭标签... -->
290 | <span>hello</span>
291 | ```
292 | 将被解析为：
293 | 
294 | 
295 | ```html
296 | <my-component>
297 |   <span>hello</span>
298 | </my-component> <!-- 但浏览器会在这里关闭标签 -->
299 | ```
300 | ### 元素位置限制
301 | 某些 HTML 元素对于放在其中的元素类型有限制，例如 <ul>，<ol>，<table> 和 <select>，相应的，某些元素仅在放置于特定元素中时才会显示，例如 <li>，<tr> 和 <option>。
302 | 
303 | 这将导致在使用带有此类限制元素的组件时出现问题。例如：
304 | 
305 | ```html
306 | <table>
307 |   <blog-post-row></blog-post-row>
308 | </table>
309 | ```
310 | 自定义的组件 <blog-post-row> 将作为无效的内容被忽略，因而在最终呈现的输出中造成错误。我们可以使用特殊的 is attribute 作为一种解决方案：
311 | 
312 | ```html
313 | <table>
314 |   <tr is="vue:blog-post-row"></tr>
315 | </table>
316 | ```
317 | tip:
318 | 当使用在原声HTML元素上是，is 的值必须加上前缀 ‘vue:’才可以被解析为一个vue组件。这一点是必要的，为了避免和原声的自定义内置元素相混淆。
319 | 


--------------------------------------------------------------------------------
/doc/2.创建应用.md:
--------------------------------------------------------------------------------
  1 | # 创建一个 Vue 应用
  2 | 
  3 | ## 应用实例
  4 | 
  5 | 每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：
  6 | 
  7 | ```js
  8 | import { createApp } from "vue";
  9 | 
 10 | const app = createApp({
 11 |   /* 根组件选项 */
 12 | });
 13 | ```
 14 | 
 15 | ## 根组件
 16 | 
 17 | 我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
 18 | 如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。
 19 | 
 20 | ```js
 21 | import { createApp } from "vue";
 22 | // 从一个单文件组件中导入根组件
 23 | import App from "./App.vue";
 24 | 
 25 | const app = createApp(App);
 26 | ```
 27 | 
 28 | 虽然本指南中的许多示例只需要一个组件，但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。例如，一个待办事项 (Todos) 应用的组件树可能是这样的：
 29 | 
 30 | ```md
 31 | App (root component)
 32 | ├─ TodoList
 33 | │ └─ TodoItem
 34 | │ ├─ TodoDeleteButton
 35 | │ └─ TodoEditButton
 36 | └─ TodoFooter
 37 | ├─ TodoClearButton
 38 | └─ TodoStatistics
 39 | ```
 40 | 
 41 | 我们会在指南的后续章节中讨论如何定义和组合多个组件。在那之前，我们得先关注一个组件内到底发生了什么。
 42 | 
 43 | ## 挂载应用
 44 | 
 45 | 应用实例必须在调用了 `.mount()` 方法后才会渲染出来。该方法接收一个‘容器’参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
 46 | 
 47 | ```js
 48 | <div id="app"></div>;
 49 | 
 50 | app.mounted("#app");
 51 | ```
 52 | 
 53 | 应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
 54 | `.mounted()`方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，她的返回值是根组件实例而非应用实例。
 55 | 
 56 | ## DOM 中的根组件模版
 57 | 
 58 | 党在未采用构建流程的情况下使用 Vue 时，我们可以在挂载容器中直接书写根组件模版：
 59 | 
 60 | ```html
 61 | <div id="app">
 62 |   <button @click="count++">{{ count }}</button>
 63 | </div>
 64 | ```
 65 | 
 66 | ```js
 67 | import { createApp } from "vue";
 68 | 
 69 | const app = createApp({
 70 |   data() {
 71 |     return {
 72 |       count: 0,
 73 |     };
 74 |   },
 75 | });
 76 | 
 77 | app.mount("#app");
 78 | ```
 79 | 
 80 | 当根组件没有设置 `template` 选项时，Vue 将自动使用容器的 `innerHTML` 作为模板。
 81 | 
 82 | ## 应用配置
 83 | 
 84 | 应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，它将捕获所有由子组件上抛而未被处理的错误：
 85 | 
 86 | ```js
 87 | app.config.errorHandler = (err) => {
 88 |   /* 处理错误 */
 89 | };
 90 | ```
 91 | 
 92 | 应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：
 93 | 
 94 | ```js
 95 | app.component("TodoDeleteButton", TodoDeleteButton);
 96 | ```
 97 | 
 98 | 这使得 TodoDeleteButton 在应用的任何地方都是可用的。
 99 | 确保在挂载应用实例之前完成所有应用配置！
100 | 
101 | ## 多个应用实例
102 | 
103 | 应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
104 | 
105 | ```js
106 | const app1 = createApp({
107 |   /* ... */
108 | });
109 | app1.mount("#container-1");
110 | 
111 | const app2 = createApp({
112 |   /* ... */
113 | });
114 | app2.mount("#container-2");
115 | ```
116 | 
117 | 如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。
118 | 


--------------------------------------------------------------------------------
/doc/3.模版语法.md:
--------------------------------------------------------------------------------
  1 | # 模版语法
  2 | Vue使用一种基于HTML的模版语法，使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上。所有的Vue模版都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析。
  3 | 在底层机制中，Vue会将模版编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue能够智能的推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。
  4 | 
  5 | 如果你对虚拟DOM的概念比较熟悉，并且偏好直接使用JavaScript，你也可以结合可选的JSX支持直接手写渲染函数，而不采用模版。但是，这将不回享受到和模版痛风级别的编译时优化。
  6 | 
  7 | ## 文本插值
  8 | 最基本的数据绑定形式时文本插值，他使用的是 'Mustache' 语法，即，双大括号。
  9 | ```js
 10 | <span>Message: {{ msg }}</span>
 11 | ```
 12 | 双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
 13 | 
 14 | ## 原始HTML
 15 | 双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
 16 | ```js
 17 | <p>Using text interpolation: {{ rawHtml }}</p>
 18 | <p>Using v-html directive: <span v-html="rawHtml"></span></p>
 19 | ```
 20 | 这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。
 21 | 
 22 | span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。
 23 | 
 24 | ## Attribute 绑定
 25 | 双大括号不能在HTML attributes 中使用，想要响应式的绑定一个 attribute,应该使用 `v-bind`  指令：
 26 | ```js
 27 | <div v-bind:id="dynamicId"></div>
 28 | ```
 29 | v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
 30 | ### 简写
 31 | 因为 v-bind 非常常用，我们提供了特定的简写语法：
 32 | ```html
 33 | <div :id="dynamicId"></div>
 34 | ```
 35 | 开头为 `:` 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的。
 36 | 
 37 | ### 布尔型 Attribute
 38 | 布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。
 39 | 
 40 | v-bind 在这种场景下的行为略有不同：
 41 | ```html
 42 | <button :disabled="isButtonDisabled">Button</button>
 43 | ```
 44 | 当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
 45 | 
 46 | ### 动态绑定多个值
 47 | 如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
 48 | ```js
 49 | data() {
 50 |   return {
 51 |     objectOfAttrs: {
 52 |       id: 'container',
 53 |       class: 'wrapper'
 54 |     }
 55 |   }
 56 | }
 57 | ```
 58 | 通过不带参数的 v-bind ,可以将他们绑定到单个元素上
 59 | ```js
 60 | <div v-bind="objectOfAttrs"></div>
 61 | 
 62 | <div {...objectOfAttrs} ></div>
 63 | ```
 64 | ## 使用JavaScript表达式
 65 | Vue在所有的数据绑定中都支持完整的Javascript表达式：
 66 | ```html
 67 | {{ number + 1 }}
 68 | 
 69 | {{ ok ? 'YES' : 'NO' }}
 70 | 
 71 | {{ message.split('').reverse().join('') }}
 72 | 
 73 | <div :id="`list-${id}`"></div>
 74 | ```
 75 | 这些表达式都会被作为js,以组件为作用域解析执行。
 76 | 在Vue模版内，JavaScript表达式可以被使用在如下场景上：
 77 | 1. 在文本插值中（双大括号）
 78 | 2. 在任何Vue指令attribute的值中（以 `v-` 开头的特殊attribute）
 79 | ### 仅支持表达式
 80 | 每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript 代码。一个简单的判断方法是：是否可以合法的写在 return 后面。
 81 | ### 调用函数
 82 | 可以在绑定的表达式中使用一个组件暴露的方法：
 83 | ```html
 84 | <span :title="toTitleDate(date)">
 85 |   {{ formatDate(date) }}
 86 | </span>
 87 | ```
 88 | tip:绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
 89 | ### 受限的全局访问
 90 | 模版中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 `Math`和`Date`.
 91 | 没有显式包含在列表中的全局对象将不能再模版内表达式中访问。例如用户福建在 `window` 上的属性，你可以自行在 `app.config.globalProperties` 上显式的添加他们，给所有的Vue表达式使用。
 92 | 
 93 | ## 指令 Directives
 94 | 指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。
 95 | 
 96 | 指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例：
 97 | ```js
 98 | <p v-if="seen">Now you see me</p>
 99 | ```
100 | 这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。
101 | 
102 | 
103 | ### 参数 Arguments
104 | 某些指令会需要一个’参数‘，在指令名后通过一个蛮好隔开做标识。例如用`v-bind`指令来响应式的更新一个HTML attribute：
105 | ```html
106 | <a v-bind:href="url"> ... </a>
107 | 
108 | <!-- 简写 -->
109 | <a :href="url"> ... </a>
110 | ```
111 | 这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。
112 | 
113 | 另一个例子是 v-on 指令，它将监听 DOM 事件：
114 | ```html
115 | <a v-on:click="doSomething"> ... </a>
116 | <!-- 简写 -->
117 | <a @click="doSomething"> ... </a>
118 | ```
119 | 这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。我们之后也会讨论关于事件处理的更多细节。
120 | 
121 | ### 动态参数
122 | 同样在指令参数上也可以使用一个JavaScript 表达式，需要包含一对方括号：
123 | ```html
124 |  <!-- 注意，参数表达式有一些约束，参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释 -->
125 |  <a v-bind:[attributeName]="url"> ... </a>
126 |  <a :[attributeName]="url"> ... </a>
127 | ```
128 | 这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。
129 | 
130 | 相似地，你还可以将一个函数绑定到动态的事件名称上：
131 | ```html
132 | <a v-on:[eventName]="doSomething"> ... </a>
133 | <!-- 简写 -->
134 | <a @[eventName]="doSomething">
135 | ```
136 | 在此示例中，当 eventName 的值是 ‘focus’时，v-on:[eventName] 就等价于 v-on:focus.
137 | ### 动态参数值的限制
138 | 动态参数中表达式的值应当是一个字符串，或者是 null,特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
139 | ### 动态参数语法的限制
140 | 动态参数表达式因为某县字符的缘故有一些语法限制，比如空格和遗憾，在HTML attribute 名称中都是不合法的，例如：
141 | ```html
142 | <!-- 这会触发一个编译器警告 -->
143 | <a :['foo' + bar]="value"> ... </a>
144 | ```
145 | 如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式，也是 Vue最基础的概念之一。
146 | 当使用DOM内嵌模版时，（直接卸载HTML文件里的模版）我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：
147 | ```html
148 | <a :[someAttr]="value"> ... </a>
149 | ```
150 | 上面的例子将会在DOM内嵌模版中被转换为  `:[someattr]`。如果你的组件拥有“someAttr”属性而不是‘someattr’，这段代码将不会工作。但文件组件内的模版不受此限制。
151 | ### 修饰符 Modifiers
152 | 修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如， `.prevent`修饰符会告知 `v-on`指令对触发的事件调用`event.preventDefault()`:
153 | ```html
154 | <form @submit.prevent="onSubmit"> ... </form>
155 | ```
156 | 
157 | 


--------------------------------------------------------------------------------
/doc/4.响应式基础.md:
--------------------------------------------------------------------------------
  1 | # 响应式基础
  2 | 
  3 | ## 声明响应式状态
  4 | 选用选项式API时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue将在创建新组件的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例上（即方法和生命周期钩子中的this）。
  5 | ```js
  6 | export default {
  7 |   data() {
  8 |     return {
  9 |       count: 1
 10 |     }
 11 |   },
 12 | 
 13 |   // `mounted` 是生命周期钩子，之后我们会讲到
 14 |   mounted() {
 15 |     // `this` 指向当前组件实例
 16 |     console.log(this.count) // => 1
 17 | 
 18 |     // 数据属性也可以被更改
 19 |     this.count = 2
 20 |   }
 21 | }
 22 | ```
 23 | 这些实例上的属性仅在实例首次创建时被添加，因此你需要确保它们都出现在 data 函数返回的对象上。若所需的值还未准备好，在必要时也可以使用 null、undefined 或者其他一些值占位。
 24 | 
 25 | 虽然也可以不在 data 上定义，直接向组件实例添加新属性，但这个属性将无法触发响应式更新。
 26 | 
 27 | Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。因此，你应该避免在顶层 data 上使用任何以这些字符作前缀的属性。
 28 | 
 29 | ### 响应式代理 vs. 原始值
 30 | 在Vue3中，数据是基于JavaScript Proxy(代理)实现响应式的。使用过Vue2的可能要注意以下边界情况：
 31 | ```js
 32 | export default {
 33 |   data() {
 34 |     return {
 35 |       ≈≈: {}
 36 |     }
 37 |   },
 38 |   mounted() {
 39 |     const newObject = {}
 40 |     this.someObject = newObject
 41 | 
 42 |     console.log(newObject === this.someObject) // false
 43 |   }
 44 | }
 45 | ```
 46 | 当在赋值之后再访问 `this.someObject`，此值以及是原来的`newObject`一个响应式代理。
 47 | 与Vue不同的是，这里原始的 newObject 不会变为响应式，要确保始终通过 this 来访问响应式状态。
 48 | ## 声明方法
 49 | 要为组件添加方法，需要用到 methods 选项。他应该是一个包含所有方法的对象：
 50 | ```js
 51 | export default {
 52 |   data() {
 53 |     return {
 54 |       count: 0
 55 |     }
 56 |   },
 57 |   methods: {
 58 |     increment() {
 59 |       this.count++
 60 |     }
 61 |   },
 62 |   mounted() {
 63 |     // 在其他方法或是生命周期中也可以调用方法
 64 |     this.increment()
 65 |   }
 66 | }
 67 | ```
 68 | Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数，因为箭头函数没有自己的 this 上下文。
 69 | ```js
 70 | export default {
 71 |   methods: {
 72 |     increment() {
 73 |       // 反例，无法访问此处的this
 74 |     }
 75 |   }
 76 | }
 77 | ```
 78 | 和组件实例上的其他属性一样，方法也可以在模版上被访问。在模版中他们经常被用作事件监听器。
 79 | ```html
 80 | <button @click="increment">{{ count }}</button>
 81 | ```
 82 | 
 83 | ### DOM更新时机
 84 | 当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只需要更新一次。
 85 | 
 86 | 若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：
 87 | ```js
 88 | import { nextTick } from 'vue'
 89 | 
 90 | export default {
 91 |   methods: {
 92 |     increment() {
 93 |       this.count++
 94 |       nextTick(() => {
 95 |         // 访问更新后的 DOM
 96 |       })
 97 |     }
 98 |   }
 99 | }
100 | ```
101 | ### 深层响应性
102 | 在vue中，状态都是默认深层响应式的。这意味着，即使在更改深层次的对象或数组，你的改动也能被监测到。
103 | ```js
104 | export default {
105 |   data() {
106 |     return {
107 |       obj: {
108 |         nested: { count: 0 },
109 |         arr: ['foo', 'bar']
110 |       }
111 |     }
112 |   },
113 |   methods: {
114 |     mutateDeeply() {
115 |       // 以下都会按照期望工作
116 |       this.obj.nested.count++
117 |       this.obj.arr.push('baz')
118 |     }
119 |   }
120 | }
121 | ```
122 | 你也可以直接创建一个浅层响应式对象。它们仅在顶层具有响应性，一般仅在某些特殊场景中需要。
123 | 
124 | #### 有状态方法
125 | 在某些情况下，我们可能需要动态地创建一个方法函数，比如创建一个预置防抖的事件处理器：
126 | ```js
127 | import { debounce } from 'lodash-es'
128 | 
129 | export default {
130 |   methods: {
131 |     // 使用 Lodash 的防抖函数
132 |     click: debounce(function () {
133 |       // ... 对点击的响应 ...
134 |     }, 500)
135 |   }
136 | }
137 | ```
138 | 不过这种方法对于被重用的组件来说是有问题的，因为这个预置防抖的函数是 有状态的：它在运行时维护着一个内部状态。如果多个组件实例都共享这同一个预置防抖的函数，那么它们之间将会互相影响。
139 | 
140 | 要保持每个组件实例的防抖函数都彼此独立，我们可以改为在 created 生命周期钩子中创建这个预置防抖的函数：
141 | 
142 | ```js
143 | export default {
144 |   created() {
145 |     // 每个实例都有了自己的预置防抖的处理函数
146 |     this.debouncedClick = _.debounce(this.click, 500)
147 |   },
148 |   unmounted() {
149 |     // 最好是在组件卸载时
150 |     // 清除掉防抖计时器
151 |     this.debouncedClick.cancel()
152 |   },
153 |   methods: {
154 |     click() {
155 |       // ... 对点击的响应 ...
156 |     }
157 |   }
158 | }
159 | ```


--------------------------------------------------------------------------------
/doc/5.计算属性.md:
--------------------------------------------------------------------------------
  1 | # 计算属性
  2 | 
  3 | ## 基础示例
  4 | 模版中的表达式虽然方便，但也只能用来做简单的操作。如果在模版中写太多逻辑，会让模版变得臃肿，难以维护。比如这样一个对象：
  5 | ```js
  6 | export default {
  7 |   data() {
  8 |     return {
  9 |       author: {
 10 |         name: 'John Doe',
 11 |         books: [
 12 |           'Vue 2 - Advanced Guide',
 13 |           'Vue 3 - Basic Guide',
 14 |           'Vue 4 - The Mystery'
 15 |         ]
 16 |       }
 17 |     }
 18 |   }
 19 | }
 20 | ```
 21 | 我们想根据 author 是否已有一些书籍来展示不同的信息：
 22 | ```html
 23 | <p>Has published books:</p>
 24 | <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
 25 | ```
 26 | 这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白它的计算依赖于 author.books。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。
 27 | 因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：
 28 | ```js
 29 | export default {
 30 |   data() {
 31 |     return {
 32 |       author: {
 33 |         name: 'John Doe',
 34 |         books: [
 35 |           'Vue 2 - Advanced Guide',
 36 |           'Vue 3 - Basic Guide',
 37 |           'Vue 4 - The Mystery'
 38 |         ]
 39 |       }
 40 |     }
 41 |   },
 42 |   computed: {
 43 |     // 一个计算属性的 getter
 44 |     publishedBooksMessage() {
 45 |       // `this` 指向当前组件实例
 46 |       return this.author.books.length > 0 ? 'Yes' : 'No'
 47 |     }
 48 |   }
 49 | }
 50 | 
 51 | <p>Has published books:</p>
 52 | <span>{{ publishedBooksMessage }}</span>
 53 | ```
 54 | 我们在这里定义了一个计算属性 publishedBooksMessage。
 55 | 
 56 | 更改此应用的 data 中 books 数组的值后，可以看到 publishedBooksMessage 也会随之改变。
 57 | 
 58 | 在模板中使用计算属性的方式和一般的属性并无二致。Vue 会检测到 this.publishedBooksMessage 依赖于 this.author.books，所以当 this.author.books 改变时，任何依赖于 this.publishedBooksMessage 的绑定都将同时更新。
 59 | 
 60 | ## 计算属性 vs 方法
 61 | 你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：
 62 | ```html
 63 | <p>{{ calculateBooksMessage() }}</p>
 64 | ```
 65 | ```js
 66 | // 组件中
 67 | methods: {
 68 |   calculateBooksMessage() {
 69 |     return this.author.books.length > 0 ? 'Yes' : 'No'
 70 |   }
 71 | }
 72 | ```
 73 | 若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。
 74 | 
 75 | 这也解释了为什么下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖：
 76 | ```js
 77 | computed: {
 78 |   now() {
 79 |     return Date.now()
 80 |   }
 81 | }
 82 | ```
 83 | 相比之下，方法调用总是会在重渲染发生时再次执行函数。
 84 | 为什么需要缓存呢，想象以下，我们有一个非常消耗性能的计算属性 list，需要循环一个巨大的数组，并做许多计算逻辑，并且可能也有其他计算属性依赖于list。没有缓存的话，我们会重复执行非常多词list 的getter,然而这实际上没有必要。如果确定不需要缓存，那么也可以使用方法调用。
 85 | 
 86 | ## 可写计算属性
 87 | 计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特俗场景中你可能才需要用到‘可写’的属性，你可以通过同时提供getter和setter来创建：
 88 | ```js
 89 | export default {
 90 |   data() {
 91 |     return {
 92 |       firstName: 'John',
 93 |       lastName: 'Doe'
 94 |     }
 95 |   },
 96 |   computed: {
 97 |     fullName: {
 98 |       // getter
 99 |       get() {
100 |         return this.firstName + ' ' + this.lastName
101 |       },
102 |       // setter
103 |       set(newValue) {
104 |         // 注意：我们这里使用的是解构赋值语法
105 |         [this.firstName, this.lastName] = newValue.split(' ')
106 |       }
107 |     }
108 |   }
109 | }
110 | ```
111 | 现在当你再运行 this.fullName = 'John Doe' 时，setter 会被调用而 this.firstName 和 this.lastName 会随之更新。
112 | 
113 | ## 最佳实践
114 | 
115 | ### Getter 不应有副作用#
116 | 计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用监听器根据其他响应式状态的变更来创建副作用。
117 | 
118 | ### 避免直接修改计算属性值#
119 | 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。
120 | 
121 | 


--------------------------------------------------------------------------------
/doc/6.类与样式绑定.md:
--------------------------------------------------------------------------------
  1 | # Class 与 Style 绑定
  2 | 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将他们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦切易出错的。因此，Vue专门为class 和style 的 v-bind 用法提供了特殊的功能增强。除了字符串以外，表达式的值也可以是对象或者数组。
  3 | ## 绑定 HTML class
  4 | ### 绑定对象
  5 | 我们可以给 `:class`传递一个对象来动态切换class:
  6 | ```html
  7 | <div :class="{ active: isActive }"></div>
  8 | ```
  9 | 上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
 10 | 你可以在对象中多写几个字段来操作多个class.此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：
 11 | ```
 12 | data() {
 13 |   return {
 14 |     isActive: true,
 15 |     hasError: false
 16 |   }
 17 | }
 18 | // 配合以下模版
 19 | ```
 20 | ```html
 21 | <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
 22 | // 渲染结果：
 23 | <div class="static active"></div>
 24 | ```
 25 | 当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。
 26 | 
 27 | 绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：
 28 | ```js
 29 | data() {
 30 |   return {
 31 |     classObject: {
 32 |       active: true,
 33 |       'text-danger': false
 34 |     }
 35 |   }
 36 | }
 37 | ```
 38 | ```html
 39 | <div :class="classObject"></div>
 40 | ```
 41 | 这也会渲染出相同的结果。也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：
 42 | ```js
 43 | data() {
 44 |   return {
 45 |     isActive: true,
 46 |     error: null
 47 |   }
 48 | },
 49 | computed: {
 50 |   classObject() {
 51 |     return {
 52 |       active: this.isActive && !this.error,
 53 |       'text-danger': this.error && this.error.type === 'fatal'
 54 |     }
 55 |   }
 56 | }
 57 | ```
 58 | ```html
 59 | <div :class="classObject"></div>
 60 | ```
 61 | ### 绑定数组
 62 | 我们可以给 class 绑定一个数组来渲染多个 CSS class:
 63 | ```js
 64 | data() {
 65 |   return {
 66 |     activeClass: 'active',
 67 |     errorClass: 'text-danger'
 68 |   }
 69 | }
 70 | ```
 71 | ```html
 72 | <div :class="[activeClass, errorClass]"></div>
 73 | ```
 74 | 渲染结果：
 75 | ```html
 76 | <div class="active text-danger"></div>
 77 | ```
 78 | 如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：
 79 | ```html
 80 | <div :class="[isActive ? activeClass : '', errorClass]"></div>
 81 | ```
 82 | errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。
 83 | 
 84 | 然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：
 85 | ```html
 86 | <div :class="[{ active: isActive }, errorClass]"></div>
 87 | ```
 88 | ### 在组件上使用
 89 | 对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上，并与该元素上已有的 class 合并。
 90 | 
 91 | 举例来说，如果你声明了一个组件名叫 MyComponent，模板如下：
 92 | ```html
 93 | <!-- 子组件模板 -->
 94 | <p class="foo bar">Hi!</p>
 95 | ```
 96 | 在使用时添加一些 class
 97 | ```js
 98 | <!-- 在使用组件时 -->
 99 | <MyComponent class="baz boo" />
100 | ```
101 | 渲染出的HTML为：
102 | ```js
103 | <p class="foo bar baz boo" />
104 | ```
105 | 
106 | Class的绑定也是同样的：
107 | ```html
108 | <MyComponent :class="{ active: isActive }" />
109 | ```
110 | 渲染结果：
111 | ```js
112 | <p class="foo bar active" />
113 | ```
114 | 如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来实现指定：
115 | ```html
116 | <!-- MyComponent 模版使用 $attrs 时 -->
117 | <p :class="$attrs.class">hi!</p>
118 | <span>this is a child component</span>
119 | ```
120 | <MyComponent class="baz"/>
121 | 渲染为：
122 | ```html
123 | <p class="baz">hi!</p>
124 | <span>this is a child component</span>
125 | ```
126 | 
127 | ## 绑定内联样式
128 | ### 绑定对象
129 | :style 支持绑定 JavaScript 对象值，对应的时 HTML元素的 style 属性：
130 | ```js
131 | data() {
132 |   return {
133 |     activeColor: 'red',
134 |     fontSize: 30
135 |   }
136 | }
137 | ```
138 | ```html
139 | <div :style={ color: activeColor, fontSize: fontSize + 'px' }></div>
140 | ```
141 | 尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：
142 | ```html
143 | <div :style="{ 'font-size': fontSize + 'px' }"></div>
144 | ```
145 | 直接绑定一个样式对象，可以使模版更加简洁：
146 | ```js
147 | data() {
148 |   return {
149 |     styleObject: {
150 |       color: 'red',
151 |       fontSize: '13px'
152 |     }
153 |   }
154 | }
155 | ```
156 | ```html
157 | <div :style="styleObject"></div>
158 | ```
159 | 同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。
160 | 
161 | ### 绑定数组
162 | 我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上：
163 | ```html
164 | <div :style="[baseStyles, overridingStyles]"></div>
165 | ```
166 | ### 自动前缀
167 | 当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。
168 | 
169 | ### 样式多值
170 | 
171 | 你可以对一个样式属性提供多个 (不同前缀的) 值，举例来说：
172 | ```html
173 | <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
174 | ```
175 | 数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。
176 | 
177 | 


--------------------------------------------------------------------------------
/doc/7.条件渲染.md:
--------------------------------------------------------------------------------
 1 | # 条件渲染
 2 | 
 3 | ## v-if
 4 | 
 5 | v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
 6 | `<h1 v-if="awesome">Vue is awesome!</h1>`
 7 | 
 8 | ## v-else
 9 | 
10 | 你也可以使用 v-else 为 v-if 添加一个“else 区块”。
11 | 
12 | ```html
13 | <button @click="awesome = !awesome">Toggle</button>
14 | 
15 | <h1 v-if="awesome">Vue is awesome!</h1>
16 | <h1 v-else>Oh no 😢</h1>
17 | ```
18 | 
19 | 一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。
20 | `v-else-if`
21 | v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：
22 | 
23 | ```html
24 | <div v-if="type === 'A'">A</div>
25 | <div v-else-if="type === 'B'">B</div>
26 | <div v-else-if="type === 'C'">C</div>
27 | <div v-else>Not A/B/C</div>
28 | ```
29 | 
30 | 和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
31 | 
32 | ## <template>上的 v-if
33 | 
34 | 因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。
35 | 
36 | ```js
37 | <template v-if="ok">
38 |   <h1>Title</h1>
39 |   <p>Paragraph 1</p>
40 |   <p>Paragraph 2</p>
41 | </template>
42 | ```
43 | 
44 | v-else 和 v-else-if 也可以在 <template> 上使用。
45 | 
46 | ## v-show
47 | 
48 | 另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：
49 | `<h1 v-show="ok">Hello!</h1>`
50 | 不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
51 | 
52 | v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
53 | 
54 | ## v-if vs. v-show
55 | 
56 | v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
57 | 
58 | v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
59 | 
60 | 相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
61 | 
62 | 总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
63 | 
64 | ## v-if 和 v-for
65 | 
66 | 当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。
67 | warning:
68 | 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
69 | 


--------------------------------------------------------------------------------
/doc/8.列表渲染.md:
--------------------------------------------------------------------------------
  1 | # 列表渲染
  2 | ## v-for
  3 | 我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items 形式的特殊语法。其中items 是源数据的数组，而 item 是迭代项的别名：
  4 | ```js
  5 | data() {
  6 |   return {
  7 |     items: [{ message: 'Foo' }, { message: 'Bar' }]
  8 |   }
  9 | }
 10 | ```
 11 | ```html
 12 | <li v-for="item in items">
 13 |   {{ item.message }}
 14 | </li>
 15 | ```
 16 | 在 v-for 块中可以完整的访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。
 17 | ```js
 18 | data() {
 19 |   return {
 20 |     parentMessage: 'Parent',
 21 |     items: [{ message: 'Foo' }, { message: 'Bar' }]
 22 |   }
 23 | }
 24 | ```
 25 | ```html
 26 | <li v-for="(item, index) in items">
 27 |   {{ parentMessage }} - {{ index }} - {{ item.message }}
 28 | </li>
 29 | ```
 30 | 注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：
 31 | ```html
 32 | <li v-for="{ message } in items">
 33 |   {{ message }}
 34 | </li>
 35 | 
 36 | <!-- 有 index 索引时 -->
 37 | <li v-for="({ message }, index) in items">
 38 |   {{ message }} {{ index }}
 39 | </li>
 40 | ```
 41 | 对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：
 42 | 
 43 | ```html
 44 | <li v-for="item in items">
 45 |   <span v-for="childItem in item.children">
 46 |     {{ item.message }} {{ childItem }}
 47 |   </span>
 48 | </li>
 49 | ```
 50 | 你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：
 51 | 
 52 | `<div v-for="item of items"></div>`
 53 | ## v-for 与对象
 54 | 你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
 55 | 
 56 | ```js
 57 | data() {
 58 |   return {
 59 |     myObject: {
 60 |       title: 'How to do lists in Vue',
 61 |       author: 'Jane Doe',
 62 |       publishedAt: '2016-04-10'
 63 |     }
 64 |   }
 65 | }
 66 | ```
 67 | ```html
 68 | <ul>
 69 |   <li v-for="value in myObject">
 70 |     {{ value }}
 71 |   </li>
 72 | </ul>
 73 | ```
 74 | 可以通过提供第二个参数表示属性名 (例如 key)：
 75 | 
 76 | ```html
 77 | <li v-for="(value, key) in myObject">
 78 |   {{ key }}: {{ value }}
 79 | </li>
 80 | ```
 81 | 
 82 | 第三个参数表示位置索引：
 83 | ```html
 84 | <li v-for="(value, key, index) in myObject">
 85 |   {{ index }}. {{ key }}: {{ value }}
 86 | </li>
 87 | ```
 88 | 
 89 | ## 在 v-for 里使用范围值
 90 | v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。
 91 | 
 92 | `<span v-for="n in 10">{{ n }}</span>`
 93 | 
 94 | 注意此处 n 的初值是从 1 开始而非 0。
 95 | ## <template>上使用 v-for
 96 | 与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：
 97 | 
 98 | ```html
 99 | <ul>
100 |   <template v-for="item in items">
101 |     <li>{{ item.msg }}</li>
102 |     <li class="divider" role="presentation"></li>
103 |   </template>
104 | </ul>
105 | ```
106 | ## v-for 与 v-if
107 | tip: 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
108 | 当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：
109 | 
110 | ```html
111 | <!--
112 |  这会抛出一个错误，因为属性 todo 此时
113 |  没有在该实例上定义
114 | -->
115 | <li v-for="todo in todos" v-if="!todo.isComplete">
116 |   {{ todo.name }}
117 | </li>
118 | ```
119 | 在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：
120 | 
121 | ```html
122 | <template v-for="todo in todos">
123 |   <li v-if="!todo.isComplete">
124 |     {{ todo.name }}
125 |   </li>
126 | </template>
127 | ```
128 | ## 通过 key 管理状态
129 | Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
130 | 
131 | 默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。
132 | 
133 | 为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：
134 | 
135 | ```html
136 | <div v-for="item in items" :key="item.id">
137 |   <!-- 内容 -->
138 | </div>
139 | ```
140 | 当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：
141 | 
142 | ```html
143 | <template v-for="todo in todos" :key="todo.name">
144 |   <li>{{ todo.name }}</li>
145 | </template>
146 | ```
147 | tip:
148 | key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。
149 | 推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。
150 | 
151 | key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。
152 | 
153 | ## 组件上使用 v-for
154 | 我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：
155 | ```js
156 | <MyComponent v-for="item in items" :key="item.id" />
157 | ```
158 | 但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：
159 | 
160 | ```js
161 | <MyComponent
162 |   v-for="(item, index) in items"
163 |   :item="item"
164 |   :index="index"
165 |   :key="item.id"
166 | />
167 | ```
168 | 
169 | 不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。
170 | 
171 | 这里是一个简单的 Todo List 的例子，展示了如何通过 v-for 来渲染一个组件列表，并向每个实例中传入不同的数据。
172 | 
173 | 
174 | ## 数组变化侦测
175 | ### 变更方法
176 | Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括
177 | - push()
178 | - pop()
179 | - shift()
180 | - unshift()
181 | - splice()
182 | - sort()
183 | - reverse()
184 | ### 替换一个数组
185 | 变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 `filter()`，`concat()` 和 `slice()`，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：
186 | 
187 | ```js
188 | this.items = this.items.filter((item) => item.message.match(/Foo/))
189 | ```
190 | 你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。
191 | ## 展示过滤或排序后的结果
192 | 有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。
193 | 
194 | 举例来说：
195 | 
196 | ```js
197 | data() {
198 |   return {
199 |     numbers: [1, 2, 3, 4, 5]
200 |   }
201 | },
202 | computed: {
203 |   evenNumbers() {
204 |     return this.numbers.filter(n => n % 2 === 0)
205 |   }
206 | }
207 | ```
208 | ```html
209 | <li v-for="n in evenNumbers">{{ n }}</li>
210 | ```
211 | 在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法：
212 | 
213 | ```js
214 | data() {
215 |   return {
216 |     sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
217 |   }
218 | },
219 | methods: {
220 |   even(numbers) {
221 |     return numbers.filter(number => number % 2 === 0)
222 |   }
223 | }
224 | ```
225 | ```html
226 | <ul v-for="numbers in sets">
227 |   <li v-for="n in even(numbers)">{{ n }}</li>
228 | </ul>
229 | ```
230 | 在计算属性中使用 `reverse()` 和 `sort()` 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：
231 | 
232 | diff
233 | - return numbers.reverse()
234 | + return [...numbers].reverse()


--------------------------------------------------------------------------------
/doc/9.事件处理.md:
--------------------------------------------------------------------------------
  1 | # 事件处理
  2 | ## 监听事件
  3 | 我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。
  4 | 事件处理器的值可以是：
  5 | 1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
  6 | 2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
  7 | ## 内联事件处理器
  8 | ```js
  9 | data() {
 10 |   return {
 11 |     count: 0
 12 |   }
 13 | }
 14 | ```
 15 | ```html
 16 | <button @click="count++">Add 1</button>
 17 | <p>Count is: {{ count }}</p>
 18 | ```
 19 | 
 20 | ## 方法事件处理器
 21 | 随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
 22 | 
 23 | 举例来说：
 24 | ```js
 25 | data() {
 26 |   return {
 27 |     name: 'Vue.js'
 28 |   }
 29 | },
 30 | methods: {
 31 |   greet(event) {
 32 |     // 方法中的 `this` 指向当前活跃的组件实例
 33 |     alert(`Hello ${this.name}!`)
 34 |     // `event` 是 DOM 原生事件
 35 |     if (event) {
 36 |       alert(event.target.tagName)
 37 |     }
 38 |   }
 39 | }
 40 | ```
 41 | ```html
 42 | <!-- `greet` 是上面定义过的方法名 -->
 43 | <button @click="greet">Greet</button>
 44 | ```
 45 | 方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 `event.target.tagName` 访问到该 DOM 元素。
 46 | 
 47 | ## 方法与内联事件判断
 48 | 模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。
 49 | ## 在内联事件处理器中调用方法
 50 | 除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：
 51 | ```js
 52 | methods: {
 53 |   say(message) {
 54 |     alert(message)
 55 |   }
 56 | }
 57 | ```
 58 | ```html
 59 | <button @click="say('hello')">Say hello</button>
 60 | <button @click="say('bye')">Say bye</button>
 61 | ```
 62 | ## 在内联事件处理器中访问事件参数
 63 | 有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：
 64 | ```html
 65 | <!-- 使用特殊的 $event 变量 -->
 66 | <button @click="warn('Form cannot be submitted yet.', $event)">
 67 |   Submit
 68 | </button>
 69 | 
 70 | <!-- 使用内联箭头函数 -->
 71 | <button @click="(event) => warn('Form cannot be submitted yet.', event)">
 72 |   Submit
 73 | </button>
 74 | ```
 75 | ```js
 76 | methods: {
 77 |   warn(message, event) {
 78 |     // 这里可以访问 DOM 原生事件
 79 |     if (event) {
 80 |       event.preventDefault()
 81 |     }
 82 |     alert(message)
 83 |   }
 84 | }
 85 | ```
 86 | ## 事件修饰符
 87 | 在处理事件时调用 `event.preventDefault()` 或 `event.stopPropagation()`是很常见的。尽管我， 可以直接在方法内调用，但是如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。
 88 | 为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
 89 | - .stop
 90 | - .prevent
 91 | - .self
 92 | - .capture
 93 | - .once
 94 | - .passive
 95 | ```html
 96 | <!-- 单击事件将停止传递 -->
 97 | <a @click.stop="doThis"></a>
 98 | 
 99 | <!-- 提交事件将不再重新加载页面 -->
100 | <form @submit.prevent="onSubmit"></form>
101 | 
102 | <!-- 修饰语可以使用链式书写 -->
103 | <a @click.stop.prevent="doThat"></a>
104 | 
105 | <!-- 也可以只有修饰符 -->
106 | <form @submit.prevent></form>
107 | 
108 | <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
109 | <!-- 例如：事件处理器不来自子元素 -->
110 | <div @click.self="doThat">...</div>
111 | ```
112 | tip:
113 | 使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用`@click.prevent.self`会阻止元素及其子元素的所有点击事件的默认行为。
114 | 而`click.self.prevent`则只会阻止对元素本身的点击事件的默认行为。
115 | `.capture`,`.once` 和 `.passive` 修饰符与原声 `addEventListener` 事件相对应。
116 | ```html
117 | <!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
118 | <!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
119 | <div @click.capture="doThis">...</div>
120 | 
121 | <!-- 点击事件最多被触发一次 -->
122 | <a @click.once="doThis"></a>
123 | 
124 | <!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
125 | <!-- 以防其中包含 `event.preventDefault()` -->
126 | <div @scroll.passive="onScroll">...</div>
127 | ```
128 | `.passive` 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。
129 | tip:
130 | 请勿同时使用 `.passive` 和 `.prevent`,因为 `.passive`已经向浏览器表明了你不向阻止事件的默认行为。如果这么做了，`.prevent` 会被忽略，并且浏览器会抛出警告。 
131 | ## 按键修饰符
132 | 在监听键盘事件时，我们经常需要检查特定的按键。Vue允许在 v-on 或 @ 监听按键事件时田间按键修饰符。
133 | ```html
134 | <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
135 | <input @keyup.enter="submit" />
136 | ```
137 | 可以直接使用 `KeyboardEvent.key`暴露的按键名称作为修饰符，但需要转为 kebab-case形式。
138 | ```html
139 | <input @keyup.page-down="onPageDown" />
140 | ```
141 | 在上面的例子中，仅会在 $event.key 为 'PageDown' 时调用事件处理。
142 | 
143 | ### 按键别名
144 | - .enter
145 | - .tab
146 | - .delete (捕获 'Delete' 和  'Backspace'两个按键)
147 | - .esc
148 | - .space
149 | - .up
150 | - .down
151 | - .left
152 | - .right
153 | 
154 | ### 系统按键修饰符
155 | 你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
156 | - .ctrl
157 | - .alt
158 | - .shift
159 | - .meta
160 | 
161 | tip:
162 | 在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。
163 | ```html
164 | <!-- Alt + Enter -->
165 | <input @keyup.alt.enter="clear" />
166 | 
167 | <!-- Ctrl + 点击 -->
168 | <div @click.ctrl="doSomething">Do something</div>
169 | ```
170 | tip:
171 | 请注意，系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。
172 | .exact 修饰符
173 | .exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
174 | ```html
175 | <!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
176 | <button @click.ctrl="onClick">A</button>
177 | 
178 | <!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
179 | <button @click.ctrl.exact="onCtrlClick">A</button>
180 | 
181 | <!-- 仅当没有按下任何系统按键时触发 -->
182 | <button @click.exact="onClick">A</button>
183 | ```
184 | 
185 | ## 鼠标按键修饰符
186 | - .left
187 | - .right
188 | - .middle
189 | 
190 | 这些修饰符将处理程序限定为由特定鼠标按键触发的事件。


--------------------------------------------------------------------------------
/doc/high/1.注册.md:
--------------------------------------------------------------------------------
 1 | # 组件注册
 2 | 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。
 3 | ## 全局注册
 4 | 我们可以使用Vue应用实例的 `app.component()` 方法，让组件在当前Vue应用中全局可用。
 5 | ```js
 6 | import { createApp } from 'vue'
 7 | const app = createApp({})
 8 | app.component(
 9 |   // 注册的名字
10 |   'MyComponent',
11 |   // 组件的实现
12 |   {
13 |     /* ... */
14 |   }
15 | )
16 | ```
17 | 如果使用单文件组件，你可以注册被导入的 .vue 文件：
18 | ```js
19 | import MyComponent from './App.vue'
20 | app.component('MyComponent', MyComponent)
21 | ```
22 | app.component() 方法可以被链式调用：
23 | ```js
24 | app
25 |   .component('ComponentA', ComponentA)
26 |   .component('ComponentB', ComponentB)
27 |   .component('ComponentC', ComponentC)
28 | ```
29 | 全局注册的组件可以在此应用的任意组件的模板中使用：
30 | ```html
31 | <!-- 这在当前应用的任意组件中都可用 -->
32 | <ComponentA/>
33 | <ComponentB/>
34 | <ComponentC/>
35 | ```
36 | 所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用。
37 | 
38 | ## 局部注册
39 | 全局注册虽然很方便，但有以下几个问题：
40 | 
41 | - 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
42 | - 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。
43 | 
44 | 相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。
45 | 
46 | 在使用 `<script setup>` 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：
47 | ```vue
48 | <script setup>
49 | import ComponentA from './ComponentA.vue'
50 | </script>
51 | 
52 | <template>
53 |   <ComponentA />
54 | </template>
55 | ```
56 | 请注意：局部注册的组件在后代组件中并不可用，在这个例子中，ComponentA注册后尽在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。
57 | ## 组件名格式
58 | 在整个指引中，我们都使用 PascalCase 作为组件名的注册格式，这是因为：
59 | 
60 | 1. PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
61 | 
62 | 2. <PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。
63 | 
64 | 在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板中是不可用的，详情参见 DOM 模板解析注意事项。
65 | 
66 | 为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。
67 | 
68 | 


--------------------------------------------------------------------------------
/doc/high/2.Props.md:
--------------------------------------------------------------------------------
  1 | # Props
  2 | 
  3 | ## Props 声明
  4 | 
  5 | 一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute (关于透传 attribute，我们会在专门的章节中讨论)。
  6 | 
  7 | 在使用 `<script setup>` 的单文件组件中，`props` 可以使用 `defineProps()` 宏来声明：
  8 | 
  9 | ```vue
 10 | <script setup>
 11 | const props = defineProps(["foo"]);
 12 | console.log(props.foo);
 13 | </script>
 14 | ```
 15 | 
 16 | 在没有使用 `<script setup>` 的组件中，prop 可以使用 props 选项来声明：
 17 | 
 18 | ```js
 19 | export default {
 20 |   props: ["foo"],
 21 |   setup(props) {
 22 |     // setup() 接收 props 作为第一个参数
 23 |     console.log(props.foo);
 24 |   },
 25 | };
 26 | ```
 27 | 
 28 | 注意传递给 `defineProps()` 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 prop 选项。
 29 | 
 30 | 除了使用字符串数组来声明 prop 外，还可以使用对象的形式：
 31 | 
 32 | ```js
 33 | // 使用 <script setup>
 34 | defineProps({
 35 |   title: String,
 36 |   likes: Number,
 37 | });
 38 | js;
 39 | // 非 <script setup>
 40 | export default {
 41 |   props: {
 42 |     title: String,
 43 |     likes: Number,
 44 |   },
 45 | };
 46 | ```
 47 | 
 48 | 对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。
 49 | 
 50 | 对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。我们将在本章节稍后进一步讨论有关 prop 校验的更多细节。
 51 | 
 52 | 如果你正在搭配 TypeScript 使用 `<script setup>`，也可以使用类型标注来声明 props：
 53 | 
 54 | ```vue
 55 | <script setup lang="ts">
 56 | defineProps<{
 57 |   title?: string;
 58 |   likes?: number;
 59 | }>();
 60 | </script>
 61 | ```
 62 | 
 63 | ## 传递 prop 的细节
 64 | ### Prop 名字格式
 65 | 如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。
 66 | ```js
 67 | defineProps({
 68 |   greetingMessage: String
 69 | })
 70 | <span>{{ greetingMessage }}</span>
 71 | ```
 72 | 虽然理论上也可以在向子组件传递props时使用camelCase形式（使用DOM模版时例外），但实际上为了和HTML attribute对齐，我们通常会将其些微kebab-case形式：
 73 | ```js
 74 | <MyComponent greeting-message="hello" />
 75 | ```
 76 | 对于组件名我们推荐PascalCase，因为这提高了模版的可读性，能帮助我们区分Vue组件和原生HTML元素，然而对于传递props来说，使用camelCase 并没有太多优势，因此我们推荐更贴近HTML的书写风格。
 77 | ### 静态 vs. 动态 Prop
 78 | 至此，你已经见过了很多像这样的静态值形式的 props：
 79 | 
 80 | ```js
 81 | <BlogPost title="My journey with Vue" />
 82 | ```
 83 | 相应地，还有使用 `v-bind` 或缩写 `:` 来进行动态绑定的 props：
 84 | 
 85 | ```html
 86 | <!-- 根据一个变量的值动态传入 -->
 87 | <BlogPost :title="post.title" />
 88 | 
 89 | <!-- 根据一个更复杂表达式的值动态传入 -->
 90 | <BlogPost :title="post.title + ' by ' + post.author.name" />
 91 | ```
 92 | ### 传递不同的值类型
 93 | 
 94 | 在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。
 95 | 
 96 | - Number
 97 | 
 98 | ```html
 99 | <!-- 虽然 `42` 是个常量，我们还是需要使用 v-bind -->
100 | <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
101 | <BlogPost :likes="42" />
102 | 
103 | <!-- 根据一个变量的值动态传入 -->
104 | <BlogPost :likes="post.likes" />
105 | ```
106 | 
107 | - Boolean
108 | 
109 | ```html
110 | <!-- 仅写上 prop 但不传值，会隐式转换为 `true` -->
111 | <BlogPost is-published />
112 | 
113 | <!-- 虽然 `false` 是静态的值，我们还是需要使用 v-bind -->
114 | <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
115 | <BlogPost :is-published="false" />
116 | 
117 | <!-- 根据一个变量的值动态传入 -->
118 | <BlogPost :is-published="post.isPublished" />
119 | ```
120 | 
121 | - Array
122 | 
123 | ```html
124 | <!-- 虽然这个数组是个常量，我们还是需要使用 v-bind -->
125 | <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
126 | <BlogPost :comment-ids="[234, 266, 273]" />
127 | 
128 | <!-- 根据一个变量的值动态传入 -->
129 | <BlogPost :comment-ids="post.commentIds" />
130 | ```
131 | 
132 | - Object
133 | 
134 | ```html
135 | <!-- 虽然这个对象字面量是个常量，我们还是需要使用 v-bind -->
136 | <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
137 | <BlogPost
138 |   :author="{
139 |     name: 'Veronica',
140 |     company: 'Veridian Dynamics',
141 |   }"
142 | />
143 | 
144 | <!-- 根据一个变量的值动态传入 -->
145 | <BlogPost :author="post.author" />
146 | ```
147 | 
148 | ### 使用一个对象绑定多个 prop
149 | 如果你想要将一个对象的所有属性都当作 props 传入，你可以使用没有参数的 v-bind，即只使用 v-bind 而非 :prop-name。例如，这里有一个 post 对象：
150 | ```js
151 | const post = {
152 |   id: 1,
153 |   title: 'My Journey with Vue'
154 | }
155 | 
156 | <BlogPost v-bind="post" />
157 | ```
158 | 等价于：
159 | ```js
160 | <BlogPost :id="post.id" :title="post.title" />
161 | ```
162 | ## 单向数据流
163 | 所有的props都遵循着单向绑定原则，props因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了自组件意外修改父组件的状态的情况，不然应用的数据流将很容易便的混乱而难以理解。
164 | 另外，每次副组件更新后，所有的子组件中的props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个prop,若这么做了，vue会在控制台上抛出警告：
165 | ```js
166 | const props = defineProps(['foo'])
167 | 
168 | // ❌ 警告！prop 是只读的！
169 | props.foo = 'bar'
170 | ```
171 | 导致你想要更改一个 prop 的需求通常来源于以下两种场景：
172 | 1. prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性。这种情况下，最好是新定义一个局部数据属性，从props上获取初始值即可：
173 | ```js
174 | const props = defineProps(['initialCounter'])
175 | // 计数器只是将 props.initialCounter 作为初始值
176 | // 像下面这样做就使 prop 和后续更新无关了
177 | const counter = ref(props.initialCounter)
178 | ```
179 | 2. 需要对传入的prop值做进一步的转换。在这种情况中，最好是基于该prop值定义一个计算属性：
180 | ```js
181 | const props = defineProps(['size']);
182 | // 该prop变更时计算属性也会自动更新
183 | const normalizedSize = computed(() => props.size.trim().toLowerCase());
184 | ```
185 | ### 更改对象/数组类型的props
186 | 当对象或数组做诶props被传入时，虽然子组件无法更该props绑定，但仍然可以更改对象或数组内部的值。这是因为JavaScript 的对象和数组是按引用传递，而对Vue来说，禁止这样的改动虽然可能，但有很大的性能损耗，比较得不偿失。
187 | 这种更改的主要缺陷是它允许了子组件以某种不明显的方式影响父组件的状态，可能会使数据流在将来变得难以理解。在最佳实践中，你应该仅可能避免这样的更改，除非父子组件在设计上本来就需要紧密耦合。在大多数场景下，子组件应该抛出一个事件来通知父组件做出改变。
188 | 
189 | ## Prop 校验
190 | Vue组件可以更细致的声明对传入的props的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。
191 | 要声明对props的校验，你可以向 `defineProps()` 宏提供一个带有props 校验选项的对象。例如：
192 | ```js
193 | defineProps({
194 |   // 基础类型检查
195 |   // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
196 |   propA: Number,
197 |   // 多种可能的类型
198 |   propB: [String, Number],
199 |   // 必传，且为 String 类型
200 |   propC: {
201 |     type: String,
202 |     required: true
203 |   },
204 |   // Number 类型的默认值
205 |   propD: {
206 |     type: Number,
207 |     default: 100
208 |   },
209 |   // 对象类型的默认值
210 |   propE: {
211 |     type: Object,
212 |     // 对象或数组的默认值
213 |     // 必须从一个工厂函数返回。
214 |     // 该函数接收组件所接收到的原始 prop 作为参数。
215 |     default(rawProps) {
216 |       return { message: 'hello' }
217 |     }
218 |   },
219 |   // 自定义类型校验函数
220 |   propF: {
221 |     validator(value) {
222 |       // The value must match one of these strings
223 |       return ['success', 'warning', 'danger'].includes(value)
224 |     }
225 |   },
226 |   // 函数类型的默认值
227 |   propG: {
228 |     type: Function,
229 |     // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
230 |     default() {
231 |       return 'Default function'
232 |     }
233 |   }
234 | })
235 | ```
236 | tips:
237 | `defineProps()`宏中的参数不可以访问 `<script setup>` 中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中。
238 | 补充：
239 | - 所有prop默认都是可选的，除非声明了 `required: true`.
240 | - 除 `Boolean` 外的未传递的可选prop 将会有一个默认值 `undefined`.
241 | - `Boolean` 类型的未传递prop将被转换为 `false`。这可以通过它设置 `default` 来更改--例如：设置为 `default: undefined` 将与非布尔类型的prop的行为保持一致。
242 | - 如果声明了 `default`值。那么在 `prop` 的值被解析为 `undefined` 时，无论prop是未被传递还是显式指明的 `undefined`, 都会改为 `default` 值。
243 |   
244 |   当 prop 的校验失败后，Vue 会抛出一个控制台警告 (在开发模式下)。
245 | 
246 | 如果使用了基于类型的 prop 声明 ，Vue 会尽最大努力在运行时按照 prop 的类型标注进行编译。举例来说，`defineProps<{ msg: string }>` 会被编译为 `{ msg: { type: String, required: true }}`。
247 | 
248 | ### 运行时类型检查
249 | 校验选项中的 type 可以是下列这些原生构造函数：
250 | - String
251 | - Number
252 | - Boolean
253 | - Array
254 | - Object
255 | - Date
256 | - Function
257 | - Symbol
258 | 另外，type 也可以是自定义的类或构造函数，Vue 将会通过 instanceof 来检查类型是否匹配。例如下面这个类：
259 | ```js
260 | class Person {
261 |   constructor(firstName, lastName) {
262 |     this.firstName = firstName
263 |     this.lastName = lastName
264 |   }
265 | }
266 | ```
267 | 你可以将其作为一个 prop 的类型：
268 | 
269 | ```js
270 | defineProps({
271 |   author: Person
272 | })
273 | ```
274 | Vue 会通过 `instanceof Person` 来校验 author prop 的值是否是 Person 类的一个实例。
275 | ## Boolean 类型转换
276 | 
277 | 为了更贴近原生 boolean attributes 的行为，声明为 Boolean 类型的 props 有特别的类型转换规则。以带有如下声明的 <MyComponent> 组件为例：
278 | 
279 | ```js
280 | defineProps({
281 |   disabled: Boolean
282 | })
283 | ```
284 | 该组件可以被这样使用：
285 | 
286 | ```js
287 | <!-- 等同于传入 :disabled="true" -->
288 | <MyComponent disabled />
289 | 
290 | <!-- 等同于传入 :disabled="false" -->
291 | <MyComponent />
292 | ```
293 | 
294 | 当一个 prop 被声明为允许多种类型时，例如：
295 | 
296 | ```js
297 | defineProps({
298 |   disabled: [Boolean, Number]
299 | })
300 | ```
301 | 无论声明类型的顺序如何，`Boolean` 类型的特殊转换规则都会被应用。


--------------------------------------------------------------------------------
/doc/high/3.事件.md:
--------------------------------------------------------------------------------
  1 | # 组件事件
  2 | ## 触发与监听事件
  3 | 在组件的模版表达式中，可以直接使用 `$emit` 方法触发自定义事件。（例如：在 v-on 的处理函数中：）
  4 | ```html
  5 | <!-- MyComponent -->
  6 | <button @click="$emit('someEvent')">click me</button>
  7 | ```
  8 | 副组件可以通过 v-on 来监听事件，可以缩写为 @
  9 | ```html
 10 | <MyComponent @some-event="callback" />
 11 | ```
 12 | 同样，组件的事件监听器也支持 `.once` 修饰符：
 13 | ```js
 14 | <MyComponent @some-event.once="callback" />
 15 | ```
 16 | 像组件与prop一样，事件的名字也提供来自动的格式转换。注意这里我们触发来一个以 camelCase形式命名的事件，但在父组件中可以使用kebab-case形式来监听。与prop大小写格式一样，在模版中我们也推荐使用kebab-case形式来编写监听器。
 17 | tip：
 18 | 和原生DOM事件不一样，组件触发的事件没有冒泡机制，你只能监听直接子组件触发的事件，平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。
 19 | 
 20 | ## 事件参数
 21 | 有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要 <BlogPost>组件来管理文本会缩放的多大，在这个场景下，我们可以给 $emit 提供一个额外的参数。
 22 | ```html
 23 | <button @click="$emit('increaseBy', 1)">
 24 |   Increase by 1
 25 | </button>
 26 | ```
 27 | 然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：
 28 | 
 29 | ```js
 30 | <MyButton @increase-by="(n) => count += n" />
 31 | ```
 32 | 或者，也可以用一个组件方法来作为事件处理函数：
 33 | 
 34 | ```js
 35 | <MyButton @increase-by="increaseCount" />
 36 | ```
 37 | 该方法也会接收到事件所传递的参数：
 38 | 
 39 | ```js
 40 | function increaseCount(n) {
 41 |   count.value += n
 42 | }
 43 | ```
 44 | tip:
 45 | 所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。
 46 | 
 47 | ## 声明触发的事件
 48 | 组件要触发的事件可以显式地通过 `defineEmits()` 宏来声明：
 49 | ```vue
 50 | <script setup>
 51 | defineEmits(['infocus', 'submit'])
 52 | </script>
 53 | ```
 54 | 我们在 <template> 中使用的 `$emit`方法不能在组件的 `<script setup></script>`部分中使用，但`defineEmits()` 会返回一个相同作用的函数供我们使用：
 55 | ```vue
 56 | <script setup>
 57 | const emit = defineEmits(['inFocus', 'submit'])
 58 | 
 59 | function buttonClick() {
 60 |   emit('submit')
 61 | }
 62 | </script>
 63 | ```
 64 | `defineEmits()` 宏不能在子函数中使用。如上所示，它必须直接放置在 `<script setup>` 的顶级作用域下。
 65 | 
 66 | 如果你显式地使用了 `setup` 函数而不是 `<script setup>`，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 `setup()` 的上下文对象上：
 67 | ```js
 68 | export default {
 69 |   emits: ['inFocus', 'submit'],
 70 |   setup(props, ctx) {
 71 |     ctx.emit('submit')
 72 |   }
 73 | }
 74 | ```
 75 | 与 `setup()` 上下文对象中的其他属性一样，emit 可以安全地被解构：
 76 | 
 77 | ```js
 78 | export default {
 79 |   emits: ['inFocus', 'submit'],
 80 |   setup(props, { emit }) {
 81 |     emit('submit')
 82 |   }
 83 | }
 84 | ```
 85 | 这个 `emits` 选项还支持对象语法，它允许我们对触发事件的参数进行验证：
 86 | 
 87 | ```vue
 88 | <script setup>
 89 | const emit = defineEmits({
 90 |   submit(payload) {
 91 |     // 通过返回值为 `true` 还是为 `false` 来判断
 92 |     // 验证是否通过
 93 |   }
 94 | })
 95 | </script>
 96 | ```
 97 | 如果你正在搭配 `TypeScript` 使用 `<script setup >`, 也可以使用纯类型标注来声明触发的事件：
 98 | ```vue
 99 | <script setup lang="ts">
100 | const emit = defineEmits<{
101 |     (e: 'change', id: number): void
102 |     (e: 'update', value: string): void
103 | }>()
104 | </script>
105 | ```
106 | 尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。同时，事件声明能让 Vue 更好地将事件和透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。
107 | tip:
108 | 如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。
109 | 
110 | ## 事件校验
111 | 和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。
112 | 要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 emit 的内容，返回一个布尔值来表明事件是否合法。
113 | ```vue
114 | <script setup>
115 | const emit = defineEmits({
116 |   // 没有校验
117 |   click: null,
118 | 
119 |   // 校验 submit 事件
120 |   submit: ({ email, password }) => {
121 |     if (email && password) {
122 |       return true
123 |     } else {
124 |       console.warn('Invalid submit event payload!')
125 |       return false
126 |     }
127 |   }
128 | })
129 | 
130 | function submitForm(email, password) {
131 |   emit('submit', { email, password })
132 | }
133 | </script>
134 | 
135 | ```
136 | ## 配合 v-model 使用
137 | 自定义事件可以用于开发支持v-model 的自定义表单组件。回忆一下 v-model 在原生元素上的用法：
138 | `<input v-model="searchText"/>`
139 | 上面的代码其实等价于下面这段，编译器会对 v-model 进行展开：
140 | ```html
141 | <input :value="searchText" @input="searchText = $event.target.value"/>
142 | ```
143 | 而当使用在一个组件上时，`v-model` 会被展开为如下的形式：
144 | ```html
145 | <CustomInput :modelValue="searchText"
146 |              @update:modelValue="newValue => searchText = newValue"           
147 | />
148 | ```
149 | 要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事：
150 | 1. 将内部原生 input 元素的 value attribute 绑定到 modelValue prop
151 | 2. 输入新的值时在 input 元素上触发 update:modelValue 事件
152 | 这里是相应的代码：
153 | ```vue
154 | <!-- CustomInput.vue -->
155 | <script setup>
156 | defineProps(['modelValue'])
157 | defineEmits(['update:modelValue'])
158 | </script>
159 | <template>
160 |   <input
161 |     :value="modelValue"
162 |     @input="$emit('update:modelValue', $event.target.value)"
163 |   />
164 | </template>
165 | ```
166 | 
167 | 另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的计算属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：
168 | ```vue
169 | <!-- CustomInput.vue -->
170 | <script setup>
171 | import { computed } from 'vue'
172 | 
173 | const props = defineProps(['modelValue'])
174 | const emit = defineEmits(['update:modelValue'])
175 | 
176 | const value = computed({
177 |   get() {
178 |     return props.modelValue
179 |   },
180 |   set(value) {
181 |     emit('update:modelValue', value)
182 |   }
183 | })
184 | </script>
185 | 
186 | <template>
187 |   <input v-model="value" />
188 | </template>
189 | ```
190 | ### v-model 的参数
191 | 默认情况下，v-model 在组件上都是使用 modelValue 作为prop,并以 `update:modelValue` 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：
192 | ```js
193 | <MyComponent v-model:title="bookTitle"/>
194 | ``` 
195 | 在这个例子中，子组件应声明一个 title prop，并通过触发 update:title 事件更新父组件值：
196 | ```vue
197 | <!-- MyComponent.vue -->
198 | <script setup>
199 | defineProps(['title'])
200 | defineEmits(['update:title'])
201 | </script>
202 | 
203 | <template>
204 |   <input
205 |     type="text"
206 |     :value="title"
207 |     @input="$emit('update:title', $event.target.value)"
208 |   />
209 | </template>
210 | ```
211 | 
212 | ### 多个 v-model 绑定
213 | 利用刚才在 v-model 参数小姐中学到的技巧，我们可以在一个组件上创建多个 v-model 双向绑定，没一个 v-model 都会同步不同的prop:
214 | ```js
215 | <UserName
216 |   v-model:first-name="first"
217 |   v-model:last-name="last"
218 | />
219 | ```
220 | ```vue
221 | <script setup>
222 | defineProps({
223 |   firstName: String,
224 |   lastName: String
225 | })
226 | 
227 | defineEmits(['update:firstName', 'update:lastName'])
228 | </script>
229 | 
230 | <template>
231 |   <input
232 |     type="text"
233 |     :value="firstName"
234 |     @input="$emit('update:firstName', $event.target.value)"
235 |   />
236 |   <input
237 |     type="text"
238 |     :value="lastName"
239 |     @input="$emit('update:lastName', $event.target.value)"
240 |   />
241 | </template>
242 | ```
243 | 
244 | ### 处理 v-model 修饰符
245 | 在学习输入绑定时，我们知道了 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。在某些场景下，你可能想要一个自定义组件的 v-model 支持自定义的修饰符。
246 | 
247 | 我们来创建一个自定义的修饰符 `capitalize` ，它会自动将 `v-model` 绑定输入的字符串值第一个字母转为大写：
248 | 
249 | ```js
250 | <MyComponent v-model.capitalize="myText" />
251 | ```
252 | 组件的 v-model 上所添加的修饰符，可以通过`modelModifiers prop` 在组件内访问到。在下面的组件中，我们声明了 `modelModifiers` 这个 prop，它的默认值是一个空对象：
253 | 
254 | ```vue
255 | <script setup>
256 | const props = defineProps({
257 |   modelValue: String,
258 |   modelModifiers: { default: () => ({}) }
259 | })
260 | 
261 | defineEmits(['update:modelValue'])
262 | console.log(props.modelModifiers) // { capitalize: true }
263 | </script>
264 | 
265 | <template>
266 |   <input
267 |     type="text"
268 |     :value="modelValue"
269 |     @input="$emit('update:modelValue', $event.target.value)"
270 |   />
271 | </template>
272 | ```
273 | 注意这里组件的 `modelModifiers prop` 包含了 `capitalize` 且其值为 `true` ，因为它在模板中的 v-model 绑定上被使用了。
274 | 
275 | 有了 modelModifiers 这个 prop，我们就可以在原生事件侦听函数中检查它的值，然后决定触发的自定义事件中要向父组件传递什么值。在下面的代码里，我们就是在每次 `<input>` 元素触发 input 事件时将值的首字母大写：
276 | 
277 | ```vue
278 | <script setup>
279 | const props = defineProps({
280 |   modelValue: String,
281 |   modelModifiers: { default: () => ({}) }
282 | })
283 | 
284 | const emit = defineEmits(['update:modelValue'])
285 | 
286 | function emitValue(e) {
287 |   let value = e.target.value
288 |   if (props.modelModifiers.capitalize) {
289 |     value = value.charAt(0).toUpperCase() + value.slice(1)
290 |   }
291 |   emit('update:modelValue', value)
292 | }
293 | </script>
294 | 
295 | <template>
296 |   <input type="text" :value="modelValue" @input="emitValue" />
297 | </template>
298 | ```
299 | 
300 | 
301 | 对于又有参数又有修饰符的 `v-model` 绑定，生成的 `prop` 名将是 `arg + "Modifiers"`。举例来说：
302 | 
303 | ```js
304 | <MyComponent v-model:title.capitalize="myText">
305 | ```
306 | 相应的声明应该是：
307 | ```js
308 | const props = defineProps(['title', 'titleModifiers'])
309 | defineEmits(['update:title'])
310 | console.log(props.titleModifiers) // { capitalize: true }
311 | ```


--------------------------------------------------------------------------------
/doc/high/4.透传Attributes.md:
--------------------------------------------------------------------------------
  1 | # 透传 Attributes
  2 | 
  3 | ## Attributes 继承
  4 | “透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
  5 | 
  6 | 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 组件，它的模板长这样：
  7 | ```html
  8 | <!-- <MyButton> 的模板 -->
  9 | <button>click me</button>
 10 | ```
 11 | 一个父组件使用了这个组件，并且传入了 class：
 12 | 
 13 | `<MyButton class="large" />`
 14 | 最后渲染出的 DOM 结果是：
 15 | 
 16 | ```html
 17 | <button class="large">click me</button>
 18 | ```
 19 | 这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。
 20 | ### 对 class 和 style 的合并
 21 | 如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样：
 22 | ```html
 23 | <!-- <MyButton> 的模板 -->
 24 | <button class="btn">click me</button>
 25 | ```
 26 | 则最后渲染的DOM结果会变成这样：
 27 | ```html
 28 | <button class="btn large">click me</button>
 29 | ```
 30 | 
 31 | ### v-on 监听器继承
 32 | 同样的规则也适用于 v-on 事件监听器：
 33 | 
 34 | ```html
 35 | <MyButton @click="onClick" />
 36 | ```
 37 | click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。
 38 | 
 39 | ### 深层组件继承
 40 | 有些情况下一个组件会在根节点上渲染另一个组件。例如，我们重构一下 <MyButton>，让它在根节点上渲染 <BaseButton>：
 41 | 
 42 | ```html
 43 | <!-- <MyButton/> 的模板，只是渲染另一个组件 -->
 44 | <BaseButton />
 45 | ```
 46 | 此时 <MyButton> 接收的透传 attribute 会直接继续传给 <BaseButton>。
 47 | 
 48 | 请注意：
 49 | 1. 透传的 `attribute` 不会包含 <MyButton> 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数，换句话说，声明过的 props 和侦听函数被 <MyButton>“消费”了。
 50 | 2. 透传的 `attribute` 若符合声明，也可以作为 props 传入 <BaseButton>。
 51 | ## 禁用 Attributes 继承
 52 | 如果不想要一个组件自动的继承 attribute ,你可以在组件选项中设置 `inheritAttrs: false`
 53 | 如果你使用了 `<script setup>`,你需要一个额外的 `<script>` 块来书写这个选项声明：
 54 | ```vue
 55 | <script>
 56 | // 使用普通的 <script> 来声明选项
 57 | export default {
 58 |   inheritAttrs: false
 59 | }
 60 | </script>
 61 | 
 62 | <script setup>
 63 | // ...setup 部分逻辑
 64 | </script>
 65 | ```
 66 | 最常见的需要禁用 `attribute` 继承的场景就是 `attribute` 需要应用在根节点以外的其他元素上。通过设置 `inheritAttrs` 选项为 `false`，你可以完全控制透传进来的 `attribute` 被如何使用。
 67 | 这些透传进来的 `attribute` 可以在模板的表达式中直接用 `$attrs` 访问到。
 68 | ```js
 69 | <span>Fallthrough attribute: {{ $attrs }}</span>
 70 | ```
 71 | 这个 `$attrs` 对象包含了除组件所声明的 `props` 和 `emits` 之外的所有其他 `attribute` ，例如`class``，style` ，`v-on` 监听器等等。
 72 | 有几点需要注意：
 73 | 
 74 | - 和 `props` 有所不同，透传 `attributes` 在 `JavaScript` 中保留了它们原始的大小写，所以像 `foo-bar` 这样的一个 `attribute` 需要通过 `$attrs['foo-bar']` 来访问。
 75 | 
 76 | - 像 `@click` 这样的一个 `v-on` 事件监听器将在此对象下被暴露为一个函数 `$attrs.onClick`。
 77 | 
 78 | 现在我们要再次使用一下之前小节中的 <MyButton> 组件例子。有时候我们可能为了样式，需要在 <button> 元素外包装一层 <div>：
 79 | ```js
 80 | <div class="btn-wrapper">
 81 |   <button class="btn">click me</button>
 82 | </div>
 83 | ```
 84 | 我们想要所有像 `class` 和 `v-on` 监听器这样的透传 `attribute` 都应用在内部的 `<button>`上而不是外层的 `<div> `上。我们可以通过设定 inheritAttrs: false 和使用 `v-bind="$attrs"` 来实现：
 85 | 
 86 | ```js
 87 | <div class="btn-wrapper">
 88 |   <button class="btn" v-bind="$attrs">click me</button>
 89 | </div>
 90 | ```
 91 | 小提示：没有参数的 v-bind 会将一个对象的所有属性都作为 attribute 应用到目标元素上。
 92 | 
 93 | ## 多根结点的 Attributes 继承
 94 | 和单根节点组件有所不同，有着多个根节点的组件没有自动 `attribute` 透传行为。如果 `$attrs` 没有被显式绑定，将会抛出一个运行时警告。
 95 | 
 96 | ```js
 97 | <CustomLayout id="custom-layout" @click="changeValue" />
 98 | ```
 99 | 如果 `<CustomLayout>` 有下面这样的多根节点模板，由于 `Vue` 不知道要将 `attribute` 透传到哪里，所以会抛出一个警告。
100 | 
101 | ```js
102 | <header>...</header>
103 | <main>...</main>
104 | <footer>...</footer>
105 | ```
106 | 如果 `$attrs` 被显式绑定，则不会有警告：
107 | ```js
108 | <header>...</header>
109 | <main v-bind="$attrs">...</main>
110 | <footer>...</footer>
111 | ```
112 | ## 在JavaScript 中访问透传 Attributes 
113 | 如果需要，你可以在 `<script setup>` 中使用 `useAttrs()` API 来访问一个组件的所有透传 `attribute`：
114 | 
115 | ```vue
116 | <script setup>
117 | import { useAttrs } from 'vue'
118 | 
119 | const attrs = useAttrs()
120 | </script>
121 | ```
122 | 如果没有使用 `<script setup>`，`attrs` 会作为 `setup()` 上下文对象的一个属性暴露：
123 | 
124 | ```js
125 | export default {
126 |   setup(props, ctx) {
127 |     // 透传 attribute 被暴露为 ctx.attrs
128 |     console.log(ctx.attrs)
129 |   }
130 | }
131 | ```
132 | 需要注意的是，虽然这里的 `attrs` 对象总是反映为最新的透传 `attribute` ，但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。如果你需要响应性，可以使用 `prop` 。或者你也可以使用 `onUpdated()` 使得在每次更新时结合最新的 `attrs` 执行副作用。


--------------------------------------------------------------------------------
/doc/high/5.插槽slot.md:
--------------------------------------------------------------------------------
  1 | # 插槽 slot
  2 | 
  3 | ## 插槽内容与出口
  4 | 这里有一个组件：
  5 | `<FancyButton> Click me!</FancyButton>`
  6 | 这个组件的模版是这样的：
  7 | ```html
  8 | <button class="fancy-btn">
  9 |   <slot></slot> <!-- 插槽出口 -->
 10 | </button>
 11 | ```
 12 | <slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
 13 | 
 14 | ![img](https://cn.vuejs.org/assets/slots.dbdaf1e8.png)
 15 | 最终渲染出的 DOM是这样的：
 16 | `<button class="fancy-btn">Click me!</button>`
 17 | 通过使用插槽，`<FancyButton>` 仅负责渲染外层的 `<button>` 以及相应的样式,而其内部的内容由父组件提供。
 18 | 理解插槽的另一种方式是和下面的 `JavaScript` 函数做类别，其概念是类似的：
 19 | ```js
 20 | // 父元素传入插槽内容
 21 | FancyButton('Click me!')
 22 | 
 23 | // FancyButton 在自己的模板中渲染插槽内容
 24 | function FancyButton(slotContent) {
 25 |   return `<button class="fancy-btn">
 26 |       ${slotContent}
 27 |     </button>`
 28 | }
 29 | ```
 30 | 插槽内容可以是任意合法的模板内容，不局限于文本。例如我们可以传入多个元素，甚至是组件：
 31 | ```js
 32 | <FancyButton>
 33 |   <span style="color:red">Click me!</span>
 34 |   <AwesomeIcon name="plus" />
 35 | </FancyButton>
 36 | ```
 37 | 通过使用插槽，<FancyButton> 组件更加灵活和具有可复用性。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。
 38 | Vue 组件的插槽机制是受原生 Web Component <slot> 元素的启发而诞生，同时还做了一些功能拓展，这些拓展的功能我们后面会学习到。
 39 | ## 渲染作用域
 40 | 插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。举例来说：
 41 | ```js
 42 | <span>{{ message }}</span>
 43 | <FancyButton>{{ message }}</FancyButton>
 44 | ```
 45 | 这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。
 46 | 插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 `JavaScript` 的词法作用域规则是一致的。换言之：
 47 | 父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。
 48 | ## 默认内容
 49 | 在外部没有提供任何内容的情况下，可以为插槽指定默认内容。比如有这样一个 <SubmitButton> 组件：
 50 | 
 51 | ```html
 52 | <button type="submit">
 53 |   <slot></slot>
 54 | </button>
 55 | ```
 56 | 如果我们想在父组件没有提供任何插槽内容时在 <button> 内渲染“Submit”，只需要将“Submit”写在 <slot> 标签之间来作为默认内容：
 57 | 
 58 | ```html
 59 | <button type="submit">
 60 |   <slot>
 61 |     Submit <!-- 默认内容 -->
 62 |   </slot>
 63 | </button>
 64 | ```
 65 | 现在，当我们在父组件中使用 <SubmitButton> 且没有提供任何插槽内容时：
 66 | 
 67 | ```js
 68 | <SubmitButton />
 69 | ```
 70 | “Submit”将会被作为默认内容渲染：
 71 | 
 72 | ```html
 73 | <button type="submit">Submit</button>
 74 | ```
 75 | 但如果我们提供了插槽内容：
 76 | 
 77 | ```js
 78 | <SubmitButton>Save</SubmitButton>
 79 | ```
 80 | 那么被显式提供的内容会取代默认内容：
 81 | 
 82 | ```html
 83 | <button type="submit">Save</button>
 84 | ```
 85 | ## 具名插槽
 86 | 有时在一个组件中包含多个插槽出口是很有用的。举例来说，在一个 <BaseLayout> 组件中，有如下模板：
 87 | 
 88 | ```html
 89 | <div class="container">
 90 |   <header>
 91 |     <!-- 标题内容放这里 -->
 92 |   </header>
 93 |   <main>
 94 |     <!-- 主要内容放这里 -->
 95 |   </main>
 96 |   <footer>
 97 |     <!-- 底部内容放这里 -->
 98 |   </footer>
 99 | </div>
100 | ```
101 | 对于这种场景，`<slot>` 元素可以有一个特殊的 `attribute name`，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：
102 | 
103 | ```html
104 | <div class="container">
105 |   <header>
106 |     <slot name="header"></slot>
107 |   </header>
108 |   <main>
109 |     <slot></slot>
110 |   </main>
111 |   <footer>
112 |     <slot name="footer"></slot>
113 |   </footer>
114 | </div>
115 | ```
116 | 这类带 `name` 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”。
117 | 
118 | 在父组件中使用 <BaseLayout> 时，我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了：
119 | 
120 | 要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令：
121 | 
122 | ```js
123 | <BaseLayout>
124 |   <template v-slot:header>
125 |     <!-- header 插槽的内容放这里 -->
126 |   </template>
127 | </BaseLayout>
128 | ```
129 | v-slot 有对应的简写 #，因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。
130 | ![img](https://cn.vuejs.org/assets/named-slots.ebb7b207.png)
131 | 
132 | 下面我们给出完整的、向 <BaseLayout> 传递插槽内容的代码，指令均使用的是缩写形式：
133 | 
134 | ```html
135 | <BaseLayout>
136 |   <template #header>
137 |     <h1>Here might be a page title</h1>
138 |   </template>
139 | 
140 |   <template #default>
141 |     <p>A paragraph for the main content.</p>
142 |     <p>And another one.</p>
143 |   </template>
144 | 
145 |   <template #footer>
146 |     <p>Here's some contact info</p>
147 |   </template>
148 | </BaseLayout>
149 | ```
150 | 当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。所以上面也可以写成：
151 | 
152 | ```html
153 | <BaseLayout>
154 |   <template #header>
155 |     <h1>Here might be a page title</h1>
156 |   </template>
157 |   <!-- 隐式的默认插槽 -->
158 |   <p>A paragraph for the main content.</p>
159 |   <p>And another one.</p>
160 | 
161 |   <template #footer>
162 |     <p>Here's some contact info</p>
163 |   </template>
164 | </BaseLayout>
165 | ```
166 | 现在 `<template>` 元素中的所有内容都将被传递到相应的插槽。最终渲染出的 HTML 如下：
167 | 
168 | ```html
169 | <div class="container">
170 |   <header>
171 |     <h1>Here might be a page title</h1>
172 |   </header>
173 |   <main>
174 |     <p>A paragraph for the main content.</p>
175 |     <p>And another one.</p>
176 |   </main>
177 |   <footer>
178 |     <p>Here's some contact info</p>
179 |   </footer>
180 | </div>
181 | ```
182 | 
183 | 使用 JavaScript 函数来类比可能更有助于你来理解具名插槽：
184 | 
185 | ```js
186 | // 传入不同的内容给不同名字的插槽
187 | BaseLayout({
188 |   header: `...`,
189 |   default: `...`,
190 |   footer: `...`
191 | })
192 | 
193 | // <BaseLayout> 渲染插槽内容到对应位置
194 | function BaseLayout(slots) {
195 |   return `<div class="container">
196 |       <header>${slots.header}</header>
197 |       <main>${slots.default}</main>
198 |       <footer>${slots.footer}</footer>
199 |     </div>`
200 | }
201 | ```
202 | ## 动态插槽名
203 | 动态指令参数在 v-slot 上也是有效的，即可以定义下面这样的动态插槽名：
204 | 
205 | ```html
206 | <base-layout>
207 |   <template v-slot:[dynamicSlotName]>
208 |     ...
209 |   </template>
210 | 
211 |   <!-- 缩写为 -->
212 |   <template #[dynamicSlotName]>
213 |     ...
214 |   </template>
215 | </base-layout>
216 | ```
217 | 注意这里的表达式和动态指令参数受相同的语法限制。
218 | ## 作用域插槽
219 | 在上面的渲染作用域中我们讨论到，插槽的内容无法访问到子组件的状态。
220 | 然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。
221 | 我们也确实有办法这么做！可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes：
222 | ```html
223 | <!-- <MyComponent> 的模板 -->
224 | <div>
225 |   <slot :text="greetingMessage" :count="1"></slot>
226 | </div>
227 | ```
228 | 当需要接收插槽 `props` 时，默认插槽和具名插槽的使用方式有一些小区别。下面我们将先展示默认插槽如何接受 `props`，通过子组件标签上的 `v-slot` 指令，直接接收到了一个插槽 `props` 对象：
229 | 
230 | ```js
231 | <MyComponent v-slot="slotProps">
232 |   {{ slotProps.text }} {{ slotProps.count }}
233 | </MyComponent>
234 | ```
235 | ![img](https://cn.vuejs.org/assets/scoped-slots.1c6d5876.svg)
236 | 子组件传入插槽的 `props` 作为了 `v-slot` 指令的值，可以在插槽内的表达式中访问。
237 | 你可以将作用域插槽类比为一个传入子组件的函数。子组件会将相应的 `props` 作为参数传给它：
238 | 
239 | ```js
240 | MyComponent({
241 |   // 类比默认插槽，将其想成一个函数
242 |   default: (slotProps) => {
243 |     return `${slotProps.text} ${slotProps.count}`
244 |   }
245 | })
246 | function MyComponent(slots) {
247 |   const greetingMessage = 'hello'
248 |   return `<div>${
249 |     // 在插槽函数调用时传入 props
250 |     slots.default({ text: greetingMessage, count: 1 })
251 |   }</div>`
252 | }
253 | ```
254 | 实际上，这已经和作用域插槽的最终代码编译结果、以及手动编写渲染函数时使用作用域插槽的方式非常类似了。
255 | 
256 | `v-slot="slotProps"` 可以类比这里的函数签名，和函数的参数类似，我们也可以在 `v-slot` 中使用解构：
257 | 
258 | ```js
259 | <MyComponent v-slot="{ text, count }">
260 |   {{ text }} {{ count }}
261 | </MyComponent>
262 | ```
263 | ### 具名作用域插槽
264 | 具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到：v-slot:name="slotProps"。当使用缩写时是这样：
265 | 
266 | ```html
267 | <MyComponent>
268 |   <template #header="headerProps">
269 |     {{ headerProps }}
270 |   </template>
271 | 
272 |   <template #default="defaultProps">
273 |     {{ defaultProps }}
274 |   </template>
275 | 
276 |   <template #footer="footerProps">
277 |     {{ footerProps }}
278 |   </template>
279 | </MyComponent>
280 | ```
281 | 向具名插槽中传入 props：
282 | `<slot name="header" message="hello"></slot>`
283 | 注意插槽上的 `name` 是一个 `Vue` 特别保留的 `attribute`，不会作为 `props` 传递给插槽。因此最终 `headerProps` 的结果是 `{ message: 'hello' }`。
284 | 如果你混用了具名插槽与默认插槽，则需要为默认插槽使用显式的 `<template>` 标签。尝试直接为组件添加 `v-slot` 指令将导致编译错误。这是为了避免因默认插槽的 `props` 的作用域而困惑。举例：
285 | ```html
286 | <!-- 该模板无法编译 -->
287 | <template>
288 |   <MyComponent v-slot="{ message }">
289 |     <p>{{ message }}</p>
290 |     <template #footer>
291 |       <!-- message 属于默认插槽，此处不可用 -->
292 |       <p>{{ message }}</p>
293 |     </template>
294 |   </MyComponent>
295 | </template>
296 | ```
297 | 为默认插槽使用显式的 <template> 标签有助于更清晰地指出 message 属性在其它插槽中不可用：
298 | ```html
299 | <template>
300 |   <MyComponent>
301 |     <!-- 使用显式的默认插槽 -->
302 |     <template #default="{ message }">
303 |       <p>{{ message }}</p>
304 |     </template>
305 | 
306 |     <template #footer>
307 |       <p>Here's some contact info</p>
308 |     </template>
309 |   </MyComponent>
310 | </template>
311 | ```
312 | 
313 | ### 高级列表组件示例
314 | 你可能想问什么样的场景才适合用到作用域插槽，这里我们来看一个 <FancyList> 组件的例子。它会渲染一个列表，并同时会封装一些加载远端数据的逻辑、使用数据进行列表渲染、或者是像分页或无限滚动这样更进阶的功能。然而我们希望它能够保留足够的灵活性，将对单个列表元素内容和样式的控制权留给使用它的父组件。我们期望的用法可能是这样的：
315 | 
316 | ```html
317 | <FancyList :api-url="url" :per-page="10">
318 |   <template #item="{ body, username, likes }">
319 |     <div class="item">
320 |       <p>{{ body }}</p>
321 |       <p>by {{ username }} | {{ likes }} likes</p>
322 |     </div>
323 |   </template>
324 | </FancyList>
325 | ```
326 | 在 <FancyList> 之中，我们可以多次渲染 <slot> 并每次都提供不同的数据 (注意我们这里使用了 v-bind 来传递插槽的 props)：
327 | 
328 | ```html
329 | <ul>
330 |   <li v-for="item in items">
331 |     <slot name="item" v-bind="item"></slot>
332 |   </li>
333 | </ul>
334 | ```
335 | 
336 | ### 无渲染组件
337 | 上面的 <FancyList> 案例同时封装了可重用的逻辑 (数据获取、分页等) 和视图输出，但也将部分视图输出通过作用域插槽交给了消费者组件来管理。
338 | 
339 | 如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。我们将这种类型的组件称为无渲染组件。
340 | 
341 | 这里有一个无渲染组件的例子，一个封装了追踪当前鼠标位置逻辑的组件：
342 | 
343 | ```js
344 | <MouseTracker v-slot="{ x, y }">
345 |   Mouse is at: {{ x }}, {{ y }}
346 | </MouseTracker>
347 | ```
348 | 虽然这个模式很有趣，但大部分能用无渲染组件实现的功能都可以通过组合式 API 以另一种更高效的方式实现，并且还不会带来额外组件嵌套的开销。之后我们会在组合式函数一章中介绍如何更高效地实现追踪鼠标位置的功能。
349 | 
350 | 尽管如此，作用域插槽在需要同时封装逻辑、组合视图界面时还是很有用，就像上面的 <FancyList> 组件那样。


--------------------------------------------------------------------------------
/doc/high/6.依赖注入.md:
--------------------------------------------------------------------------------
 1 | # 依赖注入
 2 | ## Prop 逐级透传问题
 3 | 通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：
 4 | ![img](https://cn.vuejs.org/assets/prop-drilling.11201220.png)
 5 | 注意，虽然这里的 <Footer> 组件可能根本不关心这些 props，但为了使 <DeepChild> 能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。
 6 | 
 7 | provide 和 inject 可以帮助我们解决这一问题。 [1] 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
 8 | ![img](https://cn.vuejs.org/assets/provide-inject.3e0505e4.png)
 9 | 
10 | ## Provide(提供)
11 | 要为组件后代提供数据，需要使用到 provide() 函数：
12 | 
13 | ```vue
14 | <script setup>
15 | import { provide } from 'vue'
16 | 
17 | provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
18 | </script>
19 | ```
20 | 如果不使用 `<script setup>`，请确保 `provide()` 是在 `setup()` 同步调用的：
21 | 
22 | ```js
23 | import { provide } from 'vue';
24 | export default {
25 |   setup() {
26 |     provide(/* 注入名 */ 'message', /* 值 */ 'hello!');
27 |   }
28 | }
29 | ```
30 | `provide()` 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 
31 | `provide()`，使用不同的注入名，注入不同的依赖值。
32 | 第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：
33 | 
34 | ```js
35 | import { ref, provide } from 'vue';
36 | const count = ref(0);
37 | provide('key', count);
38 | ```
39 | 提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。
40 | ## 应用层Provide
41 | 
42 | ## Inject(注入)
43 | 
44 | ## 和响应式数据配合使用
45 | 
46 | ## 使用Symbol 作注入名
47 | 
48 | 


--------------------------------------------------------------------------------
/example/apiInject/App.js:
--------------------------------------------------------------------------------
 1 | import { h, provide, inject } from "../../lib/guide-mini-vue.esm.js";
 2 | // parent
 3 | const Provider = {
 4 |   name: "Provider",
 5 |   setup() {
 6 |     provide("foo", "fooVal");
 7 |     provide("bar", "barVal");
 8 |   },
 9 |   render() {
10 |     return h("div", {}, [h("p", {}, "Provider"), h(Child)]);
11 |   },
12 | };
13 | // 2级中间层
14 | const Child = {
15 |   name: "Child",
16 |   setup() {
17 |     provide("foo", "Child");
18 |     const foo = inject("foo");
19 |     return {
20 |       foo,
21 |     };
22 |   },
23 |   render() {
24 |     return h("div", {}, [h("p", {}, `Child foo:${this.foo}`), h(Consumer)]);
25 |   },
26 | };
27 | // 底层
28 | const Consumer = {
29 |   name: "Consumer",
30 |   setup() {
31 |     const foo = inject("foo");
32 |     const bar = inject("bar");
33 |     // const baz = inject("baz", "default");
34 |     const baz = inject("baz", () => "default");
35 |     return {
36 |       foo,
37 |       bar,
38 |       baz,
39 |     };
40 |   },
41 |   render() {
42 |     return h("div", {}, `Consumer: - ${this.foo} - ${this.bar}`);
43 |   },
44 | };
45 | 
46 | export default {
47 |   name: "App",
48 |   setup() {},
49 |   render() {
50 |     return h("div", {}, [h("p", {}, "apiInject"), h(Provider)]);
51 |   },
52 | };
53 | 


--------------------------------------------------------------------------------
/example/apiInject/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module">
12 |       import { createApp } from "../../lib/guide-mini-vue.esm.js";
13 |       import App from "./App.js";
14 |       const rootContainer = document.querySelector("#app");
15 |       createApp(App).mount(rootContainer);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/example/compiler-base/App.js:
--------------------------------------------------------------------------------
 1 | import { ref } from "../../lib/guide-mini-vue.esm.js";
 2 | export const App = {
 3 |   name: "App",
 4 |   template: `<div>hi, {{count}}</div>`,
 5 |   setup() {
 6 |     const count = (window.count = ref(1));
 7 |     return {
 8 |       //   message: "mini-vue",
 9 |       count,
10 |     };
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/example/compiler-base/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <style>
 9 |       .red {
10 |         color: red;
11 |       }
12 | 
13 |       .blue {
14 |         color: blue;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div id="app"></div>
20 |     <script src="main.js" type="module"></script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/example/compiler-base/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
2 | import { App } from "./App.js";
3 | 
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/componentEmit/App.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | import { Foo } from "./Foo.js";
 3 | 
 4 | // 组件实现
 5 | export const App = {
 6 |   name: "App",
 7 |   render() {
 8 |     // emit
 9 |     return h("div", {}, [
10 |       h("div", {}, "App"),
11 |       h(Foo, {
12 |         onAdd(a, b) {
13 |           console.log("onAdd", a, b);
14 |         },
15 |         onAddFoo(a, b) {
16 |           console.log("onAddFoo", a, b);
17 |         },
18 |       }),
19 |     ]);
20 |   },
21 | 
22 |   setup() {
23 |     return {};
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/example/componentEmit/Foo.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | export const Foo = {
 4 |   setup(props, { emit }) {
 5 |     console.log("emit");
 6 |     const emitAdd = (p) => {
 7 |       console.log("emitAdd");
 8 |       emit("add", 1, 2);
 9 |       emit("add-foo", 1, 2);
10 |     };
11 | 
12 |     return {
13 |       emitAdd,
14 |     };
15 |   },
16 | 
17 |   render() {
18 |     const foo = h("p", {}, "foo:");
19 |     const btn = h(
20 |       "button",
21 |       {
22 |         onClick: this.emitAdd,
23 |       },
24 |       "emitAdd"
25 |     );
26 | 
27 |     return h("div", {}, [foo, btn]);
28 |   },
29 | };
30 | 


--------------------------------------------------------------------------------
/example/componentEmit/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/componentEmit/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/componentSlot/App.js:
--------------------------------------------------------------------------------
 1 | import { h, createTextVNode } from "../../lib/guide-mini-vue.esm.js";
 2 | import { Foo } from "./Foo.js";
 3 | 
 4 | // Fragment 以及 Text
 5 | export const App = {
 6 |   name: "App",
 7 |   render() {
 8 |     const app = h("div", {}, "App");
 9 |     // object key
10 |     const foo = h(
11 |       Foo,
12 |       {},
13 |       {
14 |         header: ({ age }) => [
15 |           h("p", {}, "header" + age),
16 |           createTextVNode("你好呀"),
17 |         ],
18 |         footer: () => h("p", {}, "footer"),
19 |       }
20 |     );
21 |     // 数组 vnode
22 |     // const foo = h(Foo, {}, h("p", {}, "123"));
23 |     return h("div", {}, [app, foo]);
24 |   },
25 | 
26 |   setup() {
27 |     return {};
28 |   },
29 | };
30 | 


--------------------------------------------------------------------------------
/example/componentSlot/Foo.js:
--------------------------------------------------------------------------------
 1 | import { h, renderSlots } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | export const Foo = {
 4 |   setup() {
 5 |     return {};
 6 |   },
 7 |   render() {
 8 |     const foo = h("p", {}, "foo");
 9 | 
10 |     // Foo .vnode. children
11 |     console.log(this.$slots);
12 |     // children -> vnode
13 |     //
14 |     // renderSlots
15 |     // 具名插槽
16 |     // 1. 获取到要渲染的元素 1
17 |     // 2. 要获取到渲染的位置
18 |     // 作用域插槽
19 |     const age = 18;
20 |     return h("div", {}, [
21 |       renderSlots(this.$slots, "header", {
22 |         age,
23 |       }),
24 |       foo,
25 |       renderSlots(this.$slots, "footer"),
26 |     ]);
27 |   },
28 | };
29 | 


--------------------------------------------------------------------------------
/example/componentSlot/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/componentSlot/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/componentUpdate/App.js:
--------------------------------------------------------------------------------
 1 | import { h, ref } from "../../lib/guide-mini-vue.esm.js";
 2 | import Child from "./Child.js";
 3 | /*
 4 | 要点
 5 | 1. 更新 props
 6 | 2. 调用render函数,利用effect返回的runner
 7 | 3. 更新前查询是否需要更新
 8 | **/
 9 | export const App = {
10 |   name: "App",
11 |   setup() {
12 |     const msg = ref("123");
13 |     const count = ref(1);
14 | 
15 |     window.msg = msg;
16 | 
17 |     const changeChildProps = () => {
18 |       msg.value = "456";
19 |     };
20 | 
21 |     const changeCount = () => {
22 |       count.value++;
23 |     };
24 | 
25 |     return { msg, changeChildProps, changeCount, count };
26 |   },
27 | 
28 |   render() {
29 |     return h("div", {}, [
30 |       h("div", {}, "你好"),
31 |       h(
32 |         "button",
33 |         {
34 |           onClick: this.changeChildProps,
35 |         },
36 |         "change child props"
37 |       ),
38 |       h(Child, {
39 |         msg: this.msg,
40 |       }),
41 |       h(
42 |         "button",
43 |         {
44 |           onClick: this.changeCount,
45 |         },
46 |         "change self count"
47 |       ),
48 |       h("p", {}, "count: " + this.count),
49 |     ]);
50 |   },
51 | };
52 | 


--------------------------------------------------------------------------------
/example/componentUpdate/Child.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | export default {
 3 |   name: "Child",
 4 |   setup(props, { emit }) {},
 5 |   render(proxy) {
 6 |     return h("div", {}, [
 7 |       h("div", {}, "child - props - msg: " + this.$props.msg),
 8 |     ]);
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/example/componentUpdate/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>componentUpdate</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/componentUpdate/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/currentInstance/App.js:
--------------------------------------------------------------------------------
 1 | import { h, getCurrentInstance } from "../../lib/guide-mini-vue.esm.js";
 2 | import { Foo } from "./Foo.js";
 3 | 
 4 | export const App = {
 5 |   name: "App",
 6 |   render() {
 7 |     //
 8 |     return h("div", {}, [h("p", {}, "current demo"), h(Foo)]);
 9 |   },
10 | 
11 |   setup() {
12 |     const instance = getCurrentInstance();
13 |     console.log("app:", instance);
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/example/currentInstance/Foo.js:
--------------------------------------------------------------------------------
 1 | import { h, getCurrentInstance } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | export const Foo = {
 4 |   name: "Foo",
 5 |   setup() {
 6 |     //
 7 |     const instance = getCurrentInstance();
 8 |     console.log("foo.instance", instance);
 9 |     return {};
10 |   },
11 | 
12 |   render() {
13 |     return h("div", {}, "foo:");
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/example/currentInstance/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/currentInstance/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/customRenderer/App.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | export const App = {
 4 |   setup() {
 5 |     return {
 6 |       x: 100,
 7 |       y: 100,
 8 |     };
 9 |   },
10 |   render() {
11 |     return h("rect", { x: this.x, y: this.y });
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/example/customRenderer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <script src="https://pixijs.download/release/pixi.js"></script>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script src="main.js" type="module"></script>
13 |   </body>
14 | </html>


--------------------------------------------------------------------------------
/example/customRenderer/main.js:
--------------------------------------------------------------------------------
 1 | // vue3 composition api
 2 | import { createRenderer } from "../../lib/guide-mini-vue.esm.js";
 3 | import { App } from "./App.js";
 4 | console.log(PIXI);
 5 | 
 6 | // 初始化
 7 | const game = new PIXI.Application({
 8 |   width: 500,
 9 |   height: 500,
10 | });
11 | console.log(game.view);
12 | document.body.append(game.view);
13 | const renderer = createRenderer({
14 |   createElement(type) {
15 |     // 矩形
16 |     if (type == "rect") {
17 |       const rect = new PIXI.Graphics();
18 |       // 设置颜色
19 |       rect.beginFill(0xff0000);
20 |       // 绘制
21 |       rect.drawRect(0, 0, 100, 100);
22 |       // 结束绘制
23 |       rect.endFill();
24 |       return rect;
25 |     }
26 |   },
27 |   patchProp(el, key, val) {
28 |     //
29 |     el[key] = val;
30 |   },
31 |   insert(el, parent) {
32 |     // 类似 dom 中append
33 |     parent.addChild(el);
34 |   },
35 | });
36 | // pixi中stage是根容器
37 | renderer.createApp(App).mount(game.stage);
38 | 
39 | // const rootContainer = document.querySelector("#app");
40 | // createApp(App).mount(rootContainer);
41 | 


--------------------------------------------------------------------------------
/example/helloword/App.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | import { Foo } from "./Foo.js";
 3 | 
 4 | window.self = null;
 5 | // 组件实现
 6 | export const App = {
 7 |   // .vue 单文件组件是直接写template,当前用render函数
 8 |   render() {
 9 |     window.self = this;
10 |     //
11 |     return h(
12 |       "div",
13 |       {
14 |         id: "root",
15 |         class: ["red", "hard"],
16 |         onClick() {
17 |           console.log("click");
18 |         },
19 |         onMousedown() {
20 |           console.log("mousedown");
21 |         },
22 |       },
23 |       [
24 |         h("div", {}, "hi," + this.msg),
25 |         h(Foo, {
26 |           count: 1,
27 |         }),
28 |       ]
29 |       // "hi, " + this.msg
30 |       // string
31 |       // "hi, mini-vue"
32 |       // Array
33 |       // [h("p", { class:"red"}, "hi"), h("p", {class:"blue"}, "mini-vue")]
34 |     );
35 |   },
36 | 
37 |   setup() {
38 |     // composition api
39 |     return {
40 |       msg: "mini-vue",
41 |     };
42 |   },
43 | };
44 | 


--------------------------------------------------------------------------------
/example/helloword/Foo.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | export const Foo = {
 4 |   setup(props) {
 5 |     // 接收传过来的props
 6 |     console.log("props", props);
 7 |     props.count++;
 8 |     // console.log(props);
 9 |   },
10 | 
11 |   render() {
12 |     return h("div", {}, "foo:" + this.count);
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/example/helloword/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>


--------------------------------------------------------------------------------
/example/helloword/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/nextTicker/App.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   h,
 3 |   ref,
 4 |   getCurrentInstance,
 5 |   nextTick,
 6 | } from "../../lib/guide-mini-vue.esm.js";
 7 | 
 8 | export const App = {
 9 |   name: "App",
10 |   setup() {
11 |     const count = ref(1);
12 |     const instance = getCurrentInstance();
13 |     // 视图更新是异步
14 |     function onClick() {
15 |       for (let i = 0; i < 100; i++) {
16 |         console.log("update");
17 |         count.value = i;
18 |       }
19 |       console.log(instance);
20 |       nextTick(() => {
21 |         console.log(instance);
22 |       });
23 | 
24 |       await nextTick();
25 |       console.log(instance);
26 |     }
27 | 
28 |     return {
29 |       onClick,
30 |       count,
31 |     };
32 |   },
33 |   render() {
34 |     const button = h("button", { onClick: this.onClick }, "update");
35 |     const p = h("p", {}, "count:" + this.count);
36 | 
37 |     return h("div", {}, [button, p]);
38 |   },
39 | };
40 | 


--------------------------------------------------------------------------------
/example/nextTicker/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>nextTicker</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/example/nextTicker/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | 
5 | createApp(App).mount(document.querySelector("#app"));
6 | 


--------------------------------------------------------------------------------
/example/patchChildren/App.js:
--------------------------------------------------------------------------------
 1 | import { h } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | import ArrayToText from "./ArrayToText.js";
 4 | import TextToText from "./TextToText.js";
 5 | import TextToArray from "./TextToArray.js";
 6 | import ArrayToArray from "./ArrayToArray.js";
 7 | // 组件实现
 8 | export const App = {
 9 |   setup() {},
10 |   render() {
11 |     return h("div", { tId: 1 }, [
12 |       h("p", {}, "主页"),
13 |       // 老的是array 新的是text
14 |       // h(ArrayToText),
15 |       // 老的是text 新的是text
16 |       // h(TextToText),
17 |       // 老的是text 新的是array
18 |       // h(TextToArray),
19 |       // 老的是array 新的是array
20 |       h(ArrayToArray),
21 |     ]);
22 |   },
23 | };
24 | 


--------------------------------------------------------------------------------
/example/patchChildren/ArrayToArray.js:
--------------------------------------------------------------------------------
  1 | // 老的是 array
  2 | // 新的是 array
  3 | 
  4 | import { ref, h } from "../../lib/guide-mini-vue.esm.js";
  5 | 
  6 | // 1. 左侧的对比
  7 | // (a b) c
  8 | // (a b) d e
  9 | // const prevChildren = [
 10 | //   h("p", { key: "A" }, "A"),
 11 | //   h("p", { key: "B" }, "B"),
 12 | //   h("p", { key: "C" }, "C"),
 13 | // ];
 14 | // const nextChildren = [
 15 | //   h("p", { key: "A" }, "A"),
 16 | //   h("p", { key: "B" }, "B"),
 17 | //   h("p", { key: "D" }, "D"),
 18 | //   h("p", { key: "E" }, "E"),
 19 | // ];
 20 | 
 21 | // 2. 右侧的对比
 22 | // a (b c)
 23 | // d e (b c)
 24 | // const prevChildren = [
 25 | //   h("p", { key: "A" }, "A"),
 26 | //   h("p", { key: "B" }, "B"),
 27 | //   h("p", { key: "C" }, "C"),
 28 | // ];
 29 | // const nextChildren = [
 30 | //   h("p", { key: "D" }, "D"),
 31 | //   h("p", { key: "E" }, "E"),
 32 | //   h("p", { key: "B" }, "B"),
 33 | //   h("p", { key: "C" }, "C"),
 34 | // ];
 35 | 
 36 | // 3. 新的比老的长
 37 | //     创建新的
 38 | // 左侧
 39 | // (a b)
 40 | // (a b) c
 41 | // i = 2, e1 = 1, e2 = 2
 42 | // const prevChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
 43 | // const nextChildren = [
 44 | //   h("p", { key: "A" }, "A"),
 45 | //   h("p", { key: "B" }, "B"),
 46 | //   h("p", { key: "C" }, "C"),
 47 | //   h("p", { key: "D" }, "D"),
 48 | // ];
 49 | 
 50 | // 右侧
 51 | // (a b)
 52 | // c (a b)
 53 | // i = 0, e1 = -1, e2 = 0
 54 | // const prevChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
 55 | // const nextChildren = [
 56 | //   h("p", { key: "C" }, "C"),
 57 | //   h("p", { key: "A" }, "A"),
 58 | //   h("p", { key: "B" }, "B"),
 59 | // ];
 60 | 
 61 | // 4. 老的比新的长
 62 | //     删除老的
 63 | // 左侧
 64 | // (a b) c
 65 | // (a b)
 66 | // i = 2, e1 = 2, e2 = 1
 67 | // const prevChildren = [
 68 | //   h("p", { key: "A" }, "A"),
 69 | //   h("p", { key: "B" }, "B"),
 70 | //   h("p", { key: "C" }, "C"),
 71 | // ];
 72 | // const nextChildren = [h("p", { key: "A" }, "A"), h("p", { key: "B" }, "B")];
 73 | 
 74 | // 右侧
 75 | // a (b c)
 76 | // (b c)
 77 | // i = 0, e1 = 0, e2 = -1
 78 | 
 79 | // const prevChildren = [
 80 | //   h("p", { key: "A" }, "A"),
 81 | //   h("p", { key: "B" }, "B"),
 82 | //   h("p", { key: "C" }, "C"),
 83 | // ];
 84 | // const nextChildren = [h("p", { key: "B" }, "B"), h("p", { key: "C" }, "C")];
 85 | 
 86 | // 5. 对比中间的部分
 87 | //    1. 创建新的 （在老的里面不存在，新的里面存在）
 88 | //    2. 删除老的  (在老的里面存在，新的里面不存在)
 89 | //    3. 移动 (节点存在于新的和老的里面，但是位置变了)
 90 | //         - 使用最长子序列来优化
 91 | 
 92 | // 5.1
 93 | // a,b,(c,d),f,g
 94 | // a,b,(e,c),f,g
 95 | // D 节点在新的里面是没有的 - 需要删除掉
 96 | // C 节点 props 也发生了变化
 97 | 
 98 | // const prevChildren = [
 99 | //   h("p", { key: "A" }, "A"),
100 | //   h("p", { key: "B" }, "B"),
101 | //   h("p", { key: "C", id: "c-prev" }, "C"),
102 | //   h("p", { key: "D" }, "D"),
103 | //   h("p", { key: "F" }, "F"),
104 | //   h("p", { key: "G" }, "G"),
105 | // ];
106 | 
107 | // const nextChildren = [
108 | //   h("p", { key: "A" }, "A"),
109 | //   h("p", { key: "B" }, "B"),
110 | //   h("p", { key: "E" }, "E"),
111 | //   h("p", { key: "C", id: "c-next" }, "C"),
112 | //   h("p", { key: "F" }, "F"),
113 | //   h("p", { key: "G" }, "G"),
114 | // ];
115 | // 5.1.1
116 | // a,b,(c,e,d),f,g
117 | // a,b,(e,c),f,g
118 | // 中间部分，老的比新的多， 那么多出来的直接就可以被干掉(优化删除逻辑)
119 | // const prevChildren = [
120 | //   h("p", { key: "A" }, "A"),
121 | //   h("p", { key: "B" }, "B"),
122 | //   h("p", { key: "C", id: "c-prev" }, "C"),
123 | //   h("p", { key: "E" }, "E"),
124 | //   h("p", { key: "D" }, "D"),
125 | //   h("p", { key: "F" }, "F"),
126 | //   h("p", { key: "G" }, "G"),
127 | // ];
128 | 
129 | // const nextChildren = [
130 | //   h("p", { key: "A" }, "A"),
131 | //   h("p", { key: "B" }, "B"),
132 | //   h("p", { key: "E" }, "E"),
133 | //   h("p", { key: "C", id: "c-next" }, "C"),
134 | //   h("p", { key: "F" }, "F"),
135 | //   h("p", { key: "G" }, "G"),
136 | // ];
137 | 
138 | // 2 移动 (节点存在于新的和老的里面，但是位置变了)
139 | 
140 | // 2.1
141 | // a,b,(c,d,e),f,g
142 | // a,b,(e,c,d),f,g
143 | // 最长递增子序列： [1,2]
144 | 
145 | // const prevChildren = [
146 | //   h("p", { key: "A" }, "A"),
147 | //   h("p", { key: "B" }, "B"),
148 | //   h("p", { key: "C" }, "C"),
149 | //   h("p", { key: "D" }, "D"),
150 | //   h("p", { key: "E" }, "E"),
151 | //   h("p", { key: "F" }, "F"),
152 | //   h("p", { key: "G" }, "G"),
153 | // ];
154 | 
155 | // const nextChildren = [
156 | //   h("p", { key: "A" }, "A"),
157 | //   h("p", { key: "B" }, "B"),
158 | //   h("p", { key: "E" }, "E"),
159 | //   h("p", { key: "C" }, "C"),
160 | //   h("p", { key: "D" }, "D"),
161 | //   h("p", { key: "F" }, "F"),
162 | //   h("p", { key: "G" }, "G"),
163 | // ];
164 | 
165 | // 3. 创建新的节点
166 | // a,b,(c,e),f,g
167 | // a,b,(e,c,d),f,g
168 | // d 节点在老的节点中不存在，新的里面存在，所以需要创建
169 | // const prevChildren = [
170 | //   h("p", { key: "A" }, "A"),
171 | //   h("p", { key: "B" }, "B"),
172 | //   h("p", { key: "C" }, "C"),
173 | //   h("p", { key: "E" }, "E"),
174 | //   h("p", { key: "F" }, "F"),
175 | //   h("p", { key: "G" }, "G"),
176 | // ];
177 | 
178 | // const nextChildren = [
179 | //   h("p", { key: "A" }, "A"),
180 | //   h("p", { key: "B" }, "B"),
181 | //   h("p", { key: "E" }, "E"),
182 | //   h("p", { key: "C" }, "C"),
183 | //   h("p", { key: "D" }, "D"),
184 | //   h("p", { key: "F" }, "F"),
185 | //   h("p", { key: "G" }, "G"),
186 | // ];
187 | 
188 | // 综合例子
189 | // a,b,(c,d,e,z),f,g
190 | // a,b,(d,c,y,e),f,g
191 | 
192 | // const prevChildren = [
193 | //   h("p", { key: "A" }, "A"),
194 | //   h("p", { key: "B" }, "B"),
195 | //   h("p", { key: "C" }, "C"),
196 | //   h("p", { key: "D" }, "D"),
197 | //   h("p", { key: "E" }, "E"),
198 | //   h("p", { key: "Z" }, "Z"),
199 | //   h("p", { key: "F" }, "F"),
200 | //   h("p", { key: "G" }, "G"),
201 | // ];
202 | 
203 | // const nextChildren = [
204 | //   h("p", { key: "A" }, "A"),
205 | //   h("p", { key: "B" }, "B"),
206 | //   h("p", { key: "D" }, "D"),
207 | //   h("p", { key: "C" }, "C"),
208 | //   h("p", { key: "Y" }, "Y"),
209 | //   h("p", { key: "E" }, "E"),
210 | //   h("p", { key: "F" }, "F"),
211 | //   h("p", { key: "G" }, "G"),
212 | // ];
213 | 
214 | // fix
215 | const prevChildren = [
216 |   h("p", { key: "A" }, "A"),
217 |   h("p", {}, "C"),
218 |   h("p", { key: "B" }, "B"),
219 |   h("p", { key: "D" }, "D"),
220 | ];
221 | const nextChildren = [
222 |   h("p", { key: "A" }, "A"),
223 |   h("p", { key: "B" }, "B"),
224 |   h("p", {}, "C"),
225 |   h("p", { key: "D" }, "D"),
226 | ];
227 | 
228 | export default {
229 |   name: "ArrayToArray",
230 |   setup() {
231 |     const isChange = ref(false);
232 |     window.isChange = isChange;
233 | 
234 |     return {
235 |       isChange,
236 |     };
237 |   },
238 |   render() {
239 |     const self = this;
240 |     return h("div", {}, self.isChange ? nextChildren : prevChildren);
241 |   },
242 | };
243 | 


--------------------------------------------------------------------------------
/example/patchChildren/ArrayToText.js:
--------------------------------------------------------------------------------
 1 | // 老的是array 新的是text
 2 | 
 3 | import { ref, h } from "../../lib/guide-mini-vue.esm.js";
 4 | 
 5 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")];
 6 | const nextChildren = "newChildren";
 7 | 
 8 | export default {
 9 |   name: "ArrayToText",
10 |   setup() {
11 |     const isChange = (window.isChange = ref(false));
12 |     //  = isChange;
13 | 
14 |     return {
15 |       isChange,
16 |     };
17 |   },
18 |   render() {
19 |     const self = this;
20 |     return h("div", {}, self.isChange ? nextChildren : prevChildren);
21 |   },
22 | };
23 | 


--------------------------------------------------------------------------------
/example/patchChildren/TextToArray.js:
--------------------------------------------------------------------------------
 1 | // 老的是array 新的是text
 2 | 
 3 | import { ref, h } from "../../lib/guide-mini-vue.esm.js";
 4 | 
 5 | const prevChildren = "oldChild";
 6 | const nextChildren = [h("div", {}, "A"), h("div", {}, "B")];
 7 | 
 8 | export default {
 9 |   name: "TextToArray",
10 |   setup() {
11 |     const isChange = (window.isChange = ref(false));
12 |     //  = isChange;
13 | 
14 |     return {
15 |       isChange,
16 |     };
17 |   },
18 |   render() {
19 |     const self = this;
20 |     return h("div", {}, self.isChange ? nextChildren : prevChildren);
21 |   },
22 | };
23 | 


--------------------------------------------------------------------------------
/example/patchChildren/TextToText.js:
--------------------------------------------------------------------------------
 1 | // 老的是text 新的是text
 2 | 
 3 | import { ref, h } from "../../lib/guide-mini-vue.esm.js";
 4 | 
 5 | const prevChildren = "oldChild";
 6 | const nextChildren = "newChild";
 7 | 
 8 | export default {
 9 |   name: "TextToText",
10 |   setup() {
11 |     const isChange = (window.isChange = ref(false));
12 | 
13 |     return {
14 |       isChange,
15 |     };
16 |   },
17 |   render() {
18 |     const self = this;
19 |     return h("div", {}, self.isChange ? nextChildren : prevChildren);
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/example/patchChildren/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>


--------------------------------------------------------------------------------
/example/patchChildren/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/example/state.js:
--------------------------------------------------------------------------------
 1 | // 有限状态机
 2 | // 读取一组输入，然后根据这些输入来更改为不同的状态。
 3 | // abc
 4 | // ab[cd]
 5 | function test(string) {
 6 |   let startIndex, endIndex, i;
 7 |   let result = [];
 8 |   function waitForA(char) {
 9 |     if (char === "a") {
10 |       startIndex = i;
11 |       return waitForB;
12 |     }
13 |     return waitForA;
14 |   }
15 |   function waitForB(char) {
16 |     if (char === "b") {
17 |       return waitForC;
18 |     }
19 |     return waitForA;
20 |   }
21 |   function waitForC(char) {
22 |     if (char === "c" || char === "d") {
23 |       endIndex = i;
24 |       return end;
25 |     }
26 |     return waitForA;
27 |   }
28 | 
29 |   function end() {
30 |     return end;
31 |   }
32 | 
33 |   let currentState = waitForA;
34 | 
35 |   for (i = 0; i < string.length; i++) {
36 |     currentState = currentState(string[i]);
37 | 
38 |     if (currentState == end) {
39 |       console.log("index", startIndex, endIndex);
40 |       //   return true;
41 |       result.push({
42 |         start: startIndex,
43 |         end: endIndex,
44 |       });
45 |       currentState = waitForA;
46 |     }
47 |   }
48 |   //   return false;
49 | }
50 | 
51 | console.log(test("12abdansnabc"));
52 | 


--------------------------------------------------------------------------------
/example/update/App.js:
--------------------------------------------------------------------------------
 1 | import { h, ref } from "../../lib/guide-mini-vue.esm.js";
 2 | 
 3 | // 组件实现
 4 | export const App = {
 5 |   setup() {
 6 |     const count = ref(0);
 7 | 
 8 |     const onClick = () => {
 9 |       count.value++;
10 |     };
11 | 
12 |     const props = ref({
13 |       foo: "foo",
14 |       bar: "bar",
15 |     });
16 |     const onChangePropsDemo1 = () => {
17 |       props.value.foo = "new-foo";
18 |     };
19 |     const onChangePropsDemo2 = () => {
20 |       props.value.foo = undefined;
21 |     };
22 |     const onChangePropsDemo3 = () => {
23 |       props.value = {
24 |         foo: "foo",
25 |       };
26 |     };
27 |     return {
28 |       count,
29 |       onClick,
30 |       onChangePropsDemo1,
31 |       onChangePropsDemo2,
32 |       onChangePropsDemo3,
33 |       props,
34 |     };
35 |   },
36 |   render() {
37 |     return h(
38 |       "div",
39 |       {
40 |         id: "root",
41 |         ...this.props,
42 |       },
43 |       [
44 |         h("div", {}, "count:" + this.count), //依赖收集
45 |         h(
46 |           "button",
47 |           {
48 |             onClick: this.onClick,
49 |           },
50 |           "click"
51 |         ),
52 |         h(
53 |           "button",
54 |           {
55 |             onClick: this.onChangePropsDemo1,
56 |           },
57 |           "changeProps-值改变了-修改"
58 |         ),
59 |         h(
60 |           "button",
61 |           {
62 |             onClick: this.onChangePropsDemo2,
63 |           },
64 |           "changeProps-值变成了undefined-删除"
65 |         ),
66 |         h(
67 |           "button",
68 |           {
69 |             onClick: this.onChangePropsDemo3,
70 |           },
71 |           "changeProps-key在心的里面没有了-删除"
72 |         ),
73 |       ]
74 |     );
75 |   },
76 | };
77 | 


--------------------------------------------------------------------------------
/example/update/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh_cn">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="main.js" type="module"></script>
12 |   </body>
13 | </html>


--------------------------------------------------------------------------------
/example/update/main.js:
--------------------------------------------------------------------------------
1 | // vue3 composition api
2 | import { createApp } from "../../lib/guide-mini-vue.esm.js";
3 | import { App } from "./App.js";
4 | const rootContainer = document.querySelector("#app");
5 | createApp(App).mount(rootContainer);
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mini-project",
 3 |   "version": "1.0.0",
 4 |   "main": "lib/guide-mini-vue.cjs.js",
 5 |   "module": "lib/guide-mini-vue.esm.js",
 6 |   "repository": "git@github.com:quyapeng/vue-mini-project.git",
 7 |   "author": "quyp <1095698022@qq.com>",
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "test": "jest",
11 |     "build": "rollup -c rollup.config.js"
12 |   },
13 |   "devDependencies": {
14 |     "@babel/preset-typescript": "^7.15.0",
15 |     "@rollup/plugin-typescript": "^8.2.5",
16 |     "@types/jest": "^27.0.1",
17 |     "jest": "^27.2.0",
18 |     "rollup": "^2.58.0",
19 |     "tslib": "^2.3.1",
20 |     "typescript": "^4.4.3"
21 |   },
22 |   "dependencies": {
23 |     "@babel/core": "^7.15.5",
24 |     "@babel/preset-env": "^7.15.6",
25 |     "babel-jest": "^27.2.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // rollup 一般用于库打包工具   webpack 一般应用打包工具
 2 | // 支持esm 语法
 3 | import pkg from './package.json'
 4 | import typescript from "@rollup/plugin-typescript";
 5 | export default {
 6 |   input: "./src/index.ts",
 7 |   output: [
 8 |     // 1.cjs -> commonjs
 9 |     // 2.esm 标准化模块规范
10 |     {
11 |       format: "cjs",
12 |       file: pkg.main
13 |       // file: "lib/guide-mini-vue.cjs.js",
14 |     },
15 |     {
16 |       format: "es",
17 |       file: pkg.module
18 |       // file: "lib/guide-mini-vue.esm.js",
19 |     },
20 |   ],
21 |   // ts 编译为可识别语法 rollup-plugin-typescript
22 |   plugins: [typescript()],
23 | };
24 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/ast.ts:
--------------------------------------------------------------------------------
 1 | import { CREATE_ELEMENT_VNODE } from "./runtimeHelpers";
 2 | 
 3 | export enum NodeTypes {
 4 |   INTERPOLATION,
 5 |   SIMPLE_EXPRESSION,
 6 |   ELEMENT,
 7 |   TEXT,
 8 |   ROOT,
 9 |   COMPOUND_EXPRESSION,
10 | }
11 | 
12 | export function createVNodeCall(context, tag, props, children) {
13 |   context.helper(CREATE_ELEMENT_VNODE);
14 |   return {
15 |     type: NodeTypes.ELEMENT,
16 |     tag,
17 |     props,
18 |     children,
19 |   };
20 | }
21 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/codegen.ts:
--------------------------------------------------------------------------------
  1 | import { isString } from "../../shared";
  2 | import { NodeTypes } from "./ast";
  3 | import {
  4 |   CREATE_ELEMENT_VNODE,
  5 |   helperMapName,
  6 |   TO_DISPLAY_STRING,
  7 | } from "./runtimeHelpers";
  8 | 
  9 | // 模块职责划分清晰明确
 10 | export function generate(ast) {
 11 |   const context = createCodegenContext();
 12 |   const { push } = context;
 13 |   // 导入逻辑抽取
 14 |   genFunctionPreamble(ast, context);
 15 |   //   const VueBinging = "Vue";
 16 |   //   //   const helpers = ["toDisplayString"];
 17 |   //   //   const aliasHelpers = (s: any) => `${s}: _${s}`;
 18 |   //   const helpers = ["toDisplayString"];
 19 |   //   const aliasHelpers = (s: any) => `${s}: _${s}`;
 20 |   //   // 插值 render 导入
 21 |   //   //   push(`const { ${helpers.map(aliasHelpers)} } = ${VueBinging};`);
 22 |   //   push(`const { ${ast.helpers.map(aliasHelpers)} } = ${VueBinging};`);
 23 |   //   push("\n");
 24 |   //   push("return ");
 25 | 
 26 |   const FunctionName = "render";
 27 |   const args = ["_ctx", "_cache"];
 28 |   const signature = args.join(", ");
 29 |   // console.log("ast", ast);
 30 | 
 31 |   push(`function ${FunctionName}(${signature}){`);
 32 |   push("return ");
 33 |   genNode(ast.codegenNode, context);
 34 |   push("}");
 35 |   //   code += `function ${FunctionName}(${signature}){`;
 36 |   //   // 介于灵活考虑，这一部分放在transform中处理好之后再返回，此处直接使用。
 37 |   //   //   console.log("ast", ast);
 38 |   //   //   const node = ast.children[0];
 39 |   //   const node = ast.codegenNode;
 40 |   //   code += `return '${node.content}'`;
 41 |   //   code += "}";
 42 | 
 43 |   return {
 44 |     code: context.code,
 45 |   };
 46 | }
 47 | function genFunctionPreamble(ast: any, context: any) {
 48 |   const { push } = context;
 49 |   const VueBinging = "Vue";
 50 |   //   const helpers = ["toDisplayString"];
 51 |   //   const aliasHelpers = (s: any) => `${s}: _${s}`;
 52 |   const aliasHelpers = (s: any) => `${helperMapName[s]}: _${helperMapName[s]}`;
 53 |   // 插值 render 导入
 54 |   //   push(`const { ${helpers.map(aliasHelpers)} } = ${VueBinging};`);
 55 |   if (ast.helpers.length > 0)
 56 |     push(
 57 |       `const { ${ast.helpers.map(aliasHelpers).join(", ")} } = ${VueBinging};`
 58 |     );
 59 |   push("\n");
 60 |   push("return ");
 61 | }
 62 | function createCodegenContext() {
 63 |   const context = {
 64 |     code: "",
 65 |     push(source) {
 66 |       context.code += source;
 67 |     },
 68 |     helper(key) {
 69 |       return `_${helperMapName[key]}`;
 70 |     },
 71 |   };
 72 |   return context;
 73 | }
 74 | 
 75 | function genNode(node: any, context) {
 76 |   switch (node.type) {
 77 |     case NodeTypes.TEXT:
 78 |       genText(node, context);
 79 |       break;
 80 |     case NodeTypes.INTERPOLATION:
 81 |       genInterpolation(node, context);
 82 |       break;
 83 |     case NodeTypes.SIMPLE_EXPRESSION:
 84 |       genExpression(node, context);
 85 |       break;
 86 |     case NodeTypes.ELEMENT:
 87 |       genElement(node, context);
 88 |       break;
 89 |     case NodeTypes.COMPOUND_EXPRESSION:
 90 |       genCompoundExpression(node, context);
 91 |       break;
 92 | 
 93 |     default:
 94 |       break;
 95 |   }
 96 | }
 97 | 
 98 | function genCompoundExpression(node: any, context: any) {
 99 |   const { push } = context;
100 |   const { children } = node;
101 |   for (let i = 0; i < children.length; i++) {
102 |     const child = children[i];
103 |     if (isString(child)) {
104 |       push(child);
105 |     } else {
106 |       genNode(child, context);
107 |     }
108 |   }
109 | }
110 | function genElement({ tag, children, props }: any, context: any) {
111 |   //
112 |   const { push, helper } = context;
113 |   // console.log("children", children);
114 |   push(`${helper(CREATE_ELEMENT_VNODE)}(`);
115 |   // console.log("llll", genNullable([tag, props, children]));
116 |   genNodeList(genNullable([tag, props, children]), context);
117 |   // const child = children[0];
118 |   // genNode(children, context);
119 |   // for (let i = 0; i < children.length; i++) {
120 |   //   const child = children[i];
121 |   //   genNode(child, context);
122 |   // }
123 |   push(")");
124 | }
125 | 
126 | function genNodeList(nodes: any, context) {
127 |   // console.log("nodes", nodes);
128 |   const { push } = context;
129 |   for (let i = 0; i < nodes.length; i++) {
130 |     const node = nodes[i];
131 |     // 如果是string
132 |     if (isString(node)) {
133 |       push(node);
134 |     } else {
135 |       genNode(node, context);
136 |     }
137 |     if (i < nodes.length - 1) push(",");
138 |   }
139 | }
140 | 
141 | function genNullable(args: any) {
142 |   return args.map((arg) => arg || "null");
143 | }
144 | function genExpression(node: any, context: any) {
145 |   const { push } = context;
146 |   push(`${node.content}`);
147 | }
148 | 
149 | function genInterpolation(node: any, context: any) {
150 |   const { push, helper } = context;
151 |   push(`${helper(TO_DISPLAY_STRING)}(`);
152 |   genNode(node.content, context);
153 |   push(")");
154 | }
155 | 
156 | function genText(node: any, context: any) {
157 |   const { push } = context;
158 |   push(`'${node.content}'`);
159 | }
160 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/compiler.ts:
--------------------------------------------------------------------------------
 1 | import { generate } from "./codegen";
 2 | import { baseParse } from "./parse";
 3 | import { transform } from "./transform";
 4 | import { transformElement } from "./transforms/transformElement";
 5 | import { transformExpression } from "./transforms/transformExpression";
 6 | import { transformText } from "./transforms/transformText";
 7 | 
 8 | // 统一出口-> transform ,codegen等模块处理
 9 | export function baseCompile(template) {
10 |   const ast: any = baseParse(template);
11 |   transform(ast, {
12 |     nodeTransforms: [transformExpression, transformElement, transformText],
13 |   });
14 |   return generate(ast);
15 | }
16 | 
17 | // 运行模块和编译模块不能互相引用。
18 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/index.ts:
--------------------------------------------------------------------------------
1 | // 统一管理 出口导出
2 | export * from "./compiler";
3 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/parse.ts:
--------------------------------------------------------------------------------
  1 | import { NodeTypes } from "./ast";
  2 | const openDelimiter = "{{";
  3 | const closeDelimiter = "}}";
  4 | 
  5 | const enum TagType {
  6 |   Start,
  7 |   End,
  8 | }
  9 | 
 10 | export function baseParse(content: string) {
 11 |   // 创建一个全局的上下文对象
 12 |   const context = createParserContext(content);
 13 |   return createRoot(parseChildren(context, []));
 14 | }
 15 | 
 16 | function parseChildren(context, ancestors) {
 17 |   const nodes: any = [];
 18 |   // console.log("isend", !isEnd(context, ancestors));
 19 |   while (!isEnd(context, ancestors)) {
 20 |     let node;
 21 |     let s = context.source;
 22 |     if (s.startsWith(openDelimiter)) {
 23 |       node = parseInterpolation(context);
 24 |     } else if (s[0] === "<") {
 25 |       // < 开始
 26 |       if (/[a-z]/i.test(s[1])) {
 27 |         // 第二位是字母，不限制大小
 28 |         // console.log("element div", s);
 29 |         node = parseElement(context, ancestors);
 30 |       }
 31 |     }
 32 | 
 33 |     //
 34 |     if (!node) {
 35 |       node = parseText(context);
 36 |     }
 37 |     nodes.push(node);
 38 |   }
 39 |   return nodes;
 40 | }
 41 | 
 42 | function isEnd(context, ancestors) {
 43 |   // 1. source 有值
 44 |   // 2. 当遇到结束标签的时候
 45 |   const s = context.source;
 46 |   if (s.startsWith("</")) {
 47 |     for (let i = ancestors.length - 1; i >= 0; i--) {
 48 |       const tag = ancestors[i].tag;
 49 |       if (startsWithEndTagOpen(s, tag)) {
 50 |         return true;
 51 |       }
 52 |     }
 53 |   }
 54 |   return !s;
 55 | }
 56 | 
 57 | function parseText(context) {
 58 |   //
 59 |   let endTokens = ["<", "{{"];
 60 |   let endIndex = context.source.length;
 61 | 
 62 |   for (let i = 0; i < endTokens.length; i++) {
 63 |     // console.log("context.source", context.source);
 64 |     let index = context.source.indexOf(endTokens[i]);
 65 |     if (index !== -1 && endIndex > index) {
 66 |       // 有
 67 |       endIndex = index;
 68 |     }
 69 |   }
 70 |   // 1. 获取到值，
 71 |   // const content = context.source.slice(0, context.source.length);
 72 |   // console.log("parseText", context.source);
 73 |   // // 2. 推进， 截取掉
 74 |   // advanceBy(context, content.length);
 75 |   // console.log("parseText 为空", context.source);
 76 |   const content = parseTextData(context, endIndex);
 77 |   // console.log("content", content);
 78 |   return {
 79 |     type: NodeTypes.TEXT,
 80 |     content,
 81 |   };
 82 | }
 83 | 
 84 | function parseTag(context, type) {
 85 |   // 1.解析 div
 86 |   // 2.删除解析过的node
 87 |   const match: any = /^<\/?([a-zA-Z]*)/i.exec(context.source);
 88 |   const tag = match[1];
 89 |   //  match 为 [ '<div', 'div', index: 0, input: '<div></div>', groups: undefined ]
 90 |   // 正则匹配出的第一位是'<div',最后一位'>'也需要
 91 |   /*
 92 |   源码此处是分两步处理 我喜欢一次搞定。
 93 |   advanceBy(context, match[0].length);
 94 |   advanceBy(context, 1);
 95 |   **/
 96 |   advanceBy(context, match[0].length + 1);
 97 |   // advanceBy(context, match[0].length);
 98 |   // advanceBy(context, 1);
 99 |   // console.log(context.source);
100 |   if (type == TagType.End) return;
101 |   return {
102 |     type: NodeTypes.ELEMENT,
103 |     tag,
104 |   };
105 | }
106 | 
107 | function parseTextData(context, length) {
108 |   const content = context.source.slice(0, length);
109 |   // console.log("parseText", context.source);
110 |   // 推进， 截取掉
111 |   advanceBy(context, length);
112 |   return content;
113 | }
114 | 
115 | function parseElement(context, ancestors) {
116 |   // 1.解析 div
117 |   // 2.删除解析过的node
118 |   const element: any = parseTag(context, TagType.Start);
119 |   ancestors.push(element);
120 |   element.children = parseChildren(context, ancestors);
121 |   ancestors.pop();
122 | 
123 |   // console.log("element.tag", element.tag);
124 |   // console.log("context.source", context.source);
125 |   // 前后tag一致
126 |   // if (context.source.slice(2, 2 + element.tag.length) === element.tag) {
127 |   if (startsWithEndTagOpen(context.source, element.tag)) {
128 |     parseTag(context, TagType.End);
129 |   } else {
130 |     // 报错
131 |     throw new Error(`缺少结束标签：${element.tag}`);
132 |   }
133 | 
134 |   // console.log("parseElement", context.source);
135 |   return element;
136 | }
137 | 
138 | function startsWithEndTagOpen(source, tag) {
139 |   return (
140 |     source.startsWith("</") &&
141 |     source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase()
142 |   );
143 | }
144 | 
145 | function parseInterpolation(context) {
146 |   // {{message}} 获取到message内容
147 |   // 从index为2开始查找，前面0，1是固定的 {{ ,减少没必要的查询,所以indexof 第二个参数为open的长度
148 |   // 去除前面固定 {{ 的叫法为 推进
149 |   // 最后一个index
150 |   const closeIndex = context.source.indexOf(
151 |     closeDelimiter,
152 |     openDelimiter.length
153 |   );
154 |   //
155 |   //   context.source = context?.source.substr(0, closeIndex);
156 |   // 先删除掉前面的
157 |   //   context.source = context?.source.slice(openDelimiter.length);
158 |   advanceBy(context, openDelimiter.length);
159 |   // 最终解析出来内容的长度
160 |   const rawContentLength = closeIndex - openDelimiter.length;
161 | 
162 |   // const rawContent = context.source.slice(0, rawContentLength);
163 |   const rawContent = parseTextData(context, rawContentLength);
164 |   const content = rawContent.trim();
165 | 
166 |   advanceBy(context, closeDelimiter.length);
167 |   //   context.source = context.source.slice(
168 |   //     rawContentLength + closeDelimiter.length
169 |   //   );
170 |   // console.log("context", context);
171 | 
172 |   return {
173 |     type: NodeTypes.INTERPOLATION,
174 |     content: {
175 |       type: NodeTypes.SIMPLE_EXPRESSION,
176 |       content,
177 |     },
178 |   };
179 | }
180 | 
181 | function advanceBy(context: any, length: number) {
182 |   context.source = context.source.slice(length);
183 | }
184 | // 创建根结点
185 | function createRoot(children) {
186 |   return {
187 |     children,
188 |     type: NodeTypes.ROOT,
189 |   };
190 | }
191 | 
192 | function createParserContext(content: string) {
193 |   return {
194 |     source: content,
195 |   };
196 | }
197 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/runtimeHelpers.ts:
--------------------------------------------------------------------------------
 1 | const name = "toDisplayString";
 2 | const element = "createElementVNode";
 3 | 
 4 | export const TO_DISPLAY_STRING = Symbol(name);
 5 | export const CREATE_ELEMENT_VNODE = Symbol(element);
 6 | 
 7 | export const helperMapName = {
 8 |   [TO_DISPLAY_STRING]: name,
 9 |   [CREATE_ELEMENT_VNODE]: element,
10 | };
11 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/transform.ts:
--------------------------------------------------------------------------------
 1 | import { NodeTypes } from "./ast";
 2 | import { TO_DISPLAY_STRING } from "./runtimeHelpers";
 3 | 
 4 | export function transform(root, options = {}) {
 5 |   const context = createTransformContext(root, options);
 6 |   traverseNode(root, context);
 7 | 
 8 |   // 处理codegen root.codegenNode
 9 |   createRootCodegen(root);
10 | 
11 |   root.helpers = [...context.helpers.keys()];
12 | }
13 | function createRootCodegen(root: any) {
14 |   const child = root.children[0];
15 |   if (child.type === NodeTypes.ELEMENT) {
16 |     root.codegenNode = child.codegenNode;
17 |   } else {
18 |     root.codegenNode = root.children[0];
19 |   }
20 | }
21 | 
22 | function createTransformContext(root: any, { nodeTransforms = [] }: any): any {
23 |   let context = {
24 |     root,
25 |     nodeTransforms,
26 |     helpers: new Map(),
27 |     helper(key) {
28 |       context.helpers.set(key, 1);
29 |     },
30 |   };
31 |   return context;
32 | }
33 | 
34 | function traverseNode(node: any, context: any) {
35 |   //
36 |   // console.log("node", node); 以下内容为定制化，放在入口处由调用方选择是否使用
37 |   // if (node.type == NodeTypes.TEXT) {
38 |   //   node.content = node.content + " mini-vue";
39 |   // }
40 | 
41 |   const { nodeTransforms } = context;
42 |   const exitFns: any = [];
43 |   for (let i = 0; i < nodeTransforms.length; i++) {
44 |     const transform = nodeTransforms[i];
45 |     // 先收集
46 |     const onExit = transform(node, context);
47 |     if (onExit) exitFns.push(onExit);
48 |   }
49 | 
50 |   switch (node.type) {
51 |     case NodeTypes.INTERPOLATION:
52 |       context.helper(TO_DISPLAY_STRING);
53 |       break;
54 |     case NodeTypes.ROOT:
55 |     case NodeTypes.ELEMENT:
56 |       traverseChildren(node, context);
57 |       break;
58 |     default:
59 |       break;
60 |   }
61 | 
62 |   // 先调用后执行，
63 |   let i = exitFns.length;
64 |   while (i--) {
65 |     exitFns[i]();
66 |   }
67 | }
68 | function traverseChildren({ children }: any, context: any) {
69 |   // if (children) {
70 |   for (let i = 0; i < children.length; i++) {
71 |     const node = children[i];
72 |     traverseNode(node, context);
73 |   }
74 |   // }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/transforms/transformElement.ts:
--------------------------------------------------------------------------------
 1 | import { createVNodeCall, NodeTypes } from "../ast";
 2 | 
 3 | export function transformElement(node: any, context: any) {
 4 |   if (node.type === NodeTypes.ELEMENT) {
 5 |     return () => {
 6 |       // 中间处理层
 7 | 
 8 |       // tag
 9 |       const vnodeTag = `"${node.tag}"`;
10 |       // props
11 |       let vnodeProps;
12 | 
13 |       // children
14 |       const { children } = node;
15 |       let vnodeChildren = children[0];
16 | 
17 |       // const vnodeElement = {
18 |       //   type: NodeTypes.ELEMENT,
19 |       //   tag: `"${tag}"`,
20 |       //   props: vnodeProps,
21 |       //   children: vnodeChildren,
22 |       // };
23 |       node.codegenNode = createVNodeCall(
24 |         context,
25 |         vnodeTag,
26 |         vnodeProps,
27 |         vnodeChildren
28 |       );
29 |     };
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/transforms/transformExpression.ts:
--------------------------------------------------------------------------------
 1 | import { NodeTypes } from "../ast";
 2 | 
 3 | export function transformExpression(node) {
 4 |   if (node.type === NodeTypes.INTERPOLATION) {
 5 |     node.content = processExpression(node.content);
 6 |   }
 7 | }
 8 | 
 9 | function processExpression(node: any) {
10 |   node.content = `_ctx.${node.content}`;
11 |   return node;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/transforms/transformText.ts:
--------------------------------------------------------------------------------
 1 | import { NodeTypes } from "../ast";
 2 | import { isText } from "../utils";
 3 | 
 4 | export function transformText(node) {
 5 |   if (node.type === NodeTypes.ELEMENT) {
 6 |     return () => {
 7 |       // 添加复合类型
 8 |       const { children } = node;
 9 |       let currentContainer;
10 |       for (let i = 0; i < children.length; i++) {
11 |         const child = children[i];
12 |         if (isText(child)) {
13 |           // 是
14 |           for (let j = i + 1; j < children.length; j++) {
15 |             const next = children[j];
16 |             if (isText(next)) {
17 |               if (!currentContainer) {
18 |                 currentContainer = children[i] = {
19 |                   type: NodeTypes.COMPOUND_EXPRESSION,
20 |                   children: [child],
21 |                 };
22 |               }
23 |               currentContainer.children.push("+");
24 |               currentContainer.children.push(next);
25 |               children.splice(j, 1);
26 |               j--;
27 |             } else {
28 |               currentContainer = undefined;
29 |               break;
30 |             }
31 |           }
32 |         }
33 |       }
34 |     };
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/compiler-core/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { NodeTypes } from "./ast";
2 | 
3 | export function isText(node) {
4 |   return node.type === NodeTypes.TEXT || node.type === NodeTypes.INTERPOLATION;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/compiler-core/tests/__snapshots__/codegen.spec.ts.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`codegen all 1`] = `
 4 | "const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = Vue;
 5 | return function render(_ctx, _cache){return _createElementVNode(\\"div\\",null,'hi, '+_toDisplayString(_ctx.message))}"
 6 | `;
 7 | 
 8 | exports[`codegen element 1`] = `
 9 | "const { createElementVNode: _createElementVNode } = Vue;
10 | return function render(_ctx, _cache){return _createElementVNode(\\"div\\",null,null)}"
11 | `;
12 | 
13 | exports[`codegen happy path string 1`] = `
14 | "
15 | return function render(_ctx, _cache){return 'hi'}"
16 | `;
17 | 
18 | exports[`codegen interpolation 1`] = `
19 | "const { toDisplayString: _toDisplayString } = Vue;
20 | return function render(_ctx, _cache){return _toDisplayString(_ctx.message)}"
21 | `;
22 | 


--------------------------------------------------------------------------------
/src/compiler-core/tests/codegen.spec.ts:
--------------------------------------------------------------------------------
 1 | import { baseParse } from "../src/parse";
 2 | import { generate } from "../src/codegen";
 3 | import { transform } from "../src/transform";
 4 | import { transformExpression } from "../src/transforms/transformExpression";
 5 | import { transformElement } from "../src/transforms/transformElement";
 6 | import { transformText } from "../src/transforms/transformText";
 7 | 
 8 | describe("codegen", () => {
 9 |   it("happy path string", () => {
10 |     //
11 |     const ast = baseParse("hi");
12 |     transform(ast);
13 |     const { code } = generate(ast);
14 |     // 快照测试-->
15 |     // 1. 抓问题
16 |     // 2. 有意更新（）
17 |     // toMatchSnapshot 会为expect的结果做一个快照，并与前面的快照做匹配。
18 |     // 执行run之后，生成一个__snapshots__文件夹，里面生成一个codegen.spec.ts.snap文件，这就是快照内容。
19 |     // 执行run的命令之后➕ -u 代表有意更新,此时就会更新快照内容，方面下次对比最新数据。
20 | 
21 |     expect(code).toMatchSnapshot();
22 |   });
23 | 
24 |   // interpolation
25 |   it("interpolation", () => {
26 |     const ast = baseParse("{{message}}");
27 |     transform(ast, {
28 |       nodeTransforms: [transformExpression],
29 |     });
30 |     const { code } = generate(ast);
31 |     expect(code).toMatchSnapshot();
32 |   });
33 |   // element
34 |   it("element", () => {
35 |     const ast = baseParse("<div></div>>");
36 |     transform(ast, {
37 |       nodeTransforms: [transformElement],
38 |     });
39 |     const { code } = generate(ast);
40 |     expect(code).toMatchSnapshot();
41 |   });
42 | 
43 |   // 联合类型
44 |   it("all", () => {
45 |     const ast: any = baseParse("<div>hi, {{message}}</div>>");
46 |     transform(ast, {
47 |       // 关注执行顺序,先处理复合类型
48 |       nodeTransforms: [transformExpression, transformElement, transformText],
49 |     });
50 |     // console.log("astttttt", ast.codegenNode.children[0]);
51 |     const { code } = generate(ast);
52 |     expect(code).toMatchSnapshot();
53 |   });
54 | });
55 | 


--------------------------------------------------------------------------------
/src/compiler-core/tests/parse.spec.ts:
--------------------------------------------------------------------------------
  1 | import { NodeTypes } from "../src/ast";
  2 | import { baseParse } from "../src/parse";
  3 | describe("Parse", () => {
  4 |   describe("interpolation", () => {
  5 |     // 插值
  6 |     test("simple interpolation", () => {
  7 |       // 简单插值
  8 |       const ast = baseParse("{{message}}");
  9 |       // 验证当前ast是根结点,有children，插值节点位置在children[0]？？
 10 |       // toStrictEqual测试对象是否具有相同的类型和结构
 11 |       expect(ast.children[0]).toStrictEqual({
 12 |         type: NodeTypes.INTERPOLATION,
 13 |         content: {
 14 |           type: NodeTypes.SIMPLE_EXPRESSION,
 15 |           content: "message",
 16 |         },
 17 |       });
 18 |     });
 19 |   });
 20 |   /** element **/
 21 |   describe("element", () => {
 22 |     it("simple element", () => {
 23 |       // element
 24 |       const ast = baseParse("<div></div>");
 25 |       // 验证当前ast是根结点,有children，插值节点位置在children[0]？？
 26 |       // toStrictEqual测试对象是否具有相同的类型和结构
 27 |       expect(ast.children[0]).toStrictEqual({
 28 |         type: NodeTypes.ELEMENT,
 29 |         tag: "div",
 30 |         children: [],
 31 |         // 解析-正则 以<开始，第二位是字母
 32 |         // 解析之后
 33 |       });
 34 |     });
 35 |   });
 36 | 
 37 |   // text
 38 |   /**
 39 |    * 命中非插值，也不是element的，就默认他是text。
 40 |    * ***/
 41 |   describe("text", () => {
 42 |     it("simple text", () => {
 43 |       // text
 44 |       const ast = baseParse("this is text");
 45 |       // 验证当前ast是根结点,有children，插值节点位置在children[0]？？
 46 |       // toStrictEqual测试对象是否具有相同的类型和结构
 47 |       expect(ast.children[0]).toStrictEqual({
 48 |         type: NodeTypes.TEXT,
 49 |         content: "this is text",
 50 |       });
 51 |     });
 52 |   });
 53 | 
 54 |   test("hello world", () => {
 55 |     const ast = baseParse("<div>hi,{{message}}</div>");
 56 | 
 57 |     expect(ast.children[0]).toStrictEqual({
 58 |       type: NodeTypes.ELEMENT,
 59 |       tag: "div",
 60 |       children: [
 61 |         {
 62 |           type: NodeTypes.TEXT,
 63 |           content: "hi,",
 64 |         },
 65 |         {
 66 |           type: NodeTypes.INTERPOLATION,
 67 |           content: {
 68 |             type: NodeTypes.SIMPLE_EXPRESSION,
 69 |             content: "message",
 70 |           },
 71 |         },
 72 |       ],
 73 |     });
 74 |   });
 75 | 
 76 |   // 多加一层
 77 |   test("Nested element ", () => {
 78 |     const ast = baseParse("<div><p>hi</p>{{message}}</div>");
 79 |     expect(ast.children[0]).toStrictEqual({
 80 |       type: NodeTypes.ELEMENT,
 81 |       tag: "div",
 82 |       children: [
 83 |         {
 84 |           type: NodeTypes.ELEMENT,
 85 |           tag: "p",
 86 |           children: [
 87 |             {
 88 |               type: NodeTypes.TEXT,
 89 |               content: "hi",
 90 |             },
 91 |           ],
 92 |         },
 93 |         {
 94 |           type: NodeTypes.INTERPOLATION,
 95 |           content: {
 96 |             type: NodeTypes.SIMPLE_EXPRESSION,
 97 |             content: "message",
 98 |           },
 99 |         },
100 |       ],
101 |     });
102 |   });
103 | 
104 |   // 内有单个标签，无闭合标签时，给出标签名称的提示
105 |   test.only("should throw error when miss end tag", () => {
106 |     expect(() => {
107 |       baseParse("<div><span></div>");
108 |     }).toThrow(`缺少结束标签：span`);
109 |   });
110 | });
111 | 


--------------------------------------------------------------------------------
/src/compiler-core/tests/transform.spec.ts:
--------------------------------------------------------------------------------
 1 | import { NodeTypes } from "../src/ast";
 2 | import { baseParse } from "../src/parse";
 3 | import { transform } from "../src/transform";
 4 | 
 5 | describe("transform", () => {
 6 |   it("happy path", () => {
 7 |     const ast = baseParse("<div>hi,{{message}}</div>");
 8 | 
 9 |     const plugin = (node) => {
10 |       if (node.type === NodeTypes.TEXT) {
11 |         node.content = node.content + " mini-vue";
12 |       }
13 |     };
14 | 
15 |     transform(ast, {
16 |       nodeTransforms: [plugin],
17 |     });
18 | 
19 |     const nodeText = ast.children[0].children[0];
20 |     expect(nodeText.content).toBe("hi, mini-vue");
21 |   });
22 | });
23 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | // mini-vue  出口
 2 | 
 3 | export * from "./runtime-dom";
 4 | 
 5 | import { baseCompile } from "./compiler-core/src";
 6 | import * as runtimeDom from "./runtime-dom";
 7 | import { registerRuntimeCompiler } from "./runtime-dom";
 8 | 
 9 | // {code}
10 | 
11 | function compilerToFunction(template) {
12 |   const { code } = baseCompile(template);
13 |   const render = new Function("Vue", code)(runtimeDom);
14 |   return render;
15 |   // code 为编译出来的
16 |   //   "const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = Vue;
17 |   // return function render(_ctx, _cache){return _createElementVNode(\\"\\"div\\"\\"), undefined,\\"div\\",null,'hi, '+_toDisplayString(_ctx.message))}"
18 |   // `;
19 | }
20 | 
21 | registerRuntimeCompiler(compilerToFunction);
22 | 


--------------------------------------------------------------------------------
/src/reactivity/baseHandlers.ts:
--------------------------------------------------------------------------------
 1 | import { track, trigger } from "./effect";
 2 | import { reactive, ReactiveFlags, readonly } from "./reactive";
 3 | import { isObject, extend } from "../shared/index";
 4 | 
 5 | // 定义出来只调用一次，然后存储在变量get中，后续不需要每次都去调用，缓存机制，
 6 | const get = createGetter();
 7 | const set = createSetter();
 8 | const readonlyGet = createGetter(true);
 9 | const shallowReadonlyGet = createGetter(true, true);
10 | 
11 | // 利用高阶函数
12 | // 抽离出get函数，两个区别为track是否需要调用，也就是是否需要收集依赖？
13 | function createGetter(isReadonly = false, shallow = false) {
14 |   //  默认值为false
15 |   // 是否是只读
16 |   return function get(target, key) {
17 |     //
18 |     if (key === ReactiveFlags.IS_REACTIVE) {
19 |       return !isReadonly;
20 |     } else if (key === ReactiveFlags.IS_READONLY) {
21 |       return isReadonly;
22 |     }
23 | 
24 |     const res = Reflect.get(target, key);
25 | 
26 |     // shallow
27 |     if (shallow) {
28 |       return res;
29 |     }
30 |     if (isObject(res)) {
31 |       return isReadonly ? readonly(res) : reactive(res);
32 |     }
33 | 
34 |     if (!isReadonly) track(target, key);
35 |     return res;
36 |   };
37 | }
38 | // 保持代码一致性，set也可以抽离
39 | 
40 | function createSetter() {
41 |   //  默认值为false
42 |   // 是否是只读
43 |   return function set(target, key, value) {
44 |     const res = Reflect.set(target, key, value);
45 |     trigger(target, key);
46 |     return res;
47 |   };
48 | }
49 | 
50 | export const mutableHandlers = {
51 |   get,
52 |   set,
53 | };
54 | 
55 | export const readonlyHandlers = {
56 |   get: readonlyGet,
57 |   set(target, key, value) {
58 |     // 警告
59 |     console.warn(
60 |       `key:${key} set 失败，因为 target:${target} 是readonly`,
61 |       key,
62 |       target
63 |     );
64 |     return true;
65 |   },
66 | };
67 | 
68 | // shallowreadonly
69 | export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
70 |   get: shallowReadonlyGet,
71 | });
72 | 


--------------------------------------------------------------------------------
/src/reactivity/computed.ts:
--------------------------------------------------------------------------------
 1 | import { ReactiveEffect } from "./effect";
 2 | 
 3 | class ComputedRefImpl {
 4 |   private _getter: any;
 5 |   private _dirty: boolean = true;
 6 |   private _value: any;
 7 |   private _effect: ReactiveEffect;
 8 |   constructor(getter) {
 9 |     this._getter = getter;
10 |     //
11 |     this._effect = new ReactiveEffect(getter, () => {
12 |       if (!this._dirty) {
13 |         this._dirty = true;
14 |       }
15 |     });
16 |   }
17 |   get value() {
18 |     // 调用完一次之后，锁上
19 |     // 当依赖的响应式的值发生改变的时候，dirty要为true
20 |     // effect
21 |     if (this._dirty) {
22 |       this._dirty = false;
23 |       // this._value = this._getter();
24 |       this._value = this._effect.run();
25 |     }
26 | 
27 |     //
28 |     return this._value;
29 |   }
30 | }
31 | 
32 | export function computed(getter) {
33 |   return new ComputedRefImpl(getter);
34 | }
35 | 


--------------------------------------------------------------------------------
/src/reactivity/effect.ts:
--------------------------------------------------------------------------------
  1 | import { extend } from "../shared/index";
  2 | let activeEffect;
  3 | let shouldTrack;
  4 | 
  5 | // 抽离概念
  6 | export class ReactiveEffect {
  7 |   private _fn: any;
  8 |   deps = [];
  9 |   active = true;
 10 |   onStop?: () => void;
 11 |   // 外部直接获取到scheduler ,则使用public
 12 |   constructor(fn, public scheduler?) {
 13 |     this._fn = fn;
 14 |     // this.scheduler = scheduler;
 15 |   }
 16 | 
 17 |   run() {
 18 |     // 1.会收集依赖
 19 |     // shouldTrack来做区分
 20 |     // active区分stop状态
 21 |     if (!this.active) {
 22 |       return this._fn();
 23 |     }
 24 |     shouldTrack = true;
 25 |     activeEffect = this;
 26 | 
 27 |     const result = this._fn();
 28 |     // 全局变量用完需要reset
 29 |     shouldTrack = false;
 30 |     return result;
 31 |   }
 32 |   stop() {
 33 |     //清除effect
 34 |     if (this.active) {
 35 |       cleanupEffect(this);
 36 |       if (this.onStop) this.onStop();
 37 |       this.active = false;
 38 |     }
 39 |   }
 40 | }
 41 | 
 42 | function cleanupEffect(effect) {
 43 |   effect.deps.forEach((dep: any) => {
 44 |     dep.delete(effect);
 45 |   });
 46 |   // 把effect.deps清空
 47 |   effect.deps.length = 0;
 48 | }
 49 | const targetMap = new Map();
 50 | export function track(target, key) {
 51 |   if (!isTracking()) return;
 52 |   // target -> key -> dep
 53 |   let depsMap = targetMap.get(target);
 54 |   if (!depsMap) {
 55 |     depsMap = new Map();
 56 |     targetMap.set(target, depsMap);
 57 |   }
 58 |   let dep = targetMap.get(key);
 59 |   if (!dep) {
 60 |     dep = new Set();
 61 |     depsMap.set(key, dep);
 62 |   }
 63 |   // 函数抽离
 64 |   trackEffect(dep);
 65 | }
 66 | export function trackEffect(dep) {
 67 |   //看看dep之前有没有添加过，如果已经添加过，就不在添加
 68 |   if (dep.has(activeEffect)) return;
 69 |   dep.add(activeEffect);
 70 |   activeEffect.deps.push(dep);
 71 | }
 72 | 
 73 | export function isTracking() {
 74 |   return activeEffect !== undefined && shouldTrack;
 75 | }
 76 | 
 77 | export function trigger(target, key) {
 78 |   // 基于 取出dep,调用所有fn
 79 |   let depsMap = targetMap.get(target);
 80 |   let dep = depsMap.get(key);
 81 |   triggerEffect(dep);
 82 | }
 83 | 
 84 | // 从trigger中抽离
 85 | export function triggerEffect(dep) {
 86 |   for (const effect of dep) {
 87 |     // console.log("effect", effect);
 88 |     if (effect.scheduler) {
 89 |       effect.scheduler();
 90 |     } else {
 91 |       effect.run();
 92 |     }
 93 |   }
 94 | }
 95 | 
 96 | export function effect(fn, options: any = {}) {
 97 |   // fn
 98 |   const _effect = new ReactiveEffect(fn, options.scheduler);
 99 |   // _effect.onStop = options.onStop;
100 |   extend(_effect, options);
101 | 
102 |   _effect.run();
103 |   // 调用run方法的时候直接执行fn
104 |   let runner: any = _effect.run.bind(_effect);
105 |   runner.effect = _effect;
106 |   return runner;
107 | }
108 | 
109 | export function stop(runner) {
110 |   //
111 |   runner.effect.stop();
112 | }
113 | 


--------------------------------------------------------------------------------
/src/reactivity/index.ts:
--------------------------------------------------------------------------------
1 | export { ref, proxyRefs } from "./ref";
2 | 


--------------------------------------------------------------------------------
/src/reactivity/reactive.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   mutableHandlers,
 3 |   readonlyHandlers,
 4 |   shallowReadonlyHandlers,
 5 | } from "./baseHandlers";
 6 | import { isObject } from "../shared/index";
 7 | // 枚举
 8 | export const enum ReactiveFlags {
 9 |   IS_REACTIVE = "__v_isReactive",
10 |   IS_READONLY = "__V_isReadonly",
11 | }
12 | 
13 | export function reactive(raw) {
14 |   // 处理ts config lib ["DOM","es6"]
15 |   return createReactiveObject(raw, mutableHandlers);
16 | }
17 | 
18 | // readonly
19 | export function readonly(raw) {
20 |   return createReactiveObject(raw, readonlyHandlers);
21 | }
22 | 
23 | // isReactive
24 | export function isReactive(value) {
25 |   return !!value[ReactiveFlags.IS_REACTIVE];
26 |   // return value['is_reactive']
27 | }
28 | 
29 | // isReadonly
30 | export function isReadonly(value) {
31 |   return !!value[ReactiveFlags.IS_READONLY];
32 | }
33 | 
34 | // isProxy
35 | export function isProxy(value) {
36 |   // value
37 |   return isReactive(value) || isReadonly(value);
38 | }
39 | 
40 | function createReactiveObject(target: any, baseHandlers) {
41 |   if (!isObject(target)) {
42 |     console.warn(`target ${target}必须是一个对象`);
43 |     return target;
44 |   }
45 |   return new Proxy(target, baseHandlers);
46 | }
47 | 
48 | // shallowReadonly
49 | export function shallowReadonly(raw) {
50 |   return createReactiveObject(raw, shallowReadonlyHandlers);
51 | }
52 | 


--------------------------------------------------------------------------------
/src/reactivity/ref.ts:
--------------------------------------------------------------------------------
 1 | import { reactive } from "./reactive";
 2 | import { trackEffect, triggerEffect, isTracking } from "./effect";
 3 | import { hasChanged, isObject } from "../shared/index";
 4 | 
 5 | // ref是一个单值，1 true '2'
 6 | // proxy 只针对 object
 7 | // 单值类型，通过对象来包裹。
 8 | 
 9 | // ref impl  接口缩写
10 | class refImpl {
11 |   private _value: any;
12 |   // 原始值
13 |   private _rawValue: any;
14 |   public dep;
15 |   public __is_ref = true;
16 |   constructor(value) {
17 |     // this._value = value;
18 |     // 看看value是不是对象，如value是对象 value -> reactive
19 |     // this._value = isObject(value) ? reactive(value) : value; 抽离公共方法
20 |     this._value = convert(value);
21 |     this.dep = new Set();
22 |     this._rawValue;
23 |   }
24 |   get value() {
25 |     // 调用get的时候收集依赖
26 |     // if (isTracking()) {
27 |     //   trackEffect(this.dep);
28 |     // }
29 | 
30 |     trackRefValue(this);
31 |     return this._value;
32 |   }
33 |   set value(newValue) {
34 |     // 设置value 一定先去修改value的值
35 |     // newValue -> this._value
36 |     // hasChanged
37 |     // 如果set前后的值相等，就不需要重新触发trigger
38 |     // if (Object.is(newValue, this._value)) return;
39 |     // 对比的时候也需要知道是object还是非object
40 |     if (hasChanged(newValue, this._rawValue)) {
41 |       this._value = newValue;
42 |       this._value = convert(newValue);
43 |       // 触发trigger
44 |       triggerEffect(this.dep);
45 |     }
46 |   }
47 | }
48 | 
49 | function convert(value) {
50 |   return isObject(value) ? reactive(value) : value;
51 | }
52 | 
53 | function trackRefValue(ref) {
54 |   // 调用get的时候收集依赖
55 |   if (isTracking()) {
56 |     trackEffect(ref.dep);
57 |   }
58 | }
59 | export function ref(value) {
60 |   return new refImpl(value);
61 | }
62 | 
63 | export function isRef(ref) {
64 |   return !!ref.__is_ref;
65 | }
66 | 
67 | export function unRef(ref) {
68 |   // 看看是不是ref,如果是就返回ref.value  反之返回当前值
69 |   return isRef(ref) ? ref.value : ref;
70 | }
71 | 
72 | export function proxyRefs(objectWithRefs) {
73 |   // get set
74 |   return new Proxy(objectWithRefs, {
75 |     // get -> 如果是ref，则返回 .value, 否则返回value本身
76 |     get(target, key) {
77 |       return unRef(Reflect.get(target, key));
78 |     },
79 |     set(target, key, value) {
80 |       // set -> ref  .value
81 |       if (isRef(target[key]) && !isRef(value)) {
82 |         target[key].value = value;
83 |       } else {
84 |         Reflect.set(target, key, value);
85 |       }
86 |       return true;
87 |     },
88 |   });
89 | }
90 | 


--------------------------------------------------------------------------------
/src/reactivity/test/computed.spec.ts:
--------------------------------------------------------------------------------
 1 | import { computed } from "../computed";
 2 | import { reactive } from "../reactive";
 3 | 
 4 | describe("computed", () => {
 5 |   it("happy path", () => {
 6 |     // 拆分
 7 |     const user = reactive({
 8 |       age: 1,
 9 |     });
10 |     const age = computed(() => {
11 |       return user.age;
12 |     });
13 |     expect(age.value).toBe(1);
14 |   });
15 | 
16 |   it("should compute lazily", () => {
17 |     const value = reactive({
18 |       foo: 1,
19 |     });
20 |     // 是否调用getter
21 |     const getter = jest.fn(() => {
22 |       return value.foo;
23 |     });
24 |     const cValue = computed(getter);
25 | 
26 |     expect(getter).not.toHaveBeenCalled();
27 |     // 下面调用了cValue.value,此时调用了getter
28 |     expect(cValue.value).toBe(1);
29 |     expect(getter).toHaveBeenCalledTimes(1);
30 |     //
31 |     // should not computed again
32 |     cValue.value;
33 |     expect(getter).toHaveBeenCalledTimes(1);
34 |     // should not compute until needed
35 |     value.foo = 2;
36 |     expect(getter).toHaveBeenCalledTimes(1);
37 |     // now is should computed
38 |     expect(cValue.value).toBe(2);
39 |     expect(getter).toHaveBeenCalledTimes(2);
40 |     // should not computed again
41 |     cValue.value;
42 |     expect(getter).toHaveBeenCalledTimes(2);
43 |   });
44 | });
45 | 


--------------------------------------------------------------------------------
/src/reactivity/test/effect.spec.ts:
--------------------------------------------------------------------------------
  1 | import { effect, stop } from "../effect";
  2 | import { reactive } from "../reactive";
  3 | 
  4 | describe("effect", () => {
  5 |   it.skip("happy path", () => {
  6 |     // 拆分
  7 |     const user = reactive({
  8 |       age: 10,
  9 |     });
 10 |     let nextAge;
 11 |     effect(() => {
 12 |       nextAge = user.age + 1;
 13 |     });
 14 |     expect(nextAge).toBe(11);
 15 |     // update
 16 |     user.age++;
 17 |     expect(nextAge).toBe(12);
 18 |   });
 19 | 
 20 |   it.skip("should return runner when call effect", () => {
 21 |     // 1.effect(fn)-> function(runner) ->调用fn -> 并把返回值返回出来
 22 |     let foo = 10;
 23 |     const runner = effect(() => {
 24 |       foo++;
 25 |       return "foo";
 26 |     });
 27 |     expect(foo).toBe(10);
 28 |     const r = runner();
 29 |     expect(foo).toBe(11);
 30 |     expect(r).toBe("foo");
 31 |   });
 32 | 
 33 |   it("scheduler", () => {
 34 |     // 1. 通过 effect 的第二个参数给定的一个 scheduler 的 fn
 35 |     // 2. effect 第一次执行的时候 还会执行 fn
 36 |     // 3. 当 响应式对象 set update 不回执行 fn 而是执行 scheduler
 37 |     // 4. 如果当执行 runner 的时候，会再次星座 fn
 38 |     let dummy;
 39 |     let run: any;
 40 |     const scheduler = jest.fn(() => {
 41 |       // jest.fn 是创建mock函数最简单的方式，如果么有定义函数内部的实现，jest.fn则会返回undefined作为返回值
 42 |       run = runner;
 43 |     });
 44 |     const obj = reactive({ foo: 1 });
 45 |     const runner = effect(
 46 |       () => {
 47 |         dummy = obj.foo;
 48 |       },
 49 |       {
 50 |         scheduler,
 51 |       }
 52 |     );
 53 |     // toHaveBeenCalled用来判断mock函数是否被掉用过
 54 |     expect(scheduler).not.toHaveBeenCalled();
 55 |     // console.log(dummy);
 56 |     expect(dummy).toBe(1);
 57 |     // should be c alled first trigger
 58 |     obj.foo++;
 59 |     // console.log("dummy", dummy);
 60 |     //toHaveBeenCalledTimes 用来判断mock函数调用过几次
 61 |     expect(scheduler).toHaveBeenCalledTimes(1);
 62 |     // should not run yet
 63 |     expect(dummy).toBe(1);
 64 |     // manually run
 65 |     run();
 66 |     // should be run
 67 |     expect(dummy).toBe(2);
 68 |   });
 69 | 
 70 |   // stop 停止响应
 71 |   it("stop", () => {
 72 |     let dummy;
 73 |     const obj = reactive({ prop: 1 });
 74 |     const runner: any = effect(() => {
 75 |       dummy = obj.prop;
 76 |     });
 77 |     obj.prop = 2;
 78 |     expect(dummy).toBe(2);
 79 |     stop(runner);
 80 |     // 这里触发set,重新收集依赖，触发track
 81 |     // obj.prop = 3;
 82 |     // 这里相当于 obj.prop = obj.prop + 1; 触发get,set。get操作重新触发收集依赖
 83 |     obj.prop++;
 84 |     expect(dummy).toBe(2);
 85 |     //
 86 |     runner();
 87 |     expect(dummy).toBe(3);
 88 |   });
 89 | 
 90 |   // stop被调用之后，传入的onstop会被执行
 91 |   it("onStop", () => {
 92 |     const obj = reactive({
 93 |       foo: 1,
 94 |     });
 95 |     // 模拟请求服务
 96 |     const onStop = jest.fn();
 97 |     let dummy;
 98 |     const runner = effect(
 99 |       () => {
100 |         dummy = obj.foo;
101 |       },
102 |       {
103 |         onStop,
104 |       }
105 |     );
106 |     stop(runner); // 调用stop方法后，
107 |     expect(onStop).toBeCalledTimes(1); // 被调用一次
108 |   });
109 | });
110 | 


--------------------------------------------------------------------------------
/src/reactivity/test/reactive.spec.ts:
--------------------------------------------------------------------------------
 1 | import { isReactive, reactive, isProxy } from "../reactive";
 2 | 
 3 | describe("reactive", () => {
 4 |   it.skip("happy path", () => {
 5 |     // 拆分
 6 |     const original = { foo: 1 };
 7 |     const observed = reactive(original);
 8 |     expect(observed).not.toBe(original);
 9 |     expect(observed.foo).toBe(1);
10 |     expect(isReactive(observed)).toBe(true);
11 |     expect(isReactive(original)).toBe(false);
12 |     expect(isReactive(observed.foo)).toBe(true);
13 |     // isproxy
14 |     expect(isProxy(observed)).toBe(true);
15 |   });
16 |   //
17 |   it("nested reactive", () => {
18 |     const original = {
19 |       nested: {
20 |         foo: 1,
21 |       },
22 |       array: [{ bar: 2 }],
23 |     };
24 |     const observed = reactive(original);
25 |     expect(isReactive(original)).toBe(false);
26 |     expect(isReactive(original.nested)).toBe(false);
27 | 
28 |     expect(isReactive(observed.nested)).toBe(true);
29 |     expect(isReactive(observed.array)).toBe(true);
30 |     expect(isReactive(observed.array[0])).toBe(true);
31 |   });
32 |   //
33 | });
34 | 


--------------------------------------------------------------------------------
/src/reactivity/test/readonly.spec.ts:
--------------------------------------------------------------------------------
 1 | import { readonly, isReadonly, isProxy } from "../reactive";
 2 | 
 3 | describe("readonly", () => {
 4 |   it("happy path", () => {
 5 |     // readonly test
 6 |     //  不可以被set,只读
 7 |     const original = { foo: 1, bar: { baz: 1 } };
 8 |     const wrapped = readonly(original);
 9 |     expect(wrapped).not.toBe(original);
10 |     expect(wrapped.foo).toBe(1);
11 | 
12 |     expect(isReadonly(wrapped.bar)).toBe(true);
13 |     expect(isReadonly(original.bar)).toBe(false);
14 | 
15 |     // isProxy
16 |     expect(isProxy(wrapped)).toBe(true);
17 |   });
18 | 
19 |   // 当调用set的时候给一个警告提示
20 |   it("warn then call set", () => {
21 |     // console.warn()
22 |     // mock 假的请求，验证是否被调用到
23 |     console.warn = jest.fn();
24 |     const user = readonly({
25 |       age: 10,
26 |     });
27 |     user.age = 11;
28 | 
29 |     expect(console.warn).toBeCalled(); // 是否被调用到
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/src/reactivity/test/ref.spec.ts:
--------------------------------------------------------------------------------
 1 | import { effect } from "../effect";
 2 | import { ref, isRef, unRef, proxyRefs } from "../ref";
 3 | import { reactive } from "../reactive";
 4 | 
 5 | describe("ref", () => {
 6 |   it("happy path", () => {
 7 |     const a = ref(1);
 8 |     expect(a.value).toBe(1);
 9 |   });
10 |   //
11 |   it("should be reactive", () => {
12 |     const a = ref(1);
13 |     let dummy;
14 |     let calls = 0;
15 |     effect(() => {
16 |       calls++;
17 |       dummy = a.value;
18 |     });
19 |     expect(calls).toBe(1);
20 |     expect(dummy).toBe(1);
21 | 
22 |     a.value = 2;
23 | 
24 |     expect(calls).toBe(2);
25 |     expect(dummy).toBe(2);
26 | 
27 |     // same value should not trigger
28 |     // a.value = 2;
29 |     // expect(calls).toBe(2);
30 |     // expect(dummy).toBe(2);
31 |   });
32 | 
33 |   //
34 |   it("should make nested properties reactive", () => {
35 |     // 接收对象，
36 |     const a = ref({
37 |       count: 1,
38 |     });
39 |     let dummy;
40 |     effect(() => {
41 |       dummy = a.value.count;
42 |     });
43 |     expect(dummy).toBe(1);
44 |     a.value.count = 2;
45 |     expect(dummy).toBe(2);
46 |   });
47 |   // isRef unRef
48 |   it("isRef", () => {
49 |     const a = ref(1);
50 |     const user = reactive({
51 |       age: 1,
52 |     });
53 | 
54 |     expect(isRef(a)).toBe(true);
55 |     expect(isRef(1)).toBe(false);
56 |     expect(isRef(user)).toBe(false);
57 |   });
58 |   it("unRef", () => {
59 |     const a = ref(1);
60 |     expect(unRef(a)).toBe(1);
61 |     expect(unRef(1)).toBe(1);
62 |   });
63 |   // proxyRefs
64 |   it("proxyRefs", () => {
65 |     const user = {
66 |       age: ref(10),
67 |       name: "mini_vue",
68 |     };
69 |     const proxyUser = proxyRefs(user);
70 | 
71 |     expect(user.age.value).toBe(10);
72 |     expect(proxyUser.age).toBe(10);
73 |     expect(proxyUser.name).toBe("mini_vue");
74 | 
75 |     proxyUser.age = 20;
76 |     expect(user.age.value).toBe(20);
77 |     expect(proxyUser.age).toBe(20);
78 | 
79 |     // proxyUser.age = 10;
80 |     // expect(user.age.value).toBe(10);
81 |     // expect(proxyUser.age).toBe(10);
82 |   });
83 | });
84 | 


--------------------------------------------------------------------------------
/src/reactivity/test/shallowReadonly.spec.ts:
--------------------------------------------------------------------------------
 1 | import { isReadonly, shallowReadonly } from "../reactive";
 2 | 
 3 | describe("shallowReadonly", () => {
 4 |   test("should not make non-reactive properties reactive", () => {
 5 |     const props = shallowReadonly({ n: { foo: 1 } });
 6 |     expect(isReadonly(props)).toBe(true);
 7 |     expect(isReadonly(props.n)).toBe(false);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/runtime-core/apiInject.ts:
--------------------------------------------------------------------------------
 1 | // provide inject 跨层级
 2 | 
 3 | import { getCurrentInstance } from "./component";
 4 | 
 5 | /**
 6 |  * provide inject 启用依赖注入，两者只能在使用当前活动实例的setup()期间被调用-->因为函数中调用了getCurrentInstance
 7 |  * vue3中是以函数调用的方式，vue2中是对象的方式
 8 |  * vue3:
 9 |  * import { InjectionKey, provide, inject } from 'vue'
10 |  * provide(key, 'foo')
11 |  * vue2:
12 |  * data(){
13 |  *   return {
14 |  *   }
15 |  * },
16 |  * provide:{
17 |  *   user: 'mia'
18 |  * }
19 |  * inject: ['user']
20 |  *  * **/
21 | export function provide(key, value) {
22 |   // provide 存
23 |   // key value
24 |   const currentInstance: any = getCurrentInstance();
25 |   if (currentInstance) {
26 |     let { provides } = currentInstance;
27 |     let parentProvides = currentInstance.parent.provides;
28 |     if (provides === parentProvides) {
29 |       // init 第一次
30 |       provides = currentInstance.provides = Object.create(parentProvides);
31 |     }
32 |     provides[key] = value;
33 |   }
34 | }
35 | 
36 | export function inject(key, defaultValue) {
37 |   console.log("key", key);
38 |   // inject 取
39 |   const currentInstance: any = getCurrentInstance();
40 |   if (currentInstance) {
41 |     const parentProvides = currentInstance.parent.provides;
42 |     // console.log("inject", currentInstance);
43 |     if (key in parentProvides) {
44 |       return parentProvides[key];
45 |     } else if (defaultValue) {
46 |       if (typeof defaultValue === "function") {
47 |         return defaultValue();
48 |       }
49 |       return defaultValue;
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/runtime-core/component.ts:
--------------------------------------------------------------------------------
 1 | import { PublicInstanceProxyHandlers } from "./componentPublicinstance";
 2 | import { initProps } from "./componentProps";
 3 | import { initSlots } from "./componentSlots";
 4 | import { shallowReadonly } from "../reactivity/reactive";
 5 | import { emit } from "./componentEmit";
 6 | import { proxyRefs } from "..";
 7 | // component
 8 | export function createComponentInstance(vnode, parent) {
 9 |   console.log("createComponentInstance", parent);
10 |   const component = {
11 |     vnode,
12 |     type: vnode.type,
13 |     setupState: {},
14 |     props: {},
15 |     emit: () => {},
16 |     slots: {},
17 |     provides: parent?.provides || {},
18 |     parent,
19 |     isMounted: false,
20 |     subTree: {},
21 |   };
22 |   component.emit = emit.bind(null, component) as any;
23 |   return component;
24 | }
25 | 
26 | export function setupComponent(instance) {
27 |   // 初始化
28 |   initProps(instance, instance.vnode.props);
29 |   // 初始化==》父节点的children赋值给slots
30 |   initSlots(instance, instance.vnode.children);
31 |   setupStatefulComponent(instance);
32 | }
33 | // 组件实例对象
34 | function setupStatefulComponent(instance: any) {
35 |   // setup返回值
36 |   const Component = instance.type;
37 |   // ctx
38 |   // 1.初始化时，创建一个代理对象
39 |   // 2.调用render的时候，将代理对象绑定到this
40 |   instance.proxy = new Proxy({ _: instance }, PublicInstanceProxyHandlers);
41 | 
42 |   const { setup } = Component;
43 | 
44 |   if (setup) {
45 |     //
46 |     // currentInstance = instance;
47 |     setCurrentInstance(instance);
48 |     // function -> 组件的render函数 or object->将object注入当前组件上下文中
49 |     const setupResult = setup(shallowReadonly(instance.props), {
50 |       emit: instance.emit,
51 |     });
52 |     // currentInstance = null;
53 |     setCurrentInstance(null);
54 |     handleSetupResult(instance, setupResult);
55 |   }
56 | }
57 | 
58 | function handleSetupResult(instance, setupResult) {
59 |   // function or object
60 | 
61 |   if (typeof setupResult === "object") {
62 |     instance.setupState = proxyRefs(setupResult);
63 |   }
64 |   // console.log("setupResult", setupResult);
65 | 
66 |   finishComponentSetup(instance);
67 | }
68 | 
69 | function finishComponentSetup(instance: any) {
70 |   const Component = instance.type;
71 |   // template
72 |   if (compiler && !Component.render) {
73 |     // render优先级高
74 |     if (Component.template) {
75 |       Component.render = compiler(Component.template);
76 |     }
77 |   }
78 |   instance.render = Component.render;
79 | }
80 | 
81 | // 借助全局变量
82 | //  高阶使用场景，反对在应用的代码中使用，只能在setup或者生命周期钩子中使用
83 | let currentInstance = null;
84 | // getCurrentInstance
85 | export function getCurrentInstance() {
86 |   return currentInstance;
87 | }
88 | 
89 | // 赋值instance ,后续需要可以直接调用方法，而不是重复去赋值，并且控制修改入口，方便调试排查
90 | function setCurrentInstance(instance) {
91 |   currentInstance = instance;
92 | }
93 | 
94 | let compiler;
95 | export function registerRuntimeCompiler(_compiler) {
96 |   compiler = _compiler;
97 | }
98 | 


--------------------------------------------------------------------------------
/src/runtime-core/componentEmit.ts:
--------------------------------------------------------------------------------
 1 | import { camelize, toHandlerKey } from "../shared/index";
 2 | 
 3 | export function emit(instance, event, ...args) {
 4 |   console.log("emit", event);
 5 |   // return () => {};
 6 |   const { props } = instance;
 7 | 
 8 |   //TPP
 9 |   // 先写一个特定行为，然后重构为通用的行为
10 |   // 传过来是add,变成首字母大写，然后拼上on
11 | 
12 |   const handerName = toHandlerKey(camelize(event));
13 |   const handler = props[handerName];
14 |   handler && handler(...args);
15 | }
16 | 


--------------------------------------------------------------------------------
/src/runtime-core/componentProps.ts:
--------------------------------------------------------------------------------
1 | export function initProps(instance, rawProps) {
2 |   // attrs
3 |   instance.props = rawProps || {};
4 | }
5 | 


--------------------------------------------------------------------------------
/src/runtime-core/componentPublicinstance.ts:
--------------------------------------------------------------------------------
 1 | import { hasOwn } from "../shared/index";
 2 | 
 3 | const publicProprttiesMap = {
 4 |   $el: (i) => i.vnode.el,
 5 |   // 父节点的children
 6 |   $slots: (i) => i.slots,
 7 |   //
 8 |   $props: (i) => i.props,
 9 | };
10 | 
11 | export const PublicInstanceProxyHandlers = {
12 |   get({ _: instance }, key) {
13 |     // key -> msg
14 |     // setupState
15 |     const { setupState, props } = instance;
16 |     if (key in setupState) {
17 |       return setupState[key];
18 |     }
19 | 
20 |     if (hasOwn(setupState, key)) {
21 |       return setupState[key];
22 |     } else if (hasOwn(props, key)) {
23 |       return props[key];
24 |     }
25 | 
26 |     // key -> $el  $data,
27 |     // if (key === "$el") {
28 |     //   return instance.vnode.$el;
29 |     // }
30 |     //
31 |     const publicGetter = publicProprttiesMap[key];
32 |     if (publicGetter) {
33 |       return publicGetter(instance);
34 |     }
35 |   },
36 |   // {
37 |   //   get(target, key) {
38 |   //     // key -> msg
39 |   //     // setupState
40 |   //     const { setupState } = instance;
41 |   //     if (key in setupState) {
42 |   //       return setupState[key];
43 |   //     }
44 | 
45 |   //     // key -> $el
46 |   //     if (key === "$el") {
47 |   //       return instance.vnode.$el;
48 |   //     }
49 |   //   },
50 |   // }
51 | };
52 | 


--------------------------------------------------------------------------------
/src/runtime-core/componentSlots.ts:
--------------------------------------------------------------------------------
 1 | import { ShapeFlags } from "../shared/ShapeFlag";
 2 | 
 3 | export function initSlots(instance, children) {
 4 |   // slot
 5 |   const { vnode } = instance;
 6 |   if (vnode.shapeFlags & ShapeFlags.SLOT_CHILDREN) {
 7 |     normalizeObjectSlots(children, instance.slots);
 8 |   }
 9 | }
10 | 
11 | function normalizeObjectSlots(children: any, slots: any) {
12 |   for (const key in children) {
13 |     const value = children[key];
14 |     slots[key] = (props) => normalizeSlotValue(value(props));
15 |   }
16 | }
17 | 
18 | function normalizeSlotValue(value) {
19 |   return Array.isArray(value) ? value : [value];
20 | }
21 | 


--------------------------------------------------------------------------------
/src/runtime-core/componentUpdateUtils.ts:
--------------------------------------------------------------------------------
 1 | export function shouldUpdateComponent(prevVNode, nextVNode) {
 2 |   // shouldUpdateComponent
 3 |   const { props: prevProp } = prevVNode;
 4 |   const { props: nextProp } = nextVNode;
 5 |   for (const key in nextProp) {
 6 |     // if (nextProp[key] !== prevProp[key]) {
 7 |     //   return true;
 8 |     // }
 9 |     return nextProp[key] !== prevProp[key];
10 |   }
11 |   return false;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/runtime-core/createApp.ts:
--------------------------------------------------------------------------------
 1 | import { createVNode } from "./vnode";
 2 | // import { render } from "./renderer";
 3 | 
 4 | export function createAPI(render) {
 5 |   return function createApp(rootComponent) {
 6 |     // 接收一个根组件
 7 | 
 8 |     return {
 9 |       mount(rootContainer) {
10 |         // 根容器 也就是#app
11 |         // 先把所有东西转为vnode
12 |         // component -> vnode
13 |         // 所有逻辑操作基于 vnode 来处理
14 |         const vnode = createVNode(rootComponent);
15 |         render(vnode, rootContainer);
16 |       },
17 |     };
18 |   };
19 | }
20 | //render
21 | // export function createApp(render, rootComponent) {
22 | //   // 接收一个根组件
23 | 
24 | //   return {
25 | //     mount(rootContainer) {
26 | //       // 根容器 也就是#app
27 | //       // 先把所有东西转为vnode
28 | //       // component -> vnode
29 | //       // 所有逻辑操作基于 vnode 来处理
30 | //       const vnode = createVNode(rootComponent);
31 | //       render(vnode, rootContainer);
32 | //     },
33 | //   };
34 | // }
35 | 


--------------------------------------------------------------------------------
/src/runtime-core/h.ts:
--------------------------------------------------------------------------------
1 | import { createVNode } from "./vnode";
2 | //
3 | export function h(type, props?, children?) {
4 |   //
5 | 
6 |   return createVNode(type, props, children);
7 | }
8 | 


--------------------------------------------------------------------------------
/src/runtime-core/helpers/renderSlots.ts:
--------------------------------------------------------------------------------
 1 | import { createVNode, Fragment } from "../vnode";
 2 | export function renderSlots(slots, name, props) {
 3 |   // children -> vnode
 4 |   // 是否有slots name
 5 |   const slot = slots[name];
 6 | 
 7 |   if (slot) {
 8 |     // function
 9 |     if (typeof slot === "function") {
10 |       // children不可以有数组==》fragment
11 |       // 只需要吧children渲染出来就可以，不需要渲染此处根节点div
12 |       return createVNode(Fragment, {}, slot(props));
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/runtime-core/index.ts:
--------------------------------------------------------------------------------
 1 | export { h } from "./h";
 2 | export { renderSlots } from "./helpers/renderSlots";
 3 | export { createTextVNode, createElementVNode } from "./vnode";
 4 | export { getCurrentInstance, registerRuntimeCompiler } from "./component";
 5 | export { provide, inject } from "./apiInject";
 6 | export { createRenderer } from "./renderer";
 7 | export { nextTick } from "./scheduler";
 8 | 
 9 | export { toDisplayString } from "../shared";
10 | // 遵循依赖顺序
11 | export * from "../reactivity";
12 | 


--------------------------------------------------------------------------------
/src/runtime-core/renderer.ts:
--------------------------------------------------------------------------------
  1 | import { createComponentInstance, setupComponent } from "./component";
  2 | import { ShapeFlags } from "../shared/ShapeFlag";
  3 | import { Fragment, Text } from "./vnode";
  4 | import { createAPI } from "./createApp";
  5 | import { effect } from "../reactivity/effect";
  6 | import { shouldUpdateComponent } from "./componentUpdateUtils";
  7 | import { queueJobs } from "./scheduler";
  8 | 
  9 | export function createRenderer(options) {
 10 |   const {
 11 |     createElement: hostCreateElement,
 12 |     patchProp: hostPatchProp,
 13 |     insert: hostInsert,
 14 |     remove: hostRemove,
 15 |     setElementText: hostSetElementText,
 16 |   } = options;
 17 | 
 18 |   function render(vnode: any, container) {
 19 |     // 调用patch方法
 20 |     // render的时候不需要anchor
 21 |     patch(null, vnode, container, null, null);
 22 |   }
 23 |   // n1  老的
 24 |   // n2  新的
 25 |   function patch(n1, n2, container, parentComponent, anchor) {
 26 |     // fragment
 27 |     // fragment -->只渲染children
 28 |     const { type, shapeFlags } = n2;
 29 | 
 30 |     switch (type) {
 31 |       case Fragment:
 32 |         processFragment(n1, n2, container, parentComponent, anchor);
 33 |         break;
 34 |       case Text:
 35 |         processText(n1, n2, container);
 36 |         break;
 37 | 
 38 |       default:
 39 |         if (shapeFlags & ShapeFlags.ELEMENT) {
 40 |           processElement(n1, n2, container, parentComponent, anchor);
 41 |         } else if (shapeFlags & ShapeFlags.STATEFUL_COMPONENT) {
 42 |           processComponent(n1, n2, container, parentComponent, anchor);
 43 |         }
 44 |         break;
 45 |     }
 46 |   }
 47 | 
 48 |   function processText(n1: any, n2: any, container: any) {
 49 |     const { children } = n2;
 50 |     const textNode = (n2.el = document.createTextNode(children));
 51 |     container.append(textNode);
 52 |   }
 53 | 
 54 |   function processFragment(
 55 |     n1: any,
 56 |     n2: any,
 57 |     container: any,
 58 |     parentComponent,
 59 |     anchor
 60 |   ) {
 61 |     mountChildren(n2.children, container, parentComponent, anchor);
 62 |   }
 63 | 
 64 |   function processElement(
 65 |     n1: any,
 66 |     n2: any,
 67 |     container: any,
 68 |     parentComponent,
 69 |     anchor
 70 |   ) {
 71 |     if (!n1) {
 72 |       mountElement(n2, container, parentComponent, anchor);
 73 |     } else {
 74 |       patchElement(n1, n2, container, parentComponent, anchor);
 75 |     }
 76 |   }
 77 |   function patchElement(n1, n2, container, parentComponent, anchor) {
 78 |     console.log("patchElement", n1, n2, container);
 79 |     // props
 80 |     const oldProps = n1.props || {};
 81 |     const newProps = n2.props || {};
 82 | 
 83 |     const el = (n2.el = n1.el);
 84 | 
 85 |     patchChildren(n1, n2, el, parentComponent, anchor);
 86 |     patchProps(el, oldProps, newProps);
 87 |     // children
 88 |   }
 89 |   function patchChildren(n1, n2, container, parentComponent, anchor) {
 90 |     //
 91 |     const { shapeFlags: prevShapeFlag } = n1;
 92 |     const { shapeFlags: nextShapeFlag } = n2;
 93 | 
 94 |     const c1 = n1.children;
 95 |     const c2 = n2.children;
 96 |     if (nextShapeFlag & ShapeFlags.TEXT_CHILDREN) {
 97 |       // new text
 98 |       if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
 99 |         // array
100 |         // 1. 把老的children清空
101 |         // 2. 设置text
102 |         unmountChildren(n1.children);
103 |       }
104 |       if (c1 !== c2) {
105 |         hostSetElementText(container, c2);
106 |       }
107 |     } else {
108 |       // new array
109 |       if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
110 |         hostSetElementText(container, "");
111 |         mountChildren(c2, container, parentComponent, anchor);
112 |       } else {
113 |         //array diff arry
114 |         patchKeyedChildren(c1, c2, container, parentComponent, anchor);
115 |       }
116 |     }
117 |   }
118 | 
119 |   function patchKeyedChildren(
120 |     c1,
121 |     c2,
122 |     container,
123 |     parentComponent,
124 |     parentAnchor
125 |   ) {
126 |     // c1老的数组, c2新的的数组
127 |     // 索引
128 |     const l2 = c2.length;
129 |     let i = 0;
130 |     let e1 = c1.length - 1;
131 |     let e2 = l2 - 1;
132 | 
133 |     // 左侧
134 |     while (i <= e1 && i <= e2) {
135 |       const n1 = c1[i];
136 |       const n2 = c2[i];
137 |       if (isSameVNodeType(n1, n2)) {
138 |         patch(n1, n2, container, parentComponent, parentAnchor);
139 |       } else {
140 |         break;
141 |       }
142 |       i++;
143 |     }
144 |     //  右侧
145 |     while (i <= e1 && i <= e2) {
146 |       const n1 = c1[e1];
147 |       const n2 = c2[e2];
148 | 
149 |       if (isSameVNodeType(n1, n2)) {
150 |         patch(n1, n2, container, parentComponent, parentAnchor);
151 |       } else {
152 |         break;
153 |       }
154 |       e1--;
155 |       e2--;
156 |     }
157 |     // console.log(i);
158 |     // 3. 新的比老的多 创建
159 |     if (i > e1) {
160 |       if (i <= e2) {
161 |         const nextPos = e2 + 1;
162 |         const anchor = nextPos < l2 ? c2[nextPos].el : null;
163 |         while (i <= e2) {
164 |           patch(null, c2[i], container, parentComponent, anchor);
165 |           i++;
166 |         }
167 |       }
168 |     } else if (i > e2) {
169 |       while (i <= e1) {
170 |         hostRemove(c1[i].el);
171 |         i++;
172 |       }
173 |     } else {
174 |       // 乱序 中间对比
175 |       let s1 = i; // 老节点
176 |       let s2 = i;
177 | 
178 |       let patched = 0;
179 |       const toBePatched = e2 - s2 + 1;
180 | 
181 |       const keyToNewIndexMap = new Map();
182 |       const newIndexToOldIndexMap = new Array(toBePatched);
183 | 
184 |       let moved = false;
185 |       let maxNewIndexSoFar = 0;
186 |       //
187 |       for (let i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0;
188 | 
189 |       for (let i = s2; i <= e2; i++) {
190 |         let nextChild = c2[i];
191 |         keyToNewIndexMap.set(nextChild.key, i);
192 |       }
193 |       // console.log("keyToNewIndexMap", keyToNewIndexMap);
194 | 
195 |       for (let i = s1; i <= e1; i++) {
196 |         const prevChild = c1[i];
197 | 
198 |         if (patched >= toBePatched) {
199 |           hostRemove(prevChild.el);
200 |           continue;
201 |         }
202 | 
203 |         let newIndex;
204 |         if (prevChild.key !== null) {
205 |           //
206 |           newIndex = keyToNewIndexMap.get(prevChild.key);
207 |         } else {
208 |           for (let j = s2; j <= e2; j++) {
209 |             if (isSameVNodeType(prevChild, c2[j])) {
210 |               newIndex = j;
211 |               //跳出当前循环
212 |               break;
213 |             }
214 |           }
215 |         }
216 |         if (newIndex === undefined) {
217 |           hostRemove(prevChild.el);
218 |         } else {
219 |           if (newIndex >= maxNewIndexSoFar) {
220 |             maxNewIndexSoFar = newIndex;
221 |           } else {
222 |             moved = true;
223 |           }
224 |           // 已存在 避免i为0时出错，此处需要+1
225 |           newIndexToOldIndexMap[newIndex - s2] = i + 1;
226 |           patch(prevChild, c2[newIndex], container, parentComponent, null);
227 |           patched++;
228 |         }
229 |       }
230 | 
231 |       const insreasingNewIndexSequence = moved
232 |         ? getSequence(newIndexToOldIndexMap)
233 |         : [];
234 |       // console.log("insreasingNewIndexSequence", insreasingNewIndexSequence);
235 |       let j = insreasingNewIndexSequence.length - 1;
236 | 
237 |       //
238 |       for (let i = toBePatched - 1; i >= 0; i--) {
239 |         const nextIndex = i + s2;
240 |         const nextChild = c2[nextIndex];
241 |         const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : null;
242 |         if (newIndexToOldIndexMap[i] === 0) {
243 |           // 创建新的
244 |           patch(null, nextChild, container, parentComponent, anchor);
245 |         } else if (moved) {
246 |           if (j < 0 || i !== insreasingNewIndexSequence[j]) {
247 |             console.log("移动位置", insreasingNewIndexSequence[j]);
248 |             hostInsert(nextChild.el, container, anchor);
249 |           } else {
250 |             j--;
251 |           }
252 |         }
253 |       }
254 |     }
255 |   }
256 |   // 是相同的vnode
257 |   function isSameVNodeType(n1, n2) {
258 |     // 1,type
259 |     // 2.key
260 |     return n1.type === n2.type && n1.key === n2.key;
261 |   }
262 |   function unmountChildren(children) {
263 |     for (let i = 0; i < children.length; i++) {
264 |       const el = children[i].el;
265 |       // remove
266 |       hostRemove(el);
267 |     }
268 |   }
269 |   function patchProps(el, oldProps, newProps) {
270 |     if (oldProps !== newProps) {
271 |       // 属性变更
272 |       for (const key in newProps) {
273 |         const prevProp = oldProps[key];
274 |         const nextProp = newProps[key];
275 |         if (prevProp !== nextProp) {
276 |           hostPatchProp(el, key, prevProp, nextProp);
277 |         }
278 |       }
279 | 
280 |       if (oldProps !== {}) {
281 |         // 属性删除
282 |         for (const key in oldProps) {
283 |           if (!(key in newProps)) {
284 |             hostPatchProp(el, key, oldProps[key], null);
285 |           }
286 |         }
287 |       }
288 |     }
289 |   }
290 |   function mountElement(vnode: any, container: any, parentComponent, anchor) {
291 |     // vnode: type, props, children
292 |     // const el = document.createElement('div');
293 | 
294 |     // el.textContent = 'hi,mini-vue~';
295 |     // el.setAttribute('id', 'root');
296 | 
297 |     // document.body.append(el)
298 |     // vnode 是element的
299 |     const { type, props, children, shapeFlags } = vnode;
300 | 
301 |     //
302 |     // 自定义渲染接口customRender
303 |     // new Element() 不依赖平台，依赖接口
304 |     // const el = (vnode.el = document.createElement(type));
305 |     const el = (vnode.el = hostCreateElement(type));
306 | 
307 |     // & 运算符判断是否为0的
308 | 
309 |     // text_children
310 |     // if (typeof children === "string") {
311 |     //   el.textContent = children;
312 |     // } else if (Array.isArray(children)) {
313 |     //   // 数组，
314 |     //   // children.forEach((v) => {
315 |     //   //   patch(v, el);
316 |     //   // });
317 |     //   // array_children
318 |     //   mountChildren(vnode, el);
319 |     // }
320 |     // shape
321 |     if (shapeFlags & ShapeFlags.TEXT_CHILDREN) {
322 |       el.textContent = children;
323 |     } else if (shapeFlags & ShapeFlags.ARRAY_CHILDREN) {
324 |       mountChildren(children, el, parentComponent, anchor);
325 |     }
326 | 
327 |     for (const key in props) {
328 |       // console.log("key", key, val);
329 |       // 以on开头，小驼峰的属性 如onClick
330 |       // const isOn = (key: string) => /^on[A-Z]/.test(key);
331 |       // if (isOn(key)) {
332 |       //   el.addEventListener(key.slice(2).toLowerCase(), val);
333 |       // } else {
334 |       //   el.setAttribute(key, val);
335 |       // }
336 |       const val = props[key];
337 |       hostPatchProp(el, key, null, val);
338 |     }
339 |     // container.append(el);
340 |     hostInsert(el, container, anchor);
341 |   }
342 | 
343 |   function mountChildren(children, container, parentComponent, anchor) {
344 |     children?.forEach((v) => {
345 |       patch(null, v, container, parentComponent, anchor);
346 |     });
347 |   }
348 | 
349 |   function processComponent(n1, n2: any, container, parentComponent, anchor) {
350 |     // 挂载组件
351 |     if (!n1) {
352 |       // n1没有的时候才是mount
353 |       mountComponent(n2, container, parentComponent, anchor);
354 |     } else {
355 |       // 有值的时候是更新
356 |       updateComponent(n1, n2);
357 |     }
358 |   }
359 |   function updateComponent(n1, n2) {
360 |     const instance = (n2.component = n1.component);
361 |     if (shouldUpdateComponent(n1, n2)) {
362 |       // component最新
363 |       instance.next = n2;
364 |       instance.update();
365 |     } else {
366 |       n2.el = n1.el;
367 |       n2.vnode = n2;
368 |     }
369 |   }
370 | 
371 |   function mountComponent(
372 |     initialVNode: any,
373 |     container: any,
374 |     parentComponent,
375 |     anchor
376 |   ) {
377 |     // 通过虚拟节点，创建组件实例对象
378 |     const instance = (initialVNode.component = createComponentInstance(
379 |       initialVNode,
380 |       parentComponent
381 |     ));
382 |     setupComponent(instance);
383 |     setupRenderEffect(instance, initialVNode, container, anchor);
384 |   }
385 | 
386 |   function setupRenderEffect(
387 |     instance: any,
388 |     initialVNode,
389 |     container: any,
390 |     anchor
391 |   ) {
392 |     instance.update = effect(
393 |       () => {
394 |         if (!instance.isMounted) {
395 |           console.log("init");
396 |           const { proxy } = instance;
397 |           const subTree = (instance.subTree = instance.render.call(
398 |             proxy,
399 |             proxy
400 |           ));
401 | 
402 |           patch(null, subTree, container, instance, anchor);
403 | 
404 |           initialVNode.el = subTree.el;
405 | 
406 |           instance.isMounted = true;
407 |         } else {
408 |           // 更新当前组件实例上的属性 props
409 |           // 需要一个更新之后的虚拟节点
410 |           const { next, vnode } = instance;
411 |           if (next) {
412 |             //
413 |             next.el = vnode.el;
414 |             updateComponentPreRender(instance, next);
415 |           }
416 |           //
417 |           console.log("update");
418 |           const { proxy } = instance;
419 |           const subTree = instance.render.call(proxy, proxy);
420 |           const prevSubTree = instance.subTree;
421 |           instance.subTree = subTree;
422 | 
423 |           patch(prevSubTree, subTree, container, instance, anchor);
424 |         }
425 |       },
426 |       {
427 |         scheduler() {
428 |           console.log("update-scheduler");
429 |           queueJobs(instance.update);
430 |         },
431 |       }
432 |     );
433 |   }
434 | 
435 |   return {
436 |     createApp: createAPI(render),
437 |   };
438 | }
439 | function updateComponentPreRender(instance, nextVNode) {
440 |   // 重新设置vnode,并清空
441 |   instance.vnode = nextVNode;
442 | 
443 |   instance.next = null;
444 |   instance.props = nextVNode.props;
445 | }
446 | function getSequence(arr) {
447 |   const p = arr.slice();
448 |   const result = [0];
449 |   let i, j, u, v, c;
450 |   const len = arr.length;
451 |   for (i = 0; i < len; i++) {
452 |     const arrI = arr[i];
453 |     if (arrI !== 0) {
454 |       j = result[result.length - 1];
455 |       if (arr[j] < arrI) {
456 |         p[i] = j;
457 |         result.push(i);
458 |         continue;
459 |       }
460 |       u = 0;
461 |       v = result.length - 1;
462 |       while (u < v) {
463 |         c = (u + v) >> 1;
464 |         if (arr[result[c]] < arrI) {
465 |           u = c + 1;
466 |         } else {
467 |           v = c;
468 |         }
469 |       }
470 |       if (arrI < arr[result[u]]) {
471 |         if (u > 0) {
472 |           p[i] = result[u - 1];
473 |         }
474 |         result[u] = i;
475 |       }
476 |     }
477 |   }
478 |   u = result.length;
479 |   v = result[u - 1];
480 |   while (u-- > 0) {
481 |     result[u] = v;
482 |     v = p[v];
483 |   }
484 |   return result;
485 | }
486 | 


--------------------------------------------------------------------------------
/src/runtime-core/scheduler.ts:
--------------------------------------------------------------------------------
 1 | const queue: any = [];
 2 | 
 3 | let isFlushPending = false;
 4 | const p = Promise.resolve();
 5 | export function nextTick(fn) {
 6 |   return fn ? p.then(fn) : p;
 7 | }
 8 | export function queueJobs(job) {
 9 |   //
10 |   if (!queue.includes(job)) {
11 |     queue.push(job);
12 |   }
13 | 
14 |   // 微任务
15 |   queueFlush();
16 | }
17 | 
18 | function queueFlush() {
19 |   // 微任务
20 |   if (isFlushPending) return;
21 |   isFlushPending = true;
22 |   nextTick(flushJobs);
23 |   // Promise.resolve().then(() => {
24 |   //   flushJobs();
25 |   // });
26 | }
27 | 
28 | function flushJobs() {
29 |   isFlushPending = false;
30 |   // 执行job
31 |   let job;
32 |   while ((job = queue.shift())) {
33 |     job && job();
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/runtime-core/vnode.ts:
--------------------------------------------------------------------------------
 1 | import { ShapeFlags } from "../shared/ShapeFlag";
 2 | 
 3 | export const Fragment = Symbol("Fragment");
 4 | export const Text = Symbol("Text");
 5 | 
 6 | export { createVNode as createElementVNode };
 7 | //
 8 | 
 9 | export function createVNode(type, props?, children?) {
10 |   // 创建一个虚拟节点
11 |   const vnode = {
12 |     type,
13 |     props,
14 |     key: props?.key,
15 |     children,
16 |     shapeFlags: getShapeFlag(type),
17 |     el: null,
18 |     component: null,
19 |   };
20 | 
21 |   if (typeof children === "string") {
22 |     // children
23 |     vnode.shapeFlags |= ShapeFlags.TEXT_CHILDREN;
24 |     // vnode.shapeFlags = vnode.shapeFlags | ShapeFlags.TEXT_CHILDREN;
25 |   } else if (Array.isArray(children)) {
26 |     vnode.shapeFlags |= ShapeFlags.ARRAY_CHILDREN;
27 |   }
28 | 
29 |   // 组件+ children是object
30 |   if (vnode.shapeFlags & ShapeFlags.STATEFUL_COMPONENT) {
31 |     if (typeof children === "object") {
32 |       vnode.shapeFlags |= ShapeFlags.SLOT_CHILDREN;
33 |     }
34 |   }
35 | 
36 |   return vnode;
37 | }
38 | 
39 | function getShapeFlag(type) {
40 |   return typeof type === "string"
41 |     ? ShapeFlags.ELEMENT
42 |     : ShapeFlags.STATEFUL_COMPONENT;
43 | }
44 | 
45 | export function createTextVNode(text: string) {
46 |   return createVNode(Text, {}, text);
47 | }
48 | 


--------------------------------------------------------------------------------
/src/runtime-dom/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRenderer } from "../runtime-core";
 2 | 
 3 | function createElement(type) {
 4 |   console.log("createElement");
 5 |   return document.createElement(type);
 6 | }
 7 | function patchProp(el, key, prevVal, nextVal) {
 8 |   console.log("patchProp");
 9 |   //  以on开头，小驼峰的属性 如onClick
10 |   const isOn = (key: string) => /^on[A-Z]/.test(key);
11 |   if (isOn(key)) {
12 |     el.addEventListener(key.slice(2).toLowerCase(), nextVal);
13 |   } else {
14 |     if (nextVal === undefined || nextVal === null) {
15 |       el.removeAttribute(key);
16 |     } else {
17 |       el.setAttribute(key, nextVal);
18 |     }
19 |   }
20 | }
21 | function insert(child, parent, anchor) {
22 |   // parent.append(child)
23 |   // debugger;
24 |   parent.insertBefore(child, anchor || null);
25 | }
26 | 
27 | function remove(child) {
28 |   //
29 |   const parent = child.parentNode;
30 |   if (parent) {
31 |     parent.removeChild(child);
32 |   }
33 | }
34 | 
35 | function setElementText(el, text) {
36 |   el.textContent = text;
37 | }
38 | 
39 | const renderer: any = createRenderer({
40 |   createElement,
41 |   patchProp,
42 |   insert,
43 |   remove,
44 |   setElementText,
45 | });
46 | 
47 | export function createApp(...agrs) {
48 |   return renderer.createApp(...agrs);
49 | }
50 | 
51 | export * from "../runtime-core";
52 | 


--------------------------------------------------------------------------------
/src/shared/ShapeFlag.ts:
--------------------------------------------------------------------------------
 1 | // 位运算
 2 | // 可读性不高，但是性能好
 3 | // enum 枚举
 4 | export const enum ShapeFlags {
 5 |   ELEMENT = 1, // 0001
 6 |   STATEFUL_COMPONENT = 1 << 1, // 0010
 7 |   TEXT_CHILDREN = 1 << 2, // 0100
 8 |   ARRAY_CHILDREN = 1 << 3, // 1000
 9 |   SLOT_CHILDREN = 1 << 4, //
10 | }
11 | 


--------------------------------------------------------------------------------
/src/shared/index.ts:
--------------------------------------------------------------------------------
 1 | export * from "./toDisplayString";
 2 | 
 3 | // export function extend(effect, options) {
 4 | //     Object.assign(effect, options);
 5 | //   }
 6 | export const extend = Object.assign;
 7 | 
 8 | export const isObject = (val) => {
 9 |   return val !== null && typeof val === "object";
10 | };
11 | 
12 | export const isString = (val) => typeof val === "string";
13 | 
14 | export const hasChanged = (value, newValue) => {
15 |   // 如果相等，则未改变，如果不相等，则为已改变
16 |   return !Object.is(value, newValue);
17 | };
18 | 
19 | export const hasOwn = (val, key) =>
20 |   Object.prototype.hasOwnProperty.call(val, key);
21 | 
22 | export const capitalize = (str: string) => {
23 |   return str.charAt(0).toUpperCase() + str.slice(1);
24 | };
25 | // 转换为驼峰命名规范
26 | export const camelize = (str: string) => {
27 |   return str.replace(/-(\w)/g, (_, c: string) => {
28 |     return c ? c.toUpperCase() : "";
29 |   });
30 | };
31 | 
32 | export const toHandlerKey = (str: string) => {
33 |   return str ? "on" + capitalize(str) : "";
34 | };
35 | 


--------------------------------------------------------------------------------
/src/shared/test.ts:
--------------------------------------------------------------------------------
 1 | // const ShapeFlags = {
 2 | //   element: 0,
 3 | //   stateful_component: 0,
 4 | //   text_children: 0,
 5 | //   array_children: 0,
 6 | // };
 7 | 
 8 | // vnode flag?
 9 | // 1.设置/修改
10 | // 2.查找类型
11 | 
12 | //
13 | 
14 | // if (ShapeFlags.element) {
15 | //   // 是element
16 | // }
17 | 
18 | // 当前数据结构为key:value的形式，不够高效，--> 位运算
19 | // 0000
20 | // 0001 --> element
21 | // 0010 --> stateful
22 | // 0100 --> text_children
23 | // 1000 --> array_children
24 | 
25 | /****
26 |  *
27 |  * | 两位都为0，则为0
28 |  * & 两位都为1，则为1
29 |  *
30 | // 修改
31 | 
32 | // 0000 -> 0001
33 |  */
34 | 
35 | export const enum ShapeFlags {
36 |   ELEMENT = 1, // 0001
37 |   STATEFUL_COMPONENT = 1 << 1, // 0010
38 |   TEXT_CHILDREN = 1 << 2, // 0100
39 |   ARRAY_CHILDREN = 1 << 3, // 1000
40 | }
41 | 
42 | console.log("ShapeFlags", ShapeFlags.STATEFUL_COMPONENT);
43 | 


--------------------------------------------------------------------------------
/src/shared/toDisplayString.ts:
--------------------------------------------------------------------------------
1 | export function toDisplayString(value) {
2 |   return String(value);
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "compilerOptions": {
  3 |     /* Visit https://aka.ms/tsconfig.json to read more about this file */
  4 | 
  5 |     /* Projects */
  6 |     // "incremental": true,                              /* Enable incremental compilation */
  7 |     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 |     // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
  9 |     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
 10 |     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 |     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 |     /* Language and Environment */
 14 |     "target": "es2016",                                     /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
 15 |     "lib": ["DOM", "es6", "ES2016"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
 16 |     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
 17 |     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 18 |     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 19 |     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
 20 |     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 21 |     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
 22 |     // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
 23 |     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 24 |     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 25 | 
 26 |     /* Modules */
 27 |     "module": "esnext",                                /* Specify what module code is generated. */
 28 |     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
 29 |     "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
 30 |     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 31 |     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 32 |     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 33 |     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
 34 |     "types": ["jest"],                                      /* Specify type package names to be included without being referenced in a source file. */
 35 |     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 36 |     // "resolveJsonModule": true,                        /* Enable importing .json files */
 37 |     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 38 | 
 39 |     /* JavaScript Support */
 40 |     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
 41 |     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
 42 |     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
 43 | 
 44 |     /* Emit */
 45 |     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 46 |     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 47 |     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 48 |     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 49 |     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
 50 |     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
 51 |     // "removeComments": true,                           /* Disable emitting comments. */
 52 |     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
 53 |     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 54 |     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
 55 |     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 56 |     // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 57 |     // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 58 |     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 59 |     // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 60 |     // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 61 |     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
 62 |     // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
 63 |     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
 64 |     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 65 |     // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
 66 |     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 67 | 
 68 |     /* Interop Constraints */
 69 |     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
 70 |     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
 71 |     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
 72 |     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 73 |     "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
 74 | 
 75 |     /* Type Checking */
 76 |     "strict": true,                                      /* Enable all strict type-checking options. */
 77 |     "noImplicitAny": false,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
 78 |     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
 79 |     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 80 |     // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
 81 |     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 82 |     // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
 83 |     // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
 84 |     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 85 |     // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
 86 |     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
 87 |     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 88 |     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 89 |     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 90 |     // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
 91 |     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
 92 |     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
 93 |     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
 94 |     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
 95 | 
 96 |     /* Completeness */
 97 |     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
 98 |     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------