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

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

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

需要了解
在reactive中會自動解構，不需要.value的示例

3. 情況3

1.代碼

一個很簡單的例子，有一個用ref綁定的值，有一個reactive綁定的obj的值，obj里面有ref綁定的值，頁面上有個按鈕，點擊按鈕改變ref的值，然后打印obj

  <div>
    <button @click="messageHandle">點擊修改值</button>
  </div>

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

2.效果

3.

vue3中ref在script中為什么需要.value才能獲取/修改值？
首先需要注意的是，為什么說的是script中呢？
原因：因為在模板（html）中和reactive({})中會自動解構, 模板中大家都知道了

二、重新了解一下vue2和vue3的響應式

這兩種都是響應式，響應式的本質是派發(fā)更新，響應式數(shù)據(jù)的本質都是攔截數(shù)據(jù)

1.vue2（Object.defineProperty）

Object.defineProperty(obj, prop, descriptor)

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

2.vue3（proxy）

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

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

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

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

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

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

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

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

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

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

ref = isRef ? Object.defineProperty : reactive 

// isRef為false，說明不是的話使用reactive的響應式方法，也就是proxy的代理。

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

總結

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

最新評論