day2.注入与挂载

1. 使用Vue的两种方式

   • 在页面中引入Vue的js文件，将其当做库来使用
   • 脚手架
     • 官方脚手架vue-cli
     • 其他脚手架，如webpack-simple
     • 手动搭建

2. 注入

   1. 配置对象中的部分内容会被提取到Vue实例中：
   • data
   • methods

   该过程称为注入

   2. 注入的目的有两个：

      • 完成数据响应式

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

        vue2.0是通过Obejct.defineProperty方法完成了数据响应式,Vue3.0是通过Class Proxy完成的数据响应式

      • 绑定this

3. 虚拟DOM树

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

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

因此，对于Vue来说，提升效率主要注重两个方面：

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

Vue提供了多种生成虚拟DOM树：

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

注：

• 这些步骤从上到下，优先级逐渐提升
• 虚拟结点必须是单根的

4. 挂载

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

   挂载的方式：

   1. 通过el:''CSS选择器'进行配置
   2. 通过Vue实例.$mount('CSS选择器')进行配置