从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会优先作用。slotslot不能放在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-emittervue全家桶：https://vue3js.cn/