浅谈Vue3.0新版API之composition-api入坑指南

关于VUE3.0

由于vue3.0语法跟vue2.x的语法几乎是完全兼容的，本文主要介绍了如何使用composition-api，主要分以下几个方面来讲

使用vite体验vue3.0
composition-api解决了什么问题
语法糖介绍

vite的安装使用

vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程，按照步骤安装即可

composition-api解决了什么问题

使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的

语法糖介绍

compositon-api提供了一下几个函数

reactive
watchEffect
computed
ref
toRefs
生命周期的hooks

reactive

 import { reactive, computed } from 'vue'
 export default {
  setup() {
   const state = reactive({
    count: 0
   })
   function increment() {
    state.count++
   }
   return {
    state,
    increment
   }
  }
 }

Reactive 相当于当前的 Vue.observable () API，经过reactive处理后的函数能变成响应式的数据，类似于option api里面的data属性的值

watchEffect

import { reactive, computed, watchEffect } from 'vue'
export default {
  setup() {
   const state = reactive({
    count: 0
   })
   const double = computed(() => state.count * 2)
   function increment() {
    state.count++
   }
   watchEffect(() => {
    console.log(double.value)
   })
   return {
    state,
    increment
   }
  }
}

Vue 中检测状态变化的方法，我们可以在渲染期间使用它。 由于依赖关系跟踪，当反应状态发生变化时，视图会自动更新。 在 DOM 中呈现某些内容被认为是一种“副作用” : 我们的程序在程序本身(DOM)之外修改状态。 要应用并自动重新应用基于反应状态的副作用，我们可以使用 watchEffect API

computed

import { reactive, computed } from 'vue'
export default {
  setup() {
   const state = reactive({
    count: 0
   })
   const double = computed(() => state.count * 2)
   function increment() {
    state.count++
   }
   return {
    state,
    increment
   }
  }
}

有时我们需要依赖于其他状态的状态——在 Vue 中，这是通过计算属性来处理的。 要直接创建一个计算值，我们可以使用computed API