vue3中ref在js中为什么需要.value才能获取/修改值？

文章目录

• • @[TOC](文章目录)
• 一、ref定义值什么情况下需要.value
• • 1. 情况1:在js中需要使用.value
  • 2. 情况2:在html模版中不需要使用.value
  • 3. 情况3
  • • 1.代码
    • 2.效果
    • 3.
• 二、重新了解一下vue2和vue3的响应式
• • 1.vue2（Object.defineProperty）
  • 2.vue3（proxy）
  • 3. 两种拦截的区别
• 三、为什么ref在js中为什么需要.value才能获取/修改值？
• 1： vue3为什么会有ref和reactive两种响应式数据？？？
• 2：ref和reactive的底层实现

一、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的响应式

这两种都是响应式，响应式的本质是派发更新，响应式数据的本质都是拦截数据

1.vue2（Object.defineProperty）

Object.defineProperty(obj, prop, descriptor)
obj ：要定义属性的对象
prop：一个字符串或 Symbol，指定了要定义或修改的属性键。
descriptor：属性描述符。

2.vue3（proxy）

Proxy的简单使用
const p = new Proxy(target, handler)
target : 目标对象，可以是任何类型的对象，包括数组，函数。
handler: 定义代理对象的行为。
返回值：返回的就是一个代理对象，之后外部对属性的读写都是针对代理对象来做的

3. 两种拦截的区别

• Object.defineProperty 是针对对象特定属性的读写操作进行拦截
• Proxy 则是针对一整个对象的多种操作，包括属性的读取、赋值、属性的删除、属性描述符的获取和设置、原型的查看、函数调用等行为能够进行拦截。同时proxy的拦截速度一般比object.defineProperty的速度快。

上面这段总结：充分说明了vue2中，监听数组的插入和删除，为什么有时候会监听不到，而vue3能够监听的到的原因。

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

1： vue3为什么会有ref和reactive两种响应式数据？？？

原因：proxy的参数 target可以是任何类型的对象，包括数组，函数，但不能是简单数据类型，为了区分基本类型（如字符串、数字、布尔值）也能享受响应式系统的好处。在 JavaScript 中，基本类型不能直接被代理，因此需要通过一个对象来包裹。通过将值放到.value中进行代理。

2：ref和reactive的底层实现

看了一圈底层代码，大概可以这么理解：

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

ref = isRef ? Object.defineProperty : reactive 

// isRef为false，说明不是的话使用reactive的响应式方法，也就是proxy的代理。
// isRef为true，说明是简单数据类型，使用Object.defineProperty，由于是简单数据类型，所以不会有对象的添加删除这种操作，也就不会有问题，同时由于是Object.defineProperty，简单数据类型无法直接代理，那么只能给ref的这个值包裹一层，通过.value来修改/获取值了，这就是vue3中ref在js中需要.value才能获取/修改值的真正原因。有兴趣的可以看下vue3的源码