Vue3 其他Composition API(二)

最新推荐文章于 2025-09-02 19:29:38 发布

原创最新推荐文章于 2025-09-02 19:29:38 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了Vue3中CustomRef的用法，展示了如何创建自定义ref并控制数据跟踪。同时，剖析了provide/inject机制用于组件间的通信，通过实例演示了如何在App中传递数据给子组件。此外，讲解了Composition API相对于Options 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>