vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别

ref

ref	toRef
普通ref对象	特殊ref对象
不会和原始对象挂钩	创建的ref对象，与原始对象挂钩
重新渲染	不会触发渲染

-普通ref对象

不会和原始对象挂钩
重新渲染
如下面的例子中， ref对象改变，视图已更新，原始数据json保持不变。

<template><div>b = {{b}}</div>
</template><script>
import { ref } from 'vue'export default {setup() {let json = { a: 12 }let b = ref(json.a)b.value++console.log('b', b.value)console.log('json', JSON.stringify(json))return {b}}
}
</script>

toRef() -特殊ref对象，传入对象和属性
4. 创建的ref对象，与原始对象挂钩
5. 不会触发渲染

<template><div>b = {{b}}</div>
</template><script>
import { ref, toRef } from 'vue'export default {setup() {let json = { a: 12 }let b = toRef(json, 'a')setInterval(() => {b.value++console.log('b', b.value)console.log('json', JSON.stringify(json))}, 1000)return {b}}
}
</script>

toRefs()-批量处理toRef,传入一个对象

<template><div>res = {{res}}</div>
</template><script>
import { ref, toRef, toRefs } from 'vue'export default {setup() {let json = { a: 12, b: 5 }let res = toRefs(json) // 相当于{a: toRef(json, 'a'), b: toRef(json, 'b')}setInterval(() => {res.a.value++res.b.value++console.log('res.a', res.a.value, 'res.b', res.b.value)console.log('json', JSON.stringify(json))}, 1000)return {res}}
}
</script>

customRef
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

function useDebouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}export default {setup() {return {text: useDebouncedRef('hello')}}
}

shallowReactive的简单实现

shallowReactive只对第一层监听变化

function shallowReactive(obj) {if (typeof obj === 'object') {return new Proxy(obj, {get(obj, key) {if (key in obj) {return obj[key];} else {console.warn('no this key:' + key)return undefined;}},set(obj, key, val) {console.log('重新渲染')if (key in obj) {obj[key] = val;} else {console.warn('no this key:' + key)obj[key] = val;}return true;}})} else {console.warn('this is not reactive :' + obj)}
}

let obj1 = shallowReactive({a: 12,b: [{c: 2}]
})
obj1.a++;
console.log(obj1)

结果：

 let obj1 = shallowReactive({a: 12,b: [{c: 2}]
})
obj1.b[0].c++;
console.log(obj1.b[0])

结果：

reactive简单实现

深度监听

function reactive(obj) {if (typeof obj === 'object') {if (obj instanceof Array) {obj.forEach((item, index) => {if (typeof item === 'object') {obj[index] = reactive(item);}})} else {for (let key in obj) {if (typeof obj[key] === 'object') {obj[key] = reactive(obj[key])}}}return new Proxy(obj, {get(obj, key) {if (key in obj) {return obj[key];} else {console.warn('no this key:' + key)return undefined;}},set(obj, key, val) {console.log('重新渲染')if (key in obj) {obj[key] = val;} else {console.warn('no this key:' + key)obj[key] = val;}return true;}})} else {console.warn('this is not reactive :' + obj)}
}

let obj1 = reactive({a: 12,b: [{c: 2}]
})
obj1.b[0].c++;
console.log(obj1.b[0])

vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别相关推荐

vue3.0 ref reactive nextTick watch toRaw defineProps defineEmits
目前使用的一些属性持续更新中 ref:推荐定义基本数据类型(ref值也可以是对象,但是一般情况下是对象直接使用reactive更合理). const data = ref( {id: "1& ...
vue3中ref的理解
1.什么是ref ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了r ...
Vue2与Vue3中Ref绑定元素
Vue之Ref绑定元素获取实例我们可以通过给元素绑定ref属性来获取这个元素的实例,来调用实例中的某种方法来实现某种功能 Vue2实现 <template><!-- 单个绑定 -- ...
vue3中的ref 和 reactive 定义数组
在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型但是也可以使用 ref 来定义数组 ...
Vue3中shallowReactive 与 shallowRef 的用法
shallowReactive 与 shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式). shallowRef:只处理基本数据类型的响应式, 不进行对象的响 ...
vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
Vue3 的 ref 和 reactive 问题
如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础 ...
Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...
解决 vue3的 import { ref , reactive ... } 引入繁琐问题
在vue3中每个页面都需要引用ref,reactive不是很方便,为了方便需要安装下unplugin-auto-import插件,这样就不用每个页面都需要引用了. 1.下载安装 cnpm i unpl ...

vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别

ref

shallowReactive的简单实现

reactive简单实现

vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别相关推荐

最新文章

热门文章