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

39次阅读

共计 2192 个字符，预计需要花费 6 分钟才能阅读完成。

vue2 基于 defineProperty 的 getter,setter 来实现的
vue3 基于 es6 的 proxy(), 解决了对象新增属性，数组值变动视图不更新等问题。

全局 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：外围
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();

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

正文完