1. 双向数据绑定原理(数据劫持方式)不同

Vue2 使⽤的是Object.defineProperty()进⾏数据劫持，结合发布订阅的⽅式实现。

• 缺点
  1.初始化的时候递归遍历会造成性能损失
  2.新增或删除属性时需要用户使用Vue.set/delete这样的特殊api才能生效
  3.对于es6中的Map,Set这些数据结构不支持等问题

Vue3 使⽤的是Proxy代理，使⽤ref或者reactive将数据转化为响应式数据

• 优势
  1. Object.defineProperty是监听属性，只能拦截对象的属性访问和修改。Proxy 可以对整个对象监听，可以拦截对象的所有操作。
  2. 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
  3. 可以监听数组，不用再去单独的对数组做特异性操作

2. 是否支持碎片

• vue2不支持碎片
• vue3支持碎片（Fragments） ，就是说可以拥有多个根节点。

3. 组件模板是否有唯一顶层元素的限制

• vue2要求必须有一个唯一的顶层元素包裹

<template>
   <div>
        <h1>第三界面</h1>
        <button>测试 </button>
   </div>
</template>

• vue3没有

<template>
        <h1>第三界面</h1>
        <button>测试 </button>
</template>

3. API类型不同

• vue2：
  vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。
• vue3：
  vue3使用组合式api，数据和⽅法都定义在setup中，并统⼀进⾏return{} ,相比于旧的api使用属性来分组，这样代码会更加简便和整洁。
  1. v3可以使用各种组合式API 写法更接近于 React
  2. this基本不使用
  3. 都是通过hook的形式使用
  4. setUp的使用

import {useRoute,useRouter} from "vue-router"  路由
import { onMounted, reactive ,defineProps,defineEmits,useContext} from "vue";  
import {useStore} from 'vuex'   //存储
const store = useStore()
 Object.assign(userInfo, res.data);
 console.log("userInfo", userInfo);
  store.commit("updateUserInfo",userInfo)

//响应式数据
 let res = reactive({
        list1:[]
    })
// 钩子
onMounted(() => {
  
})
//插槽 组件上的属性
const {slots,attrs} = useContext()
// props   组件传参
const props = defineProps({
  num: Number,
});
//事件 触发
const emit = defineEmits(["change"]);
let changeNum = () => {
  emit("change", 10);
};
let route = useRoute()
let router = useRouter()

4. 定义数据变量和方法不同

• vue2：vue2是把数据放入data中，创建的方法要在methods
  中。
• vue3：vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：
  1. 从vue引入reactive；
  2. 使用reactive() 方法来声明数据为响应性数据；
  3. 使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

5. 生命周期钩子函数不同

vue2中的生命周期：

• beforeCreate 组件创建之前
• created 组件创建之后
• beforeMount 组价挂载到页面之前执行
• mounted 组件挂载到页面之后执行
• beforeUpdate 组件更新之前
• updated 组件更新之后

vue3中的生命周期：

• setup 开始创建组件前

• onMounted()
• onUpdated()
• onUnmounted()
• onBeforeMount()
• onBeforeUpdate()
• onBeforeUnmount()
• onErrorCaptured()
• onRenderTracked()
• onRenderTriggered()
• onActivated()
• onDeactivated()
• onServerPrefetch()

• 而且vue3.x 生命周期在调用前需要先进行引入。

• 废弃了beforeCreate和created，用setup

• 废弃了beforeDestroy 用beforeUnmount

• 废弃了destroyed 用unmounted

6. 父子传参不同

• vue2：
  获取props:console.log(‘props’,this.xxx)
  给父组件传值emit :this.$emit()
• vue3：
  获取props:setup(props,context){ console.log(‘props’,props) }
  给父组件传值emit :setup(props,context){context.emit()}

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

// 与 setup() 上下文对象中的其他属性一样，emit 可以安全地被解构：

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

7. 指令不同

• vue2：
  v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。
• vue3：
  vue3中v-if比v-for优先级高；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

8、main.js文件不同

• vue2：
  • vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。
  • v2 el挂载

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• vue3：
  • vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。
  • v3 mount 挂载

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

9. 支持TS

• vue2 no
• vue3 yes

10. Diff 算法的提升

vue3 在 vue2 的 diff 算法的基础上增加了静态标记，元素提升和事件缓存等优化。使得速度更快。

11. 打包体积变化

vue2 官方说的运行时打包师 23k，但这只是没安装依赖的时候，随着依赖包和框架特性的增多，有时候不必要的，未使用的代码文件都被打包了进去，所以后期项目大了，打包文件会特别多还很大。

在 Vue 3 中，我们通过将大多数全局 API 和内部帮助程序移动到 Javascript 的 module.exports 属性上实现这一点。这允许现代模式下的 module bundler 能够静态地分析模块依赖关系，并删除与未使用的 module.exports 属性相关的代码。模板编译器还生成了对树抖动友好的代码，只有在模板中实际使用某个特性时，该代码才导入该特性的帮助程序。

尽管增加了许多新特性，但 Vue 3 被压缩后的基线大小约为 10 KB，不到 Vue 2 的一半

12. vue3新增组件

• <Teleport>
  Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”
  在vue2中，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难
  通过Teleport，我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它

<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
</teleport>

• <Suspense>
  <Suspense> 可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。

13. vue3 setup()函数特性

• setup()函数接收两个参数：props、context(包含attrs、slots、emit)。
• setup函数是处于生命周期beforeCreated和created俩个钩子函数之前。
• 执行setup时，组件实例尚未被创建（在setup()内部，this不会是该活跃实例得引用，即不指向vue实例，Vue为了避免我们错误得使用，直接将setup函数中得this修改成了undefined）。
• 与模板一起使用时，需要返回一个对象。
• 因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解构，因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。
• 在setup()内使用响应式数据时，需要通过 .value 获取。
• 从setup() 中返回得对象上得property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加.value。
• setup函数只能是同步的不能是异步的。