Vue3_10(Composition API) Setup | Reactive API | Ref API

Setup | Vue.js https://v3.cn.vuejs.org/guide/composition-api-setup.html#setup

1、Setup中不能使用this，this并没有指向当前组件实例，并且在setup被调用之前，data、computed、methods等都没有被解析；

2、Setup有两个参数：props,context（可不传）

　　父组件传递过来的属性会被放到props对象，template中可直接使用

　　context包含三个属性：

　　　　attrs：所有的非prop的attribute；
　　　　slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；
　　　　emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；

3、Setup返回值，模板template中被使用

数据提供响应式

Reactive 必须传入的是一个对象或者数组类型

Ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用 维护着它内部的值（推荐优先使用）

Readonly会返回原生对象的只读代理（它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改）；

　　可传入对象：普通对象，reactive返回的对象，ref的对象
　　readonly返回的对象都是不允许修改的；但是经过readonly处理的原来的对象是允许被修改的；

　　　　比如 const info = readonly(obj)，info对象是不允许被修改的；
　　　　当obj被修改时，readonly返回的info对象也会被修改；

Reactive API      响应性基础 API | Vue.js https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive

toRefs	将reactive对象中的属性都转成ref
toRef	将reactive对象中的一个属性转换为ref
isProxy	检查对象是否是由 reactive 或 readonly创建的 proxy。
isReactive	检查对象是否是由 reactive创建的响应式代理；如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回 true；
isReadonly	检查对象是否是由 readonly 创建的只读代理。
toRaw	返回 reactive 或 readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。
shallowReactive	创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (深层还是原生对象)。
shallowReadonly	创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）。

Ref API        Refs | Vue.js https://v3.cn.vuejs.org/api/refs-api.html#ref

unref	获取一个ref引用中的value；如果参数是一个 ref，则返回内部值，否则返回参数本身
isRef	判断值是否是一个ref对象
shallowRef	创建一个浅层的ref对象；如果值有修改，需要triggerRef手动触发
triggerRef	手动触发和 shallowRef 相关联的副作用
customRef	创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制： 　　它需要一个工厂函数，该函数接受 track 和 trigger 函数作为参数； 　　并且应该返回一个带有 get 和 set 的对象；

 

customRef 案例：对双向绑定的属性进行debounce(节流)的操作

#useDebounceRef.js
import { customRef } from 'vue';

// 自定义ref
export default function(value, delay = 300) {
  let timer = null;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      }
    }
  })
}

#App.vue
<template>
  <div>
    <input v-model="message"/>
    <h2>{{message}}</h2>
  </div>
</template>

<script>
  import debounceRef from './hook/useDebounceRef';

  export default {
    setup() {
      const message = debounceRef("Hello World");

      return {
        message
      }
    }
  }
</script>