Vue3中ref為何要用.value進(jìn)行值的調(diào)用

在Vue2中，所有的數(shù)據(jù)都通過(guò)一個(gè)Data進(jìn)行統(tǒng)一的返回，并且在data中對(duì)某個(gè)組件要用的數(shù)據(jù)進(jìn)行統(tǒng)一的管理，常見(jiàn)的使用形式是這樣的：

<template>
? <div class="div">
? ? <todos :Obj="tos" :removeObj="removeObj"></todos>
? </div>
</template>
<script>
import search from '@/components/search'
import todos from '@/components/todos'
import all from '@/components/all'
export default {
? name: 'App',
? data () {
? ? return {
? ? ? tos: [
? ? ? ? { id: '001', value: '第一個(gè)', done: true },
? ? ? ? { id: '002', value: '第二個(gè)', done: true },
? ? ? ? { id: '003', value: '第三個(gè)', done: false },
? ? ? ? { id: '004', value: '第四個(gè)', done: true },
? ? ? ],
? ? }
? },
? computed: { },
? components: {
? ? search, todos, all,
? },
? methods: {
? ? removeObj (obj) {
? ? ? console.log(obj.id)
? ? ? this.tos = this.tos.filter(item => item.id !== obj.id)
? ? ? console.log(this.tos)
? ? },
? },
}
</script>
<style scoped>
// 樣式
</style>

可以看出來(lái)這里定義的內(nèi)容都在一個(gè)數(shù)組中進(jìn)行，或者是一個(gè)函數(shù)，將要使用的數(shù)據(jù)返回出來(lái)，這里無(wú)論怎么進(jìn)行操作處理，最終進(jìn)行數(shù)據(jù)代理的時(shí)候得到的都是一個(gè)對(duì)象，Vue2中直接通過(guò)defineProperty進(jìn)行處理，并綁定對(duì)應(yīng)的監(jiān)聽(tīng)事件進(jìn)行響應(yīng)式的處理。

而Vue3中，數(shù)據(jù)的定義可以是單獨(dú)的，Vue可以讓我們隨時(shí)需要隨時(shí)定義，這也就帶來(lái)了另一個(gè)問(wèn)題，我需要的一個(gè)數(shù)據(jù)可能不是對(duì)象

<script lang="ts" setup>
let str = ref('響應(yīng)式字符串')
let obj = reactive({
? name: '張三',
? age: 10,
})
</script>

如果要定義的數(shù)據(jù)不是對(duì)象，還需要代理會(huì)怎么樣？

在Vue2中數(shù)據(jù)的定義都在對(duì)象中統(tǒng)一進(jìn)行，也就不會(huì)出現(xiàn)這種情況，如果一定要代理一個(gè)單獨(dú)的數(shù)據(jù)呢？

Vue2中的數(shù)據(jù)代理通過(guò)defineProperty進(jìn)行實(shí)現(xiàn)，也就是說(shuō)我們要讓defineProperty代理一個(gè)普通的數(shù)據(jù)，而不是一個(gè)對(duì)象，在defineProperty的MDN的文檔中是這樣定義的：

• Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象。

通過(guò)這個(gè)可以明確看出，只能進(jìn)行對(duì)象的代理，不能進(jìn)行普通數(shù)據(jù)的代理，如果使用普通數(shù)據(jù)類型會(huì)直接報(bào)以下錯(cuò)誤[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-p1Lm0OSJ-1661407967498)(Vue3中的ref為何要用.value進(jìn)行值的調(diào)用？.assets/image-20220825094409254.png)]

? 在Vue3中數(shù)據(jù)代理可以使用單一數(shù)據(jù)了，并且也改進(jìn)了數(shù)據(jù)代理的方式，使用的是Peoxy完成了數(shù)據(jù)代理，而MDN中對(duì)Proxy也進(jìn)行了定義：

• Proxy 對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

可以看出，Proxy依然是為對(duì)象服務(wù)，而不是普通的內(nèi)容，這樣問(wèn)題似乎就解決了

本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

可以看出，Proxy依然是為對(duì)象服務(wù)，而不是普通的內(nèi)容，這樣問(wèn)題似乎就解決了

即使是Vue3中使用的Proxy的代理方式也不能進(jìn)行普通數(shù)據(jù)的代理，所以當(dāng)調(diào)用Ref的時(shí)候其實(shí)仍然創(chuàng)建了一個(gè)Proxy對(duì)象，并且Vue幫你給這個(gè)對(duì)象了一個(gè)value屬性，屬性值就是你定義的內(nèi)容，改變的時(shí)候監(jiān)視的改變依然是通過(guò)Proxy的數(shù)據(jù)劫持來(lái)進(jìn)行響應(yīng)式的處理，而模板中使用的時(shí)候Vue會(huì)默認(rèn)調(diào)用對(duì)應(yīng)的value屬性，從而完成模板中的內(nèi)容的直接調(diào)用 

Vue3 ref告別.value

眾所周知，ref要求我們?cè)L問(wèn)變量時(shí)需要加上.value，這讓很多開(kāi)發(fā)者覺(jué)得難受.

let count = ref(1)
const add = () => {
? count.value += 1
}

后來(lái)vue3 提了一個(gè) Ref Sugar 的 RFC，即 ref 語(yǔ)法糖，在ref前加上$，目前還處理實(shí)驗(yàn)階段。

Ref 語(yǔ)法糖在項(xiàng)目中的使用

1. 該功能默認(rèn)關(guān)閉，需要手動(dòng)開(kāi)啟。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
? plugins: [
? ? vue({
? ? ? refTransform: true // 開(kāi)啟ref轉(zhuǎn)換
? ? })
? ]
})

2. 在.vue文件中使用

<template>
?? ?<div>{{count}}</div>
?? ?<button @click="add">click me</button>
</template>
<script setup>
let count = $ref(1)
const add = () => {
?? ?count++
}
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論