vue3 Composition Api
2021-09-09 本文已影响0人
iCherries
一、Options API 和 Composition API
-
Options API
- 解释：在 vue2.x 中通过定义 data、computed、watch、methods 等属性与方法，共同处理页面逻辑。
- 优点：新手入门较容易。
- 缺点：
- 同一个逻辑的代码比较分散，项目一旦大起来，不易维护。
- 相同的逻辑虽然有 mixins 可以提取出去，但是 mixins 也存在较为明显的缺点，变量和方法的来源不明显，命名冲突等。
-
Composition API
- 解释：Composition API 可以根据页面逻辑功能来组织代码。
- 优点：提高代码的可读性和可维护性(高内聚，低耦合)，通过自定义 hook 更好的重用逻辑代码(相比 mixins 而言，不会发生命名冲突，来源明显)。
- 缺点：学习成本增加，需要改变 vue2.x 养成的思维方式。
-
25452979-76cda5626da825bc.jpg
二、认识 Composition API
1、setup 函数
1. 解释：
* 为了使用 Composition API 我们需要把所有的代码代码都写在 setup 函数中。
* setup 的作用实则就是代替之前所编写的大部分 Options API。
2. 参数：
* props：父组件传递过来的属性都会放在 props 对象中，在 setup 中使用的时候可以直接通过 props 参数获取（与 vue2.x 中的 props 基本一致）。
* context：上下文参数。它中包含了 4 个属性 attrs、slots、emit、expose
* attrs：所有非 props 的 attribute
* slots：父组件传递过来的插槽
* emit：组件发出事件
* expose：导出父级所需要的变量和方法
2、reactive
- 作用：vue3.x 通过 reactive 来赋予对象响应式的特性。
3、ref
- 作用： 使用 ref 来赋予原始数据类型响应式的特性
4、readonly
- 作用：使用 readonly 赋予对象响应式， 但是不能修改
5、toRefs
- 作用：用于解构通过 reactive 生成的响应式对象，与 ES6 的解构不同， toRefs 解构之后，变量还会保持响应式。
6、toRef
- 作用： 可用于单独解构 reactive 生成的响应式对象中的某个属性
7、computed、watch、watchEffect
代码演示
<template>
<button @click="addCount">加</button>
<button @click="subtractCount">减</button>
<h2>{{state.count}}</h2>
<h2>ref: {{countRef}}</h2>
<h2>toRefs: {{ count }}</h2>
<h2>toRef: {{name}}</h2>
</template>
<script>
import { defineComponent, reactive, defineExpose, ref, toRef, toRefs, computed， watch， watchEffect } from 'vue'
setup(props, { attrs, slots, emit, expose }) {
const state = reactive({ count: 0, name: 'cherries' })
const countRef = ref(0)
const name = toRef(state, 'name')
const { count } = toRefs(state)
const newCount = computed(() => {
return countRef.value + 10
})
watch(() => state.count, () => {
console.log("state.count 修改了")
})
watchEffect(() => {
console.log("state.count修改了--->", state.count)
})
const addCount = () => state.count ++
const subtractCount = () => state.count --
return { state, countRef, name, count, newCount， addCount，subtractCount }
}
</script>
