对于常见VUE 问题的理解

基于VUE源码的VUE响应式原理的理解

VUE通过Obsever实例化数据给对象本身，实例对象中的Dep属性用来收集依赖，通过Object.defineproperty把property全部转为getter和setter。在getter/seter内通过闭包引用dep常量追踪依赖。get函数的主要职责是返回正确的属性值和追踪依赖，set函数的职责是正确的为属性设置新值和触发依赖。每一个实例都对应一个watcher实例，当依赖项的seter/getter触发时会通知wacher，从而使它关联的数据重新渲染。在proxy之前VUE无法监听到对象属性的变化，VUE提供了$set 和 Vue.set方法让我们有能力给对象添加新属性的同时触发依赖，实际上触发的就是OB实例化对象中的dep()。对于数组VUE采用拦截数组本身方法的方式，在数组方法中触发依赖，从而实现监听数组的变化。proxy相对于defineproperty来说关心的是具体的key，对修改和读取Object.key进行拦截，而defineproperty关心的是Object本身

计算属性

计算属性就是用户定义的computed对象，首先定义了watchers数组和computedWatchers为一个空对象，接下来会遍历用户传入的computed对象，获取到用户传入的函数作为这个计算属性的getter，然后为每个计算属性的key生成一个watcher放到watchers数组里，在初始化watcher会保存一个状态对象，使得计算属性实现惰性求值。之后调用defineComputed把计算属性代理到this下面，利用dep收集依赖，在求值的过程中就可以已通知到相关依赖。计算属性在计算的过程中首先会获取的计算属性当前的值和上次计算的值作比较，只有在值发生改变时才会触发视图的重新渲染，实现计算属性的缓存。

侦听属性

Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。计算属性适用于大多数场景，但是当需要执行异步操作或者开销比较大的操作时更推荐使用侦听属性

nextTick

通过nexttick调度视图异步更新。在Create()生命周期操作DOM时由于DOM还没有开始渲染，所以可以放在nexttike中执行。或者在某个数据变化后需要执行的操作也可以放在nexttick的回调中执行。

diff算法

Vue会用指针分别标记新旧头结点，和新旧尾结点，进行头尾尾头的交叉对比，如果经过对比没有匹配到，再把所有旧的节点的KEY作为一个映射，用新的节点的key寻找在旧的节点中可以复用的位置。然后把匹配指针不断向内收缩直到新旧节点的指针相遇。如果使用index作为Key的情况下，当组件重新排序时，本可以完全复用的组件由于Key值没有发生改变而值变了需要触发更耗费性能的更新过程；而且在删除节点的时候由于key值原因会删除错误的节点。

VUE 生命周期

首先进入beforCreat生命周期，在这个阶段会初始化props，methods，data，computed，watch。然后进入created阶段，编译template，生成ast抽象语法树，生成rander树，beforeMount阶段会进行渲染。使用上一步生成的rander树构建Vnode，通过createElement函数创建新的节点并且渲染到Dom节点中。如果有子组件会进入到子组件的生命周期当中。完成子组件的mounted之后才会进入到父组件的mounted生命周期。在（mounted）这个阶段已经可以访问Dom元素了。接下来是beforeupdate和update生命周期，组件中如果有props数据变更重新进行渲染。到updated为止，组件渲染更新流程完毕。组件在销毁之前的beforeDestory的生命周期中会清除一些组件之间的关系，关闭watcher等逻辑，然后进入deatory。

VUEX

VUEX是一个状态管理机制，由state view 和 action 构成，state负责管理状态 view 以声明的方式将 state 映射到视图，actions响应在view上的用户输入导致的状态变更。VUEX的核心容器是store，包含着应用中大部分的state。vuex的状态存储是响应式的，并且不能直接改变store中的状态。可以通过在全局注册VUEX的方式，使每一个组件都可以通过this.$store.state获取状态。getter相当于VUEX中的计算属性，当state中的状态发生变更时，getter也会自动重新进行计算。mutation是改变store中的状态的唯一方法。在组件中可以通过显示的提交mutation来变更store中的状态。需要注意的是mutation只能运行同步代码。action用来处理异步的变更，在组件中可以通过显示的dispatch进行触发。在action中通过commit mutation 进行变更状态。

VUE-router

vue的路由有两种模式，默认使用的是hash路由，改变路由时调用的是windows.history的pushState，replaceState api，回退是监听浏览器的popstate或者hash事件然后执行transitionTo方法。this.router.push本质上调用了内部的history。push的方法，计算出带hash值的新路径，执行transitonTo切换路由。初始化时router会被定义为一个响应式属性，所以router-view才能在router变化时重新渲染