vue总结

原文地址

vue(前端框架)解决了什么问题？

现在的前端页面元素越来越多，结构也变得越来越复杂,当数据和视图混合在一起的时候对它们的处理会十分复杂，同时也很容易出现错误，而现代框架使用声明式语法，描述组件对象的嵌套关系，并自动生成与dom对象的对应关系
参考1

vue生命周期

vue生命周期	描述
beforeCreate	组件实力被创建,el和数据对象都为undefined，还未初始化
create	数据已经被初始化，并且初始化了Vue内部事件,但是DOM还未生成
befroeMount	完成了模板的编译。把data对象里面的数据和vue的语法写的模板编译成了虚拟DOM
mouted	执行了render函数，将渲染出来的内容挂载到了DOM节点上
beforeUpdate	组件更新之前:数据发生变化时，会调用beforeUpdate，然后经历DOM diff
updated	组件更新后
actived	keep-alive组件被激活
deactivated	keep-alive移除
beforeDestroy	组件销毁前
destroyed	组件销毁后

简述Vue的响应式原理

可以问数据变动如何和视图联系在一起？
Vue是采用数据劫持结合发布者-订阅者模式的方式, Vue相应系统有三大核心：observe,dep,watcher;精简版Vue代码参考

• Observe：当一个Vue实例创建时，initData阶段，vue会遍历data选项的属性（observe），用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖(dep)，在属性被访问和修改时通知变化。
• Compite：调用compile方法解析模版,当视图中有用到vue.data中数据的时候，会调用实例化watcher方法进行依赖收集
• Watcher：是Observer和Compile之间通信的桥梁，当视图中遇到绑定的数据时,在watcher方法中会获取这个数据，此时会触发observe中的getter方法，
• Dep：发布订阅模式,observe中数据的getter被触发时会收集依赖的watcher(dep.depend方法)
• 当有数据被改动时会触发observe中数据的setter，此时会调用dep.notify方法给所有订阅的watcher发通知（通过回掉方式）进行视图更新，此时会进行diff流程：

vue中data为什么必须要是一个函数

vue中的data为对象，是引用类型，当重用组件时，一个组件对data做了更改，那么另一个组件也会跟着改，而使用返回一个函数返回数据，则每次返回都是一个新对象，引用地址不用，所以就不会出现问题

Virtual DOM 是什么

虚拟DOM是一个JavaScript对象，包含了当前DOM的基本结构和信息，它的存在是为了减少对操作无用DOM所带来的性能消耗，在大量的、频繁的数据更新下能够对视图进行合理的高效的更新(细粒度的精准修改)，同时也抽象了原来的渲染过程，实现了跨平台的能力

简述vue中的DOM DIFF算法

精简源码；当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁(两个重要函数patchVnode和updateChildren)：

• 先判断根结点及变化后的节点是否是sameVnode，如果不是的化，就会创建新的根结点并进行替换

• 如果是sameVnode，则进入patchVnode函数，其基本判断

  1. 如果两个节点是相等oldVnode === vnode则直接return
  2. 如果新节点是文本节点，则判断新旧文本节点是否一致，不一致(oldVnode.text !== vnode.text)则替换
  3. 如果新节点不是文本节点，则开始比较新旧节点的子节点oldCh和ch：
  4. 如果子节点都存在，则进行updateChildren计算（稍后讲）
  5. 如果只有新子节点存在,则如果旧节点有文本节点，则移除文本节点，然后将新子节点拆入
  6. 如果只有旧子节点存在，则移除所有子节点
  7. 如果均无子节点且旧节点是文本节点，则移除文本节点（此时新节点一定不是文本节点）

• updateChildren函数做细致对比

  1. start && oldStart对比
  2. end && oldEnd对比
  3. start && oldEnd对比
  4. end && oldStart 对比
  5. 生成map映射，（key:旧子节点上的key，value:旧子节点在自己点中的位置）,根据key记录下老节点在新节点的位置（idxInOld）
     1) 如果找到了idxInOld,如果是相同节点则移动旧节点到新的对应的地方，否则虽然key相同但元素不同，当作新元素节点去创建
     2) 如果没有找到idxInOld，则创建节点
  6. 如果老节点先遍历完，则新节点比老节点多,将新节点多余的插入进去
  7. 如果新节点先遍历完，则就节点比新节点多,将旧节点多余的删除

