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在模版中简单使用】的一个代码记录

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

 

computed

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

>

 

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

总的来说，大部分的初始化代码都放到了setup中，总的生命周期命名都变成了onXxx的形式

【errorCaputred->onErrorCaptured】：当捕获到一个来自子孙组件的错误时被调用

错误记录

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

【错误说明】：当使用props的时候，需要对父组件传过来的值进行格式验证出现的一个错误，不过按照这样的猜想，错误的原因对于es.[type].constructor应该都是适用的

【解决】：

npm install --save core-js

而且似乎版本好还不能是2，必须要3以上才可以

 

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

【compositionapi版本】：0.5.0（暂时是目前的最新版）

一些在文档中看到的API，但是使用的时候报错，而且查看node_modules确实没有看到有关API的到导出，所以不知道是不是被舍弃了还是啥的，暂时还没有被解决

• readonly

• toRef

【说明】：该模块还没正式上线，暂时还不能使用！