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

### 文章目录

[@[TOC](文章目录)](#文章目录 @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](#文章目录 @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的底层实现)
[1. 情况1:在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的底层实现)
[2. 情况2:在html模版中不需要使用.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的底层实现)
[3. 情况3](#文章目录 @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的底层实现)
[1.代码](#文章目录 @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的底层实现)
[2.效果](#文章目录 @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的底层实现)
[3.](#文章目录 @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的底层实现)
[二、重新了解一下vue2和vue3的响应式](#文章目录 @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的底层实现)
[1.vue2（Object.defineProperty）](#文章目录 @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的底层实现)
[2.vue3（proxy）](#文章目录 @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的底层实现)
[3. 两种拦截的区别](#文章目录 @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在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的底层实现)
[1： vue3为什么会有ref和reactive两种响应式数据？？？](#文章目录 @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的底层实现)
[2：ref和reactive的底层实现](#文章目录 @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

html 复制代码

  <div>
    <button @click="messageHandle">点击修改值</button>
  </div>

javascript 复制代码

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的底层实现

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

javascript 复制代码

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

javascript 复制代码

ref = isRef ? Object.defineProperty : reactive

// isRef为false，说明不是的话使用reactive的响应式方法，也就是proxy的代理。

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