【Vue3】组合式API

为什么要用组合式API呢

• 用原始方式写，业务逻辑会过于分散；
• 使用组合式API，可以把同一业务逻辑的代码放在一起；

使用组合式API写代码

1、所有逻辑都放在setup函数，它的第一个参数是props对象（setup函数中的props是响应式的，不能用ES6解构，会消除prop的响应性）setup文档
2、通过ref、reactive、toRef来创建响应式数据；
3、视图要用到的变量、方法为setup函数返回的对象属性；
4、watch、computed是个函数；
5、生命周期钩子写法微调，xyz变成onXyz，比如mounted变成onMounted，而且created和beforeCreate不再需要，这是因为setup函数本身就是围绕created和beforeCreate来进行的，所以不需要再定义它们，这两个钩子里编写的任何代码都直接写在setup函数里即可；

setup函数中要使用context.emit（context是setup的第二个参数），不能在setup函数里使用this.$emit，你可以在methods里使用this.$emit，但是我们以后在vue3中尽量不使用methods，要使用setup；

响应式API

ref

• ref和reactive一样, 也是用来实现响应式数据的，不过它是传递一个简单值
• ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成ref(xx) -> reactive({value:xx})；
• 在JS中我们要用xx.value，但是在HTML模板中，直接使用xx

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive

传递一个对象，把它变成响应式数据（结合toRef代码一起看）

toRef

为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

const state = reactive({
 foo: 1,
 bar: 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref；
一般用于setup参数props的结构居多，比如：const {title} = toRefs(props)

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref,
  bar: Ref
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

image.png

• 响应式状态解构

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

完整示例