一、ref定義值什么情況下需要.value

1. 情況1:在js中需要使用.value

2. 情況2:在html模版中不需要使用.value

需要了解
在reactive中會(huì)自動(dòng)解構(gòu)，不需要.value的示例

3. 情況3

1.代碼

一個(gè)很簡(jiǎn)單的例子，有一個(gè)用ref綁定的值，有一個(gè)reactive綁定的obj的值，obj里面有ref綁定的值，頁(yè)面上有個(gè)按鈕，點(diǎn)擊按鈕改變r(jià)ef的值，然后打印obj

  <div>
    <button @click="messageHandle">點(diǎn)擊修改值</button>
  </div>

import { reactive, ref } from 'vue'
const message = ref('這是一個(gè)信息')
const obj = reactive({
	name: '章三',
	age: 18,
	describe: message, // 這里設(shè)置響應(yīng)式，不需要.value
})
const messageHandle = () => {
  message.value = '這是修改后的信息'
  console.log('obj', obj, obj.describe);
}

2.效果

3.

vue3中ref在script中為什么需要.value才能獲取/修改值？
首先需要注意的是，為什么說(shuō)的是script中呢？
原因：因?yàn)樵谀０澹╤tml）中和reactive({})中會(huì)自動(dòng)解構(gòu), 模板中大家都知道了

二、重新了解一下vue2和vue3的響應(yīng)式

這兩種都是響應(yīng)式，響應(yīng)式的本質(zhì)是派發(fā)更新，響應(yīng)式數(shù)據(jù)的本質(zhì)都是攔截?cái)?shù)據(jù)

1.vue2（Object.defineProperty）

Object.defineProperty(obj, prop, descriptor)

• obj ：要定義屬性的對(duì)象
• prop：一個(gè)字符串或 Symbol，指定了要定義或修改的屬性鍵。
• descriptor：屬性描述符。

2.vue3（proxy）

Proxy的簡(jiǎn)單使用
const p = new Proxy(target, handler)
target : 目標(biāo)對(duì)象，可以是任何類型的對(duì)象，包括數(shù)組，函數(shù)。
handler: 定義代理對(duì)象的行為。
返回值：返回的就是一個(gè)代理對(duì)象，之后外部對(duì)屬性的讀寫都是針對(duì)代理對(duì)象來(lái)做的

3. 兩種攔截的區(qū)別

• Object.defineProperty 是針對(duì)對(duì)象特定屬性的讀寫操作進(jìn)行攔截
• Proxy 則是針對(duì)一整個(gè)對(duì)象的多種操作，包括屬性的讀取、賦值、屬性的刪除、屬性描述符的獲取和設(shè)置、原型的查看、函數(shù)調(diào)用等行為能夠進(jìn)行攔截。同時(shí)proxy的攔截速度一般比object.defineProperty的速度快。

上面這段總結(jié)：充分說(shuō)明了vue2中，監(jiān)聽(tīng)數(shù)組的插入和刪除，為什么有時(shí)候會(huì)監(jiān)聽(tīng)不到，而vue3能夠監(jiān)聽(tīng)的到的原因。

三、為什么ref在js中為什么需要.value才能獲取/修改值？

1： vue3為什么會(huì)有ref和reactive兩種響應(yīng)式數(shù)據(jù)？？？

原因：proxy的參數(shù) target可以是任何類型的對(duì)象，包括數(shù)組，函數(shù)，但不能是簡(jiǎn)單數(shù)據(jù)類型，為了區(qū)分基本類型（如字符串、數(shù)字、布爾值）也能享受響應(yīng)式系統(tǒng)的好處。在 JavaScript 中，基本類型不能直接被代理，因此需要通過(guò)一個(gè)對(duì)象來(lái)包裹。通過(guò)將值放到.value中進(jìn)行代理。

2：ref和reactive的底層實(shí)現(xiàn)

看了一圈底層代碼，大概可以這么理解：

reactive = proxy // 如果是reactive就直接使用proxy代理

ref = isRef ? Object.defineProperty : reactive 

// isRef為false，說(shuō)明不是的話使用reactive的響應(yīng)式方法，也就是proxy的代理。

// isRef為true，說(shuō)明是簡(jiǎn)單數(shù)據(jù)類型，使用Object.defineProperty，由于是簡(jiǎn)單數(shù)據(jù)類型，所以不會(huì)有對(duì)象的添加刪除這種操作，也就不會(huì)有問(wèn)題，同時(shí)由于是Object.defineProperty，簡(jiǎn)單數(shù)據(jù)類型無(wú)法直接代理，那么只能給ref的這個(gè)值包裹一層，通過(guò).value來(lái)修改/獲取值了，這就是vue3中ref在js中需要.value才能獲取/修改值的真正原因。有興趣的可以看下vue3的源碼

總結(jié)

到此這篇關(guān)于vue3中ref在js中為什么需要.value才能獲取/修改值的文章就介紹到這了,更多相關(guān)vue3 ref在js中.value修改值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論