compositionAPI

目录

开始工作

有关API学习整理

setup

ref和reactive

computed

watchEffect

watch

[readonly]

[toRef]

toRefs

判断创建类型的API

生命周期Lifecycle Hooks

错误记录

【已解决】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的值】代码记录