[JavaScript知识库]vue3.0其它的composition API

一、shallowRef,shallowReactive

浅层次的响应式对象，当一个对象嵌套层数过多，可以用来性能优化，一般用不到

二、readonly,shallowReadonly

让一个响应式数据变为只读的，readonly是深只读，shallowReadonly是浅只读，例如应用于某些封装的数据或组件中引出的数据不希望被改

const user = reactive({
  name:"henry",
  job:{
    c:'1',
    a:{
      b:222
    }
  }
})
const user1 = readonly(user)
const user2 = shallowReadonly(user)

三、toRaw,markRaw

toRaw：获取一个由reactive生成的响应式对象转为普通对象

注意：

• 如果是ref定义的对象，则通过.value的也可以获取源对象；
• 还有改变源对象的数据，响应式对象也会跟着变化，但是不会引起页面的更新；

markRaw：标记一个对象，使其永远不再成为响应式对象

注意：这个对象是可改变的，只是非响应而已

应用场景：

• 有些值不应该被设为响应式的，例如复杂的第三方库类等
• 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

let user = reactive({
  name:"henry"
})
//也可转化ref定义的对象类型，只是需要加.value
let user1 = toRaw(user)

let car = {
  name:'奔驰',
  price:40
}
//car的变化不再会体现在页面上
user.car = markRaw(car)

四、customRef

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制
例如：实现防抖效果

<template>
  <input type="text" v-model="keyword" />
  <h3>{{ keyword }}</h3>
</template>

<script>
import { customRef } from "vue";

function useDebouncedRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => ({
    get() {
      console.log("get", value);
      track();
      return value;
    },
    set(newval) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      timer = setTimeout(() => {
        console.log("set", newval);
        value = newval;
        trigger();
      }, delay);
    },
  }));
}
export default {
  setup() {
    let keyword = useDebouncedRef("henry");

    return {
      keyword,
    };
  },
};
</script>

五、provide, inject

实现祖与后代组件间的通信
祖组件用provide来提供数据，后代组件用inject来获取数据

//祖组件
setup() {
	const car = reactive({
	  name:'奔驰',
	  price:40
	})
	provide('car',car)
}

//后代组件
setup() {
	const car = inject('car')
	return {
	  car
	};
}

六、响应式数据的判断

• isRef
• isReactive
• isReadonly
• isProxy：检查一个对象是否由 reactive 或者 readonly 方法创建的代理