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

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

<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: '第一個', done: true },
? ? ? ? { id: '002', value: '第二個', done: true },
? ? ? ? { id: '003', value: '第三個', done: false },
? ? ? ? { id: '004', value: '第四個', 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>

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

而Vue3中，數(shù)據(jù)的定義可以是單獨的，Vue可以讓我們隨時需要隨時定義，這也就帶來了另一個問題，我需要的一個數(shù)據(jù)可能不是對象

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

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

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

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

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

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

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

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

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

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

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

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

Vue3 ref告別.value

眾所周知，ref要求我們訪問變量時需要加上.value，這讓很多開發(fā)者覺得難受.

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

后來vue3 提了一個 Ref Sugar 的 RFC，即 ref 語法糖，在ref前加上$，目前還處理實驗階段。

Ref 語法糖在項目中的使用

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

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
? plugins: [
? ? vue({
? ? ? refTransform: true // 開啟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>

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

最新評論