ref

reftoRef

普通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使用与区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。