Vue3中的ref為何要用.value進行值的調(diào)用呢
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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)
這篇文章主要介紹了Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)2022-08-08Vue項目中對index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項目中對index.html中BASE_URL的配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06關(guān)于vue-cli 3配置打包優(yōu)化要點(推薦)
這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3中如何使用Pinia實現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個頁面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁面,這些數(shù)據(jù)就會丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來看看具體如何解決的吧2023-10-10