vue核心概念之注入:
配置对象中的部分内容会被提取到vue实例中:
- data
- methods
该过程称之为注入 , 注入的目的有两个:
- 完成数据响应式 , vue是怎么知道数据被更改了?
vue2.0是通过 object.dasfindProperty 方法完成了数据响应式, 但是有个缺点, 就是在浏览器终端修改数据然而页面的数据不会被更改
vue3.0是通过 class proxy 完成的数据响应式(未学到)
- 绑定this
如何绑定 ? 通过methods.fn.bind(vue的实例)
vue的实例.fn !== methods.fn(前者绑定了this, 后者没有绑定this, 可以通过上述方法绑定)
vue核心概念之虚拟DOM树
为了提高渲染效率 , vue会把模板编译成虚拟DOM树 , 然后再生成真实的DOM
当数据更改时 , 将重新编译成虚拟DOM树 , 然后对前后两棵树进行对比 , 仅将差异部分反映到真实DOM , 这样即可最小程度的改动真实DOM , 提升页面效率 , 而实现的过程则是通过diff算法 , 当页面数据更改时 , vue会生成一个新的虚拟DOM树 , 然后两棵树进行对比 , 通过diff算法来判断哪部分更改了 , 然后就在页面上只渲染更改的部分
因此 , 对于vue而言，提升效率重点着眼于两个方面：
- 减少新的虚拟DOM的生成
- 保证对比之后，只有必要的节点有变化
vue提供了多种方式生成虚拟DOM树：
- 在挂载的元素内部直接书写，此时将使用元素的outerHTML作为模板
- 在template配置中书写
- 在render配置中用函数直接创建虚拟节点树，此时，完全脱离模板，将省略编译步骤
这些步骤从上到下，优先级逐渐提升
注意：虚拟节点树必须是单根的
vue核心概念之挂载
将生成的真实DOM树，放置在某个元素位置，称之为挂载
挂载的方式：
- 通过 el: "css选择器" 进行配置
- 通过vue实例。$mount("css选择器")进行配置（这种方式也称延迟挂载）
完整流程
