vue3 Composition Api

一、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

1. 作用：vue3.x 通过 reactive 来赋予对象响应式的特性。

3、ref

1. 作用： 使用 ref 来赋予原始数据类型响应式的特性

4、readonly

1. 作用：使用 readonly 赋予对象响应式， 但是不能修改

5、toRefs

1. 作用：用于解构通过 reactive 生成的响应式对象，与 ES6 的解构不同， toRefs 解构之后，变量还会保持响应式。

6、toRef

1. 作用： 可用于单独解构 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>