理解vue核心概念

记录下碎片学习~

Vue 2中很多核心的概念，作为前端工程师，需要知其然，知其所以然。因为无论你是出去面试，还是去面试别人都经常被问到或问到。所以就对一些概念的理解记录下来，方便自己理解。

首先对属性添加响应式，对每个属性收集依赖dep，在每个属性set的时候，通知每个watcher（即依赖）去渲染更新。

每个属性都有自己的依赖收集dep，当每个属性变化时会通知其依赖即watcher。

层级深需要递归添加响应式，性能不好；

Vue选择重写数组方法，即劫持数组方法，重写原型链上的方法，不是用的defineProperty，那样性能太差。

在vue中修改数组的长度是无法监控到的，需要通过以上7种变异方法才能监控到。

将template转换成render函数，生成虚拟节点，经过处理，最后再生成dom。

这个过程主要用的vue-template-compiler,vue-loader处理的，用vue-template-compiler生成ast和render，render方法一执行就重新生成了dom(codeGen)

模板引擎的实现原理主要用的 with和new Function

vue的生命周期钩子就是回调函数，当创建实例的时候会调用对应的方法。

抽离公共的业务逻辑，类似于”继承“，

mixin可以提供全局数据，但不是共享的，不是vuex.

有缺陷：命名冲突问题。

nextTick中的回调是在下次dom更新循环结束后执行的回调（延迟执行）。避免循环渲染。

原理就是异步方法，用到了事件循环中的（宏任务和微任务）。

vue多次更新数据，最终会批处理更新。

Virtual-dom就是用js对象来描述真实的dom,是对真实dom的抽象。由于直接操作dom性能低但是js的操作效率高，可以将dom操作转化成对象操作，最终通过diff算法比对差异进行更新dom,虚拟dom不依赖平台而能实现跨平台。

vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方法+双指针的方式进行比较。

Vue2&vue3,react都是这个原理。

为什么set可以触发更新。

如果是数组方法，调用我们重写的splice方法（这样可以更新视图）

如果是对象本身的属性，调用vue的定义响应式方法的，重新定义响应式。

props,事件，parent&children,provide&inject,$refs,

$attrs

Provide&inject可以实现跨级数据传递。$attrs主要是是实现批量传递数据，不能跨级。

创建时先父后子，卸载时先子后父。

每次使用组件时都会创建一个实例，并且调用data函数返回一个对象作为组件的数据源，这样可以保证多个组件间数据不影响。