美文网首页
vue3 Composition Api

vue3 Composition Api

作者: iCherries | 来源:发表于2021-09-09 21:40 被阅读0次

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

相关文章

网友评论

      本文标题:vue3 Composition Api

      本文链接:https://www.haomeiwen.com/subject/yrpwwltx.html