Vue3 - Composition API

Vue3 - Composition API

前言：Composition API 官网的解释是，一组附加的，基于函数的api，允许灵活组合组件的逻辑。本文首先讲述vue3相比vue2变更的地方，然后再逐一讲解常用的Cmposition API。

篇幅较长，如果想直接查看composition api，而不想看vue3与vue2的变更, 点这里

安装指引

下面讲述vue3如何安装和使用：

安装

vite

npm init vite-app hello-vue3 # 或者 yarn create vite-app hello-vue3

vue-cli v4.5.0 以上版本

npm install -g @vue/cli # 或者 yarn global add @vue/cli
vue create hello-vue3
# 然后选择vue3的预设

使用

import {
      createApp } from 'vue'
import MyApp from './MyApp.vue'

const app = createApp(MyApp)
app.mount('#app')

Vue2 与 Vue3 的差异

下面讲述Vue3破坏性变更的地方

全局API

全局api已迁移至 createApp()创建的实例下

2.x全局API	3.x实例API（app）
Vue.config.production	已经删除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use

use

const app = createApp(MyApp)
app.use(VueRouter)

component & directive

const app = createApp(MyApp)

app.component('button-counter', {
     
  data: () => ({
     
    count: 0
  }),
  template: 'Clicked {
     { count }} times.'
})

app.directive('focus', {
     
  mounted: el => el.focus()
})

app.mount('#app')

provide & inject

// 在入口文件
app.provide('guide', 'Vue 3 Guide')

// 在子组件中
export default {
     
  inject: {
     
    book: {
     
      from: 'guide'
    }
  },
  template: `
{
      { book }}
`
}

plugin

const plugin = {
     
  install: app => {
     
    app.directive('focus', {
     
        mounted: el => el.focus()
    })
  }
}

tree shaking

tree shaking主要作用是打包项目时会将用不到的方法不打包进项目中，这样得以优化项目体积。

import {
      nextTick } from 'vue'

nextTick(() => {
     
  // something DOM-related
})

以前的api改为es模块导入，以及vShow，transition等内部助手方法，都启用了摇树优化（tree shaking），只有实际用到的才会被打包进去。

模板指令

下面讲述模板指令相关破坏性变更的地方：

v-model

v-model prop 和 event 默认的名称已经更改

<ChildComponent v-model="pageTitle" />




<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

同时，v-model.sync的修饰符也已经删除, v-model支持绑定不同的数据，可以作为其替代。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />



<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

key

1. key在v-if/v-else/v-else-if 分支上不再需要，因为vue会自动生成唯一key
2. 如果你手动提供key，则每个分支必须使用唯一key，你不再可以有意使用它来强制重用分支。