vue2和vue3的区别详解

一、数据双向绑定的原理

1.1、vue2双向绑定的原理

vue2的双向绑定是通过Object.defineProperty()对数据进行劫持。
缺点：
（1）无法监测到对象属性的动态添加和删除。
（2）无法监测到数组下标的变化，即直接通过数组的下标给数组设置值时不能实时响应。
vue2双向绑定的原理

1.2、vue3双向绑定的原理

vue3使用Proxy直接可以劫持整个对象，并返回一个新对象。

二、定义变量和方法

2.1、vue2定义变量和方法

使用选项类型API（Options API），将同等属性（data、methods）的数据定义在一起

export default {
  name: 'App',
  data(){
    return {
      // 定义变量
      message:"hello"
    }
  },
  methods:{
    // 定义方法
    test(){}
  },
  created(){

  }
}

2.2、vue3定义变量和方法

使用合成型API（Composition API）可以根据功能模块将同一逻辑的变量和方法放在一起，增强了代码可读性。
在setup（）中声明的变量和方法需要return。

import {ref,onMounted} from 'vue';
setup(()=>{
  // 定义变量和方法
  const message = ref("hello");
  function test(){

  }
  onMounted(()=>{

  })
  return {
    message,
    test,
  }
})

三、生命周期

3.1、vue2和vue3生命周期的对照图

vue2	vue3
	setup
beforeCreate		组件创建之前
created		组件创建之后
beforeMount	onBeforeMount	组件挂载到页面之前
mounted	onMounted	组件挂载到页面之后
beforeUpdate	onBeforeUpdate	组件更新之前
updated	onUpdated	组件更新之后
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁之后

vue3中setup的生命周期在vue2中的beforeCreate之前。而且Vue3的生命周期在调用前需要先进行引入。

四、异步组件

Vue3提供了异步组件，运行程序在等待异步组件加载完成前渲染兜底的内容。

<tempalte>
  <suspense>
    <template #default>
      <Test/>
    </template>
    <template #fallback>
      <div>
        Loading...
      </div>
    </template>
  </suspense>
</template>

异步组件确保在加载状态时显示fallback插槽内容，加载完异步内容时显示default默认插槽。

五、Teleport

Vue3提供Teleport组件可以将一个组件的一部分“传送”到指定DOM元素下。

<button @click="showToast" class="btn">打开弹框</button>
<teleport to="#target" :disabled="isDisabled">
    <div v-if="visible" class="toast-wrap">
        内容
    </div>
</teleport>
<div id="target">
</div>

teleport的to属性指要传送到的目标DOM下，disabled控制什么时候传送
另外，需要注意：要确保to的目标DOM在“”传送“”之前挂载