Vue-注入，虚拟dom，挂载

注入

配置对象中的部分内容会被提取到vue实例中：

• data
• methods

该过程称之为注入

注入目的有两个：

• 完成数据响应式

  vue是怎么知道数据被更改了？

  vue2.0是通过Object.defineProperty方法完成了数据响应式，但是这种方法有缺陷，无法检测到新增属性和删除属性，vue3.0是通过Class Proxy完成的数据响应式，

• 绑定this

虚拟DOM树

为了提高渲染效率，vue会把模板编译成为虚拟DOM树，然后再生成真实的DOM

当数据更改时，将重新编译成虚拟DOM树，然后对前后两棵树进行比对，仅将差异部分反映到真实DOM，这样既可最小程度的改动真实DOM，提升页面效率

因此，对于vue而言，提升效率重点着眼于两个方面：

• 减少新的虚拟DOM的生成
• 保证对比之后，只有必要的节点有变化。

vue提供了多种方式生成虚拟DOM树：

1. 在挂在的元素内部直接书写，此时将使用元素的outerHTML作为模板
2. 在template配置中书写
3. 在render配置中用函数直接创建虚拟节点树，此时，完全脱离模板，将省略编译步骤

这些步骤从上到下，优先级逐渐提升

注意：虚拟节点树必须是单根的

挂载

将生成的真实DOM树，放置到某个元素位置，称之为挂载

挂载的方式：

1. 通过el:"css选择器"进行配置
2. 通过vue实例.$mount("css选择器")进行配置

完整流程