1. 双向数据绑定原理(数据劫持方式)不同
Vue2 使⽤的是
Object.defineProperty()进⾏数据劫持，结合发布订阅的⽅式实现。
- 缺点
1.初始化的时候递归遍历会造成性能损失
2.新增或删除属性时需要用户使用Vue.set/delete这样的特殊api才能生效
3.对于es6中的Map,Set这些数据结构不支持等问题
Vue3 使⽤的是
Proxy代理，使⽤ref或者reactive将数据转化为响应式数据
- 优势
- Object.defineProperty是监听属性，只能拦截对象的属性访问和修改。Proxy 可以对整个对象监听，可以拦截对象的所有操作。
- 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
- 可以监听数组，不用再去单独的对数组做特异性操作
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使用属性来分组，这样代码会更加简便和整洁。- v3可以使用各种组合式API 写法更接近于 React
- this基本不使用
- 都是通过hook的形式使用
- 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()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：
- 从vue引入reactive；
- 使用reactive() 方法来声明数据为响应性数据；
- 使用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函数只能是同步的不能是异步的。
