ref&shallowRef&customRef&toRef&toRefs&reactive理解

1.Ref 和ShallowRef的区别

1.1Ref是深层次的响应原理,ShallowRef是浅层次的响应原理只监听一层;
		 import { ref, isRef, shallowRef, customRef, reactive, readonly } from "vue";
		 import type { Ref } from "vue";
		 type M = {
		   name: string;
		 };
		const Man3 = { name: 1 };
		const Man: Ref<M> = ref({ name: "小曼" });
		const sMan: Ref<M> = shallowRef({ name: "s小曼" });
		//shallowRef 浅层次的响应,只影响到.value
		//shallowRef若需要监听到第二层需要这么写:
		 sMan.value = {
		   name: "s阿曼",
		 }; //这样才有效果
		//ref深层次的响应
		//ref和shallowref不能一起写 不然会造成shallowref的更新(因为triggerRef()方法的影响)
		//ref 支持所有类型,reactive仅支持引用类型 object array map等
		//ref取值赋值都需要加.value 而reactive不需要加.value
		//reactive proxy 不能直接赋值 会破坏响应式对象的
		//解决方案 1.数组:使用push+解构;
		//toRef 只能修改响应式对象的值,非响应式的毫无变化
	
1.2 customRef的例子
				 function Myref<T>(value: T) {
					   return customRef((track, trigger) => {
					     return {
					       get() {
					         track();
					         return value;
					       },
					       set(newval) {
					         value = newval;
					         trigger();
					       },
					     };
					   });
				 }
				 const obj = Myref<string>("小曼");
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。毕业设计、课程设计源码文件,已经过测试可以直接使用。
refreactivetoReftoRefs是Vue 3中的响应式API。它们用于在Vue组件中创建响应式数据。 1. refref函数用于创建一个响应式的数据引用。它接收一个参数作为初始值,并返回一个包含value属性的对象。ref函数可以用于创建基本类型的响应式数据,例如数字、字符串等。 ```javascript import { ref } from 'vue' const count = ref(0) console.log(count.value) // 输出:0 ``` 2. reactivereactive函数用于创建一个响应式的对象。它接收一个普通对象作为参数,并返回一个代理对象,该代理对象会追踪对象的属性的变化。reactive函数可以用于创建复杂类型的响应式数据,例如对象、数组等。 ```javascript import { reactive } from 'vue' const state = reactive({ count: 0, message: 'Hello' }) console.log(state.count) // 输出:0 console.log(state.message) // 输出:Hello ``` 3. toReftoRef函数用于创建一个响应式的引用。它接收两个参数:源响应式对象和属性名,并返回一个ref数据。toRef函数可以用于在组件中引用props的某个属性,并保持响应式连接。 ```javascript import { defineComponent, toRef } from 'vue' export default defineComponent({ props: ['title'], setup(props) { const myTitle = toRef(props, 'title') console.log(myTitle.value) } }) ``` 4. toRefstoRefs函数用于将一个响应式对象转换为普通对象,其中每个属性都是一个ref数据。toRefs函数可以用于在组件中将响应式对象的属性解构为独立的ref数据。 ```javascript import { reactive, toRefs } from 'vue' const state = reactive({ count: 0, message: 'Hello' }) const refs = toRefs(state) console.log(refs.count.value) // 输出:0 console.log(refs.message.value) // 输出:Hello ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值