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

一、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的源码

总结

到此这篇关于vue3中ref在js中为什么需要.value才能获取/修改值的文章就介绍到这了,更多相关vue3 ref在js中.value修改值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论