vue中key的作用

主要是为了复用节点，高效的更新虚拟DOM，另外，在使用标签元素过渡效果时也会用到key

computed的原理

• vue对象初始化的同时对计算属性进行初始化initComputed,
• computed会对初始化的Watcher传入lazy: true就会触发Watcher中的watcher.dirty=true（dirty决定了当前属性是否更新）,
• 当视图中有对computed引用的时候会第一次执行计算属性，并将dirty设置为false,并将结果保存在this.value中进行缓存,
• 如果依赖没有更改，则下次获取computed会这直接返回this.value,只有当computed所依赖的属性发生变化时会将dirty设置为true，并重新计算

class Watcher{
  ……
  evaluate () {
    this.value = this.get()
    this.dirty = false
  }
  ……
}

class initComputed{
  …… 
  //计算属性的getter 获取计算属性的值时会调用
    createComputedGetter (key) {
      return function computedGetter () {
          //获取到相应的watcher
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
             //watcher.dirty 参数决定了计算属性值是否需要重新计算，默认值为true，即第一次时会调用一次
              if (watcher.dirty) {
                  /*每次执行之后watcher.dirty会设置为false，只要依赖的data值改变时才会触发
                  watcher.dirty为true,从而获取值时从新计算*/
                watcher.evaluate()
              }
              //获取依赖
              if (Dep.target) {
                watcher.depend()
              }
              //返回计算属性的值
              return watcher.value
        }
      }
    }
  ……
}

计算属性computed和watch的区别

计算属性顾名思义就是通过其他变量计算得来的，它的值是基于其所依赖的属性来进行缓存的,只有在其所依赖的属性发生变化时才会从新求值
watch是监听一个变量，当变量发生变化时，会调用对应的方法

对$nextTick的理解

vue实现响应式并不是数据一更新就立刻触发dom变化，而是按照一定的策略对dom进行更新，源码位置，原理：

• 首先会将所有的nextTick放到一个函数中，然后放在callbacks数组中，$nextTick没有传cb回掉，则返回一个promise

• 接下来就是callbacks的执行时机

  • 首先如果浏览器是否兼容promise，则用promise.resolve().then来执行callbacks
  • 如果浏览器兼容MutationObserver,则用实例化的MutationObserver监听文本变化来执行回掉，
  • 如果兼容setImmediate,则用setImmediate(cb)来执行回掉
  • 最后降级为用setTimeout(fn,0)来执行
• 在vue2.5.X版本中对于像v-on这样的DOM交互事件，默认走macroTimerFunc，也就是，跳过第一步promise的判断，

子组件为何不可以修改父组件传递的 Prop,是如何监控并给出错误提示的

• 单向数据流，易于监测数据的流动，出现了错误可以更加迅速的定位到错误发生的位置
• 在initProps时，会对props进行defineReactive操作，传入的第四个参数是自定义的set报错判断函数，该函数会在触发props的set方法时执行

// src/core/instance/state.js 源码路径
function initProps (vm: Component, propsOptions: Object) {
  ...
  for (const key in propsOptions) {
    if (process.env.NODE_ENV !== 'production') {
      ...
      defineReactive(props, key, value, () => {
        // 如果不是跟元素并且不是更新子元素
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })}
    ...
  }
}
// src/core/observer/index.js
export function defineReactive (obj,key,val,customSetter,shallow) {
  const property = Object.getOwnPropertyDescriptor(obj, key)
  
  const getter = property && property.get
  const setter = property && property.set
  
  Object.defineProperty(obj, key, {
    ...
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

父子组件的生命周期执行顺序

加载过程：父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件created => 子组件 beforeMount => 子组件mounted => 父组件mounted
更新过程：父组件beforeUpdate => 子组件beforeUpdate => 子组件updated => 父组件updated
销毁过程：父组件beforeDestroy => 子组件 beforeDestroy => 子组件 destoryed => 父组件 destoryed

vue-router的导航解析流程

官网

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

仅代表个人见解，能力有限，如有错误会误人子弟的地方欢迎留言指出；谢谢