关于vue3:从vue2到vue3的学习之路手稿

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>

<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/