入门vue3 必要知道的一些事情

入门vue3 必要知道的一些事情

写在前面的话

尤雨溪发布了VUE3.0.2版本，而我因为工作的量太大等各种原因，姗姗来迟,本人通过vue2 和vue3 对比 快速了解和认识和上手!

先说说vue2

响应原理

使用Object.defineProperty方法实现响应式数据， Object.defineProperty 将对象属性转化为 getter/setter。Object.defineProperty 有缺点就是无法监控到数据的下标变化，从而导致了无法通过数组的下标来修改数组值，无法相应。 原理可以用官网的一张图更能形象说明！

数据变化图

tips: 该属性是 ES5 中无法被 shim 的特性，也是 vue 不支持 IE8 及以下版本浏览器的原因。

缺点

对于数组的下标和length属性的变更无法检测到
对于对象属性的动态添加和删除无法检测到
不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。

如何解决这些缺点

在vue种通过提供一个 $set 给对象动态添加属性，这个属性在vue种经常用到，特别的表单中的联动中，既然有添加，当然想对应也有删除，$delete 动态删除对象属性，在$set和$delete的时候都会触发watcher，而这个对象的所有 watcher 都会重新运行。
对于数组，就比较笨拉，就是重写数组方法，通过检测数组的变更来处理

生命周期

beforeCreate,create, beforeMount,mount, beforeUpdate,update, beforeDestory,destory,每个生命周期做的一些事情，通过光网的一张图，更一目了然。

虚拟DOM diff原理

具体的介绍请点击这里,多余的就不多数拉，主要还是介绍vue3

下面就是接下来的重点，vue3的亮相

尤雨溪大神为什么在vue2的下个版本，进行大的改变呢？为什么去重写vue呢？有两个因素点： 1. 主流浏览器对新的 JavaScript 语言特性的普遍支持。2. Vue 代码库随着时间的推移而暴露出来的设计和体系架构问题。

我们都知道vue 的特点就是数据的双向绑定，模板和组件化等特点，而vue3 也就是针对这些进行了一个大的改变和重新设计。

相对一数据来书， 只会对「被用于渲染初始可见部分的数据」创建观察者，而且只有依赖那个属性的 watcher 才会重新运行，而不是所有的，所以更高效，更快。

vue3新特性

• 数据响应重新实现（ES6的proxy代替Es5的Object.defineProperty）

• 源码使用ts重写，更好的类型推导

• 虚拟DOM新算法（更快，更小）

• 提供了composition api，为更好的逻辑复用与代码组织

• 自定义渲染器（app、小程序、游戏开发）

• Fragment，模板可以有多个根元素

响应原理

通过proxy实现响应式数据，我们都知道Proxy时Es6 的一个属性（ie系列却还是不兼容），也就时“代理”的意思，就想nginx 一样，通过“代理”，各种操作，通过msdn 中我们了解到Proxy 可以让我们能够以简洁易懂的方式控制外部对对象的访问。由此可见，采用ES2015的Proxy，不但解决了vue2.x中的问题，还是得性能有了进一步提升。虽然有一些兼容问题，但是通过适配的方式解决掉了。此外，还暴露了observable的api来创建响应式对象，可以替代掉event bus，来做一些跨组件的通信。

优点：

可以检测到代理对象属性的动态新增和删除

可以见到测数组的下标和length属性的变化

缺点：

es6的proxy不支持低版本浏览器 IE11

回针对IE11出一个特殊版本进行支持

虚拟DOM diff原理

在Vue3使用适当的 AST 转换管道重写编译器，这允许我们以转换插件的形式将编译时（compile-time）优化组合进来。首先，在 DOM 树级别。我们注意到，在没有动态改变节点结构的模板指令（例如 v-if 和 v-for）的情况下，节点结构保持完全静态。如果我们将一个模板分成由这些结构指令分隔的嵌套“块”，则每个块中的节点结构将再次完全静态。当我们更新块中的节点时，我们不再需要递归遍历 DOM 树 - 该块内的动态绑定可以在一个平面数组中跟踪。这种优化通过将需要执行的树遍历量减少一个数量级来规避虚拟 DOM 的大部分开销。其次，编译器积极地检测模板中的静态节点、子树甚至数据对象，并在生成的代码中将它们提升到渲染函数之外。这样可以避免在每次渲染时重新创建这些对象，从而大大提高内存使用率并减少垃圾回收的频率。最后，在元素级别。编译器还根据需要执行的更新类型，为每个具有动态绑定的元素生成一个优化标志。例如，具有动态类绑定和许多静态属性的元素将收到一个标志，提示只需要进行类检查。运行时将获取这些提示并采用专用的快速路径。

其他

Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
v-model代替以前的v-model和.sync
vue3中v-model的用法

完善中…