vue2.X老项目使用组合式API

现在vue已经发布了vue3的版本，其中组合式api使其具有更好的逻辑复用和代码组织能力，对于2X版本使用Option-api的优势还是很明显的，但是维护几年的代码直接升级3X版本的工作量还是很大的，只能边加边改，这样就用到了@vue/compositon-api了。

安装

npm install @vue/composition-api
# or
yarn add @vue/composition-api

使用

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

// 在组件中
import { ref, reactive } from '@vue/composition-api'

setup

setup 函数是一个新的组件选项，在组件的入口处使用，执行早于 onBeforeMount，setup函数带有两个参数，props 和 attr

image.png
image.png

props为父组件传入的属性，attr 为上下文内容，可以解构出root， root为 Vue实例

setup(porps, attrs) {
  const {root} = attrs;
  console.log(attrs)
}

image.png

@vue/compositon-api 中常用 API 介绍

reactive

reactive 几乎等价于 2.x 中现有的 Vue.observable() API，且为了避免与 RxJS 中的 observable 混淆而做了重命名。这里返回的 state 是一个所有 Vue 用户都应该熟悉的响应式对象。但是在Vue3中，reactive 会返回一个新的的代理对象，解构会使数据失去响应式，可使用 toRefs 使其具有相应式

image.png

ref

ref可以定义基本类型和引用类型，reactive更多的为定义引用类型。

image.png

在 代码中使用 ref定义的值时，需要添加 .value， 在模版中不需要

ref 也可以定义 ref 节点

image.png
image.png

computed

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象

image.png

watch

watch 完全等效于 this.$watch，但可以同时监听多个源

watch(() => state, (val, old) => {
  console.log(val, old)
},{
  deep: tue,  // 深度监听
  immediate: true  // 立即执行
})

watch([state, name, age], (val, old) => {
  console.log(val, old) // val 和 old 为数组，对应 state, name, age 的新旧值
})

provide 和 inject

使用 provide 和 inject 可以实现跨组件传值

//父组件
import {provide, ref} from '@vue/composition-api'
export default {
  setup() {
    // 使用 ref 可以使数据具有相应式
    provide('msg', ref('hello 小灰灰'))
  }
}

// 子组件
import {inject} from '@vue/composition-api'
export default {
  setup() {
    // 父组件没有 provide('msg','xxx') 时，msg 会取 默认值
    const msg = inject('msg', '默认值')
  }
}

setup 中 attrs

在 vue 中，我们可能会使用到 vuex $nextTick $set $route等，这些都在 attrs 的 root 中

image.png