Vue的一些笔记

Vue是MVVM框架

• MVVM:Model-View-ViewModel缩写
• Model:代表数据模型
• View:UI组件
• ViewModel:View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据

Vue2.x响应式数据原理

• Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的watcher）
• 如果属性发生变化会通知相关依赖进行跟踪操作（发布订阅）

Vue3.x响应式数据原理

• Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数据的变化，并且多达13种拦截方法
• 并且作为新标准将受到浏览器厂商重点持续的性能优化
• Proxy只会代理对象的第一层：判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理，这样就实现了深度观测
• 监测数组的时候可能触发多次get/set，阻止方法：判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才可能触发

Vue2.x中如何监测数组变化

• 使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法
• 当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会数组中的引用类型再次递归遍历进行监控，这样就实现了监测数组变化

nextTick的实现原理

• 在下次DOM更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用Promise\MutationObserver\setImmediate,如果以上都不行则采用setTimeout
• 定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列

Vue的生命周期

• beforeCreate:new Vue()之后触发的第一个钩子，在当前阶段data\methods\computed以及watch上的数据和方法都不能被访问
• created:完成了数据观测，可以使用数据，更改数据，在这里更改数据不会触发updated函数
• beforeMount:虚拟Dom已经完成，开始渲染，更改数据，在这里更改数据不会触发updated函数
• mounted:挂载完成
• beforeUpdate:发生更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染
• updated:发生在更新完成之后，当前阶段组件Dom已完成更新
• beforeDestroy：在当前阶段实例完全可以被使用
• destroyed:实例销毁之后

请求接口放在生命周期的位置

• 一般放在mounted中，但需要注意的是服务器端渲染时不支持mounted，需要放到created中。

v-model的原理

• v-model本质就是一个语法糖，可以看成是value+input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。
• 原生的v-model，会根据标签的不同生成不同的事件和属性

Vue事件绑定原理

• 原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的

Vue模板编译原理

• Vue的编译过程就是将template转化为render函数的过程
• 经历阶段：
  1. 生成AST树：解析模板，生成AST语法树（一种用JavaScript对象的形式来描述整个模板）。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
     Vue的数据时响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。
  2. 优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点（静态节点）我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
  3. codegen:编译的最后一步就是将优化后的AST树转换为可执行的代码。

Vue2.x和Vue3.x渲染器的diff算法比较

• 简单来说，diff算法有一下过程
  1.同级比较，再比较子节点
  先判断一方有子节点一方没有子节点的情况（如果新的children没有子节点，将旧的节点移除）
  2.比较都有子节点的情况（核心 diff）
  递归比较子节点
  正常Diff两个树的时间复杂度是O(n^{3),但实际情况下我们很少会进行跨层级的移动DOM,所以Vue将Diff进行了优化，从O(n}3)->O(n),只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
• Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅
• Vue3借鉴了ivi算法和inferno算法
  在创建Vnode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升，该算法中还运用了动态规划的思想求解最长递归子序列

虚拟DOM以及key属性的作用

• 虚拟dom产生原因：由于浏览器中操作DOM是很昂贵的，频繁的操作DOM,会产生一定的性能问题。
• Vue2的Virtual DOM借鉴了开源库snabbdom的实现
• Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。（也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中）
• VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段
• key的作用是尽可能的复用DOM元素
  新旧children中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
  需要在新旧children的节点中保存映射关系，以便能够在旧children的节点中找到可复用的节点。key也就是children中节点的唯一标识。

keep-alive

• keep-alive可实现组件缓存，当组件切换时不会对当前组件进行卸载。
• 常用的两个属性include/exclude，允许组件有条件的进行缓存
• 两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。
• keep-alive的中还运用了LRU(Least Recently Used)算法

Vue中组件生命周期调用顺序

• 组件的调用顺序都是先父后子，渲染完成的顺序是先子后父
• 组件的销毁操作是先父后子，销毁完成的顺序是先子后父
• 加载渲染过程
  父beforeCreated->父-created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程
  父beforeUpdate->父updated
  销毁过程
  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

SSR

• SSR：服务端渲染，将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
• SSR有着更好的SEO、并且首屏加载速度更快等优点。缺点：开发条件会受到限制
• 服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理
• 服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

Vue方面的性能优化

• 编码阶段
  1. 尽量减少data中的数据，data中的数据都会增加getter和setter,会收集对应的watcher
  2. v-if和v-for不能连用
  3. SPA页面采用keep-alive缓存组件
  4. 在更多的情况下，使用v-if替代v-show
  5. key保证唯一
  6. 使用路由懒加载、异步组件
  7. 长列表滚动到可视区域动态加载
• SEO优化：预渲染、服务器端渲染 SSR
• 打包压缩：压缩代码、Tree Shaking、多线程打包（happypack）、抽离公共文件（splitChunks）、sourceMap优化
• 用户体验：骨架屏、PWA等