共计 2192 个字符，预计需要花费 6 分钟才能阅读完成。
vue2 和 vue3 的不同点
vue2 基于 defineProperty 的 getter,setter 来实现的
vue3 基于 es6 的 proxy(), 解决了对象新增属性，数组值变动视图不更新等问题。
选项式 api 不同点
全局 API 利用实例 vue2 没有 app 的概念，有些办法间接放在了全局中，比方 Vue.component。vue3 引入了 app 的概念
import{createApp}from'vue'
const app =createApp({})
app.component("xx")弃用 EventBus$on，$off 和 $once
实例办法已被移除，组件实例不再实现事件触发接口。
所以，eventbus 不能用了。改成 tiny-emitter。
用法如下：
import emitter from '@ali/act-util/emitter';
emitter.emit('xx',()=>{});
emitter.on('xx',()=>{});
emitter.off('xx')nextTick
不再能在全局 this.$nextTick 中取到（undefined is not a function）
import {nextTick} from 'vue'
nextTick(() => {// 一些和 DOM 无关的货色})Data 选项
不再反对间接用 object 类型定义属性。只能通过 function 返回 object 的形式。此外，当来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作当初将被浅层次地执行。不要再用 mixin 了，改成用组合式 api 开发。
v-if 与 v-for 的优先级比照
vue2.x 里 v -for 会优先作用，vue3.x 里 v -if 会优先作用。
slot
slot 不能放在 div 上，必须放在 template 上。
//vue2
<div slot="content">
</div>
//vue3
<template v-slot:content>
</template>Transition 的 css 名称
v-enter 改成 v -enter-fromv-leave 改成 v -leave-from
移除
过滤器 filters 从 vue 3.x 开始，过滤器已移除，且不再反对。
this.$set()从 vue 3.x 开始，因为有 proxy 了，所以不能再用 this.$set()给对象加 kv 了。$on，$off 和 $once 新增 emits 确保所有组件都应用 emits 选项记录其事件。
<script>
data() {
return {myNum: 999}
},
emits: ['submit'],
template: `<div @click="$emit('submit', 89)">
小明
</div>`
</script>组合式 api
响应式 API：外围
improt {ref,computed} from ‘vue’;
ref() 对于 data 里定义的值 js 里用须要家 xx.value。template 间接用 xx 即可。
computed(()=>{}) 计算属性
reactive（）包一层响应式对象，扭转对象值和 ref 值都双向扭转
readonly（）承受一个对象 (不论是响应式还是一般的) 或是一个 ref，返回一个原值的只读代理 watchEffect（）做异步操作的
const stop = watchEffect(async (onCleanup) => {const { response, cancel} = doAsyncWork(id.value)
// `cancel` 会在 `id` 更改时调用
// 以便勾销之前
// 未实现的申请
onCleanup(cancel)
data.value = await response
})
stop();<script setup>
<script setup> 是在单文件组件 (SFC) 中应用组合式
API 的编译时语法糖。
<script setup> 范畴里的值也能被间接作为自定义组件的标签名应用
<template>
<Child/>
</template>
<script setup>
import Child from './Child.vue'
</script>defineProps() 和 defineEmits()
为了在申明 props 和 emits 选项时取得残缺的类型推导反对，咱们能够应用 defineProps 和 defineEmits API，它们将主动地在 <script setup> 中可用
<script setup>
const props = defineProps({foo: String})
const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>顶层 await
<script setup> 中能够应用顶层 await。后果代码会被编译成 async setup()：
<script setup>
const post = await service.index().catch(() => false)
<script>参考文档：
vue3 官网：https://cn.vuejs.org/api/application.html
从 vue2 迁徙：https://v3-migration.vuejs.org/
tint-emitter：https://github.com/scottcorgan/tiny-emitter
vue 全家桶：https://vue3js.cn/
