乐趣区

关于vue.js:Vue30新版API之compositionapi入坑指南

jiezi

对于 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

ref

下面计算属性返回计算结果是什么？如果咱们猜想一下外部是如何实现 computed 的，咱们可能会得出这样的论断

function computed(getter) {
  let value
  watchEffect(() => {value = getter()
  })
  return value
}

然而咱们晓得这是行不通的: 如果 value 是一个相似 number 的根本类型，那么一旦返回，它与 computed 外部的更新逻辑的连贯就会失落。这是因为 JavaScript 根本类型是按值传递的，而不是按援用传递的
当一个值作为属性调配给一个对象时，同样的问题也会产生。如果被赋为属性或从函数返回时，反馈值不能放弃其响应性，那么它就没有多大用处。为了确保咱们总是能够读取计算的最新值，咱们须要将理论值包装在一个对象中，而后返回该对象

function computed(getter) {
  const ref = {value: null}
  watchEffect(() => {ref.value = getter()
  })
  return ref
}

所以要拿到 ref 与 computed 的值应该是那返回值上面的 value

let count = ref(1)

console.log(count.value) // 1

let double = computed(() => count.value * 2) // 2

值得注意，当咱们在 template 外面应用 ref 或者 computed 的时候，vue 会主动把它们用 reactive 解决无需用 count.value 或者 double.value 的值，既 <div>{{count}} {{double}}</div> 即可

toRefs

toRefs API 提供了一个办法能够把 reactive 的值解决为 ref

生命周期的 hooks

办法与 option api 基本一致

import {onBeforeMount, onMounted, reactive, 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)
      })
      
      onMounted(() => {document.title = 'hello'})
      return {
        state,
        increment
      }
    }
}

最初讲讲对于应用 composition api 如何组织代码

往往是把一个性能的所有状态、办法、都封装到一个函数外面，不便对立治理，如果你依照这种形式来写代码，那么代码的构造大抵如下

export default {setup() {// ...}
}

function useCurrentFolderData(networkState) {// ...}

function useFolderNavigation({networkState, currentFolderData}) {// ...}

function useFavoriteFolder(currentFolderData) {// ...}

function useHiddenFolders() { // ...}

function useCreateFolder(openFolder) {// ...}

当咱们哪个性能须要再其余组件被复用的时候，间接把相干的办法提取进来，而后再援用进来就能够了

能够看出 composition api 的面向人群次要是常常写轮子或者框架的开发者，因为他更灵便，能够写出高内聚、低耦合的代码

应用 vue3 的过程中也不是肯定要用 composition api 的，如果业务不是很简单应用 option api 也是没什么问题的。

退出移动版