Vue3 其他Composition API(二)

CustomRef

作用

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制

现在实现在 input 中输入，h2 标签中延迟半秒显示的功能：

看代码：

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

<script> import {customRef} from 'vue'

export default {name: 'App',setup() {//const keyword = ref("hello")//使用vue提供的reffunction myRef(value) {return customRef((track, trigger) => {let timer;return {get() {console.log(`有人从myRef读取数据了，我把${value}给它了`);track()//通知vue追踪数据的变化return value},set(newValue) {console.log(`有人把myRef的数据改了：${newValue}`);clearTimeout(timer)timer = setTimeout(() => {value = newValuetrigger()//通知vue重新解析模板}, 500)}}})}const keyword = myRef("hello")//使用程序员自己写的refreturn {keyword}}
} </script> 

provide 和 inject

作用

实现祖与后代组件间通信

套路

父组件有一个 provide 选项来提供数据。子组件有一个 inject 选项来开始使用这些数据

具体写法

1.祖组件中

setup(){
	......
	let car = reactive({name:"奔驰',price: '40万'})
	provide( "car",car)
	......
} 

2.孙组件中

setup(){
	......
	const car = inject('car')
	return {car}
	......
} 

我们来写一个例子，App 中包含 Child，Child 中包含 Son App 中有一个数据，要传给 Son

<template><div class="app"><h3>我是App组件(祖){{ name }}--{{ price }}</h3><Child/></div>
</template>

<script> import Child from "@/components/Child";
import {reactive, toRefs,provide} from "vue";

export default {name: 'App',components: {Child},setup() {let car = reactive({name: "奔驰", price: "40w"})provide("car",car)//给自己的后代组件提供数据return {...toRefs(car)}}
} </script>

<style> .app {background-color: gray;padding: 10px;
} </style> 

Child.vue

<template><div class="child"><h3>我是Child组件(子)</h3><Son/></div>
</template>

<script> import Son from "@/components/Son";
export default {name: 'Child',components:{Son}
} </script>

<style> .child {background-color: skyblue;padding: 10px;
} </style> 

Son.vue

<template><div class="son"><h3>我是Son组件(孙){{car.name}}--{{car.price}}</h3></div>
</template>

<script> import {inject} from 'vue'

export default {name: 'Son',setup(){const car = inject('car')return {car}}
} </script>

<style> .son {background-color: orange;padding: 10px;
} </style> 

响应式数据的判断

isRef：检查一个值是否为一个ref 对象

isReactive：检查一个对象是否是由reactive创建的响应式代理

isReadonly：检查一个对象是否是由readonly创建的只读代理

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

<template><h3>我是App组件</h3>
</template>

<script> import {isProxy, isReactive, isReadonly, isRef, reactive, readonly, ref, toRefs} from "vue";

export default {name: 'App',setup() {let car = reactive({name: "奔驰", price: "40w"})let sum = ref(0)let car2 = readonly(car)console.log(isReactive(car));//trueconsole.log(isRef(sum));//trueconsole.log(isReadonly(car2));//trueconsole.log(isProxy(car));//trueconsole.log(isProxy(car2));//trueconsole.log(isProxy(sum));//falsereturn {...toRefs(car)}}
} </script> 

Composition API的优势

Composition API是在 Vue3 中提出来的，Vue2 中的是 Options API(配置式的API)

Options API存在的问题 使用传统 Optilons API中，新增或者修改一个需求，就需要分别在 data，methods，computed 里修改

composition API的优势 我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起（借助hook）