vue2.0和vue3.0区别

一.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：

1可直接监听数组类型的数据变化
2监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
3可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
4直接实现对象属性的新增/删除

二.重构 Virtual DOM

1模板编译时的优化，将一些静态节点编译成常量
2slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
3模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）
4.代码结构调整，更便于Tree shaking，使得体积更小
5.使用Typescript替换Flow

三.新增Composition API，更好的逻辑复用和代码组织  

为什么要新增Composition API，它能解决什么问题？

Vue2.0中，随着功能的增加，组件变得越来越复杂，越来越难维护，而难以维护的根本原因是Vue的API设计迫使开发者使用watch，computed，methods选项组织代码，而不是实际的业务逻辑。
另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用，虽然可以minxis完成逻辑复用，但是当mixin变多的时候，会使得难以找到对应的data、computed或者method来源于哪个mixin，使得类型推断难以进行。
所以Composition API的出现，主要是也是为了解决Option API带来的问题，第一个是代码组织问题，Compostion API可以让开发者根据业务逻辑组织自己的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他自己写的代码时，他可以更好的利用代码的组织反推出实际的业务逻辑，或者根据业务逻辑更好的理解代码。
第二个是实现代码的逻辑提取与复用，当然mixin也可以实现逻辑提取与复用，但是像前面所说的，多个mixin作用在同一个组件时，很难看出property是来源于哪个mixin，来源不清楚，另外，多个mixin的property存在变量命名冲突的风险。而Composition API刚好解决了这两个问题。

 四.生命周期

1、vue2的生命周期

 

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

 2、vue3的生命周期

在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。

除去 beforeCreate 和 created 之外，在我们的 setup 方法中，有9个旧的生命周期钩子，我们可以在setup 方法中访问。

1.setup() 页面创建之前执行的函数。所以整个面用setup()函数来初始化参数

2. onBeforeMount：页面渲染之前执行；onMounted： 页面渲染时；

3. onBeforeUpdate：页面更新之前；onUpdated：页面更新之后；

4. onBeforeUnmount：页面销毁之前；onUnmounted：页面销毁之后；

我们导入它们并在我们的代码中访问它们

import { 
onBeforeMount, 
onMounted, 
onBeforeUpdate, 
onUpdated, 
onBeforeUnmount, 
onUnmounted, 
onActivated, 
onDeactivated, 
onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

从Vue2转换到Vue3

这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们。

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

新的调试钩子函数

我们还可以在Vue3中使用两个全新的钩子函数来进行调试。他们是：

• onRenderTracked
• onRenderTriggered

这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖项导致组件重新呈现
  }
}