compositionAPI

最新推荐文章于 2024-10-13 14:09:17 发布

张小益达

最新推荐文章于 2024-10-13 14:09:17 发布

阅读量2.4k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41033913/article/details/106389669

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详述了Vue的Composition API，包括setup、ref、reactive、computed、watchEffect、watch等核心概念的使用，以及在实际操作中遇到的错误和解决方案，深入探讨响应式原理和组件生命周期。

摘要由CSDN通过智能技术生成

【已解决】Error: Cannot find module 'core-js/modules/es.[number].constructor'

【未解决】"export 'xxx' was not found in '@vue/composition-api'

开始工作

如何搭建一个可以运行CompositionAPI的项目

Vue Composition API中文文档

【响应式】：Vue的响应式数据，也就是mvvm双向绑定模式

有关API学习整理

setup

【setup】：整个组件的入口点，会在beforeCreate之后，created之前执行返回一个对象，而这个对象上的属性则会直接暴露给模版渲染上下文
【setup参数】：props，context

props：父组件传递给子组件的数据

context：自组件无法直接使用props的数据，需要通过context.xxx去获取

ref和reactive

【ref和reactive】：都是将传入的参数转化为响应式对象的方法

区别：

ref是将基本数据类型转换为响应式数据，而且定义之后可以直接使用，ref会将基本数据包装一层，因此使用的时候需要.value，但是在模版template中回自动拆开
- number、string、boolean、null、undefined、Symbol
reactive是将其他数据类型转换为响应式数据
- Object

【ref和reactive在模版中简单使用】的一个代码记录

<template>
  <div>
    ref:
    <span>{{count}}</span>
    <br />
    reactive:
    <span>{{obj.count}}</span>
  </div>
</template>

<script>
import Vue from 'vue'
import VueCompositionApi, { reactive,ref,onMounted, defineComponent } from '@vue/composition-api'
  
Vue.use(VueCompositionApi)

export default defineComponent({
  setup () {
    const count = ref(0);
    const obj = reactive({count:0});
    // 返回一个对象
    return {
      state,
      obj
    }
  }
})
</script>

【修改ref和reactive的值】代码记录

<template>
  <div>
    ref:
    <span @click="handleClickRef">{{count}}</span>
    <br />
    reactive:
    <span @click="handleClickReactive">{{obj.count}}</span>
  </div>
</template>

<script>
import Vue from 'vue'
import VueCompositionApi, { reactive,ref } from '@vue/composition-api'
import { onMounted, defineComponent } from '@vue/composition-api'

Vue.use(VueCompositionApi)

export default defineComponent({
  setup () {
    const count = ref(0);
    const obj = reactive({count:0})
    onMounted(() => {
    });
    function handleClickRef() {
      // ⚠️注意：修改的使用需要.value获取
      count.value++;
    } 
    function handleClickReactive() {
      obj.count++;
    }
    return {
      count,obj,handleClickRef,handleClickReactive
    }
  },
})
</script>

computed

简单来说就是可以配置get/set，类似于之前版本

<template>
    <div>
        computed:
        <input @change="handleClickPlusCount" type="text" v-model="userInput">
        <br />
        <span >{{plusCount}}</span>
    </div>
</template>>

<script>
import Vue from 'vue'
import VueCompositionApi, { ref, defineComponent, computed } from '@vue/composition-api'

Vue.use(VueCompositionApi)

export default defineComponent({
    setup () {
        const count = ref(0);
        const userInput = ref(null);
        // * 默认是get选项
        // const plusCount = computed(()=>count.value+1);

        const plusCount = computed({
            get: ()=>count.value,
            set: (val)=>{
                count.value = val; 
            }
        });

        function handleClickPlusCount(){
            const input = userInput.value;
            plusCount.value = parseInt(input);
        }

        return {
            plusCount,
            userInput,
            handleClickPlusCount
        }
    }

})
</script>

watchEffect

当追踪到依赖的数据改变后，会立即的执行一个函数

按照下面的demo，运行过程是，会立即执行watchEffect传入的函数，因为函数需要执行的话就根据count.value，所以下面在不断改变count的过程中，也触发了watchEffect传入函数的执行

其实，就是类似于watch的用法，只是代码里面帮你监听了依赖的其他数据，不用自己手动传入。

const stop = watchEffect(()=>console.log(count.value));
setInterval(()=>{
    count.value++;
},1000);

// 停止监听
stop();

watch

类似于之前版本的watch，允许我们传入需要监听的参数，默认是懒执行，也就是说仅在监听的源变更时才执行回调

[readonly]

传如一个对象或者ref，返回一个原始对象的只读代理。一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的

【⚠️】：在使用的过程中发现报错，暂时没有找到有关的解决办法

[toRef]

可以将一个reactive对象的属性创建一个ref。这个ref可以被传递并且能够保持响应性

【⚠️】：使用过程中报错，还未解决

toRefs

把一个响应式对象转换成普通对象，该不同对象的每个property都是一个ref，和响应式对象property一一对应

setup() {
  const state = reactive({
    foo: 1,
    bar: 2
  });

  const state_toRefs = toRefs(state);
  // ! 因为state是reactive创建的，所以获取值直接获取就好，而toRefs之后是ref，需要使用.value的形式获取值
  // change state.foo
  state.foo = 2;        
  console.log(state.foo,state_toRefs.foo.value); // 2 2
  // change state_toRefs
  state_toRefs.foo.value++;
  console.log(state.foo,state_toRefs.foo.value); // 3 3
}

判断创建类型的API

isRef

【作用】：判断一个值是否是ref对象

isProxy

【作用】：reactive or readonly

isReactive

【作用】：判断一个值是否是reactive创建的响应式代理

isReadonly

【作用】：判断一个对象是否是由readonly创建的只读代理

生命周期Lifecycle Hooks

before	now
beforeCreate	give up->set up
created	give up->set up
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
updated	onUpdated
destoryed	onUnmounted
errorCaptured	onErrorCaptured