Vue Composition API重点

Vue Composition API重点汇总

1.1 小例子

<template>
  <button @click="increment">
    Count is: {
  { state.count }}, double is: {
  { state.double }}
  </button>
</template>

<script>
import {
     reactive, computed } from 'vue'

export default {
    
  setup() {
    
    const state = reactive({
    
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
    
      state.count++
    }

    return {
    
      state,
      increment
    }
  }
}
</script>

示例来源

1.2 目标

目前存在的问题

经验所得，Vue当前API会带来以下两类编程模型的限制：

1. 复杂组件的代码逻辑较为难以推理，代码可读性不高。在某些情况下，通过逻辑考虑来组织代码更有意义。
2. 缺少用于多个组件之间的提取和重用逻辑的简洁机制。

所以为在组织代码时给用户提供更大的灵活性，有以下目标：

1. 可以将代码组织为每个函数都处理特定功能的函数，而不必总是通过选项来组织代码。
2. API使在组件之间，甚至外部组件之间，提取和重用逻辑变得更加简单。

1.3 详细设计

API介绍

• Reactive State and Side Effects
  声明一些变量

import {
    reactive } from 'vue'

// reactive state
const state = reactive({
   
  count: 0
})

reactive与Vue.observable()2.x 中的当前API 等效，返回的state是所有Vue用户都应该熟悉的反应性对象。

Vue中反应状态的基本用例是我们可以在渲染期间使用它。由于依赖关系跟踪，当反应状态更改时，视图会自动更新。
在DOM中渲染某些内容被视为“副作用”：我们的程序正在修改程序本身（DOM）外部的状态。要应用并基于反应状态自动重新应用副作用，我们可以使用watchAPI：

import {