vue3 响应式ref与reactive 使用

1、ref

 

 代码：

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ age }}</p>


    <button @click="changeName">Change Name</button> &nbsp;&nbsp;
    <button @click="changeAge">Change Age</button>
    
    <br />
    <br />
    <h1>{{ house.address }}</h1>
    <p>{{ house.price }}</p>





    <button @click="changeHouse">Change House</button>
  </div>
</template>





<script setup lang="ts" name="Person">





    import { ref } from 'vue'
   





    let name = ref('John')
    let age = ref(30)
    let tel = "15111111111"





    let house = ref({
      address: 'Beijing',
      price: 100000
    })
    console.log("name",name)
    console.log("house",house)





   function changeName() {





     name.value = 'Jane'





   }
   
   function changeAge() {
     age.value += 1





   }







   function changeHouse() {





     //house.value.address = 'Shanghai'
     //house.value.price = 150000
      
     //修改整个对象
      house.value = {
        address: 'Shanghai',
        price: 150000
      }





   }
   </script>

 

 

说明：在模版里面直接写变量名，在js里面需要写 变量名.value。

 用ref定义的对象，在js里面使用同样需要加上.vaue，value值与reactive定义的对象类型一样

 

 

 2、reactive

 代码：

<template>
  <div>
    <h1>{{ car.name }}</h1>
    <h1>{{ car.price }}</h1>



    <button @click="changeName">Change Car Name</button> &nbsp; &nbsp;
    <button @click="changeCar">Change Car</button>
  </div>
</template>




<script setup lang="ts">
    import { reactive } from 'vue';
    let car = reactive({
        name: 'BMW',
        price: 10000
    })




    console.log("car",car)
    function changeName() {
        car.name = 'Audi'
    }




    function changeCar() {
        // //不能直接这样赋值
        // car = {
        //     name: 'Audi',
        //     price: 20000
        // }
        
        // //这种方式也不行。因为car 的引用在编译时就确定了，它指向的是最初的那个响应式对象。
        // car = reactive(
                //  {
                //             name: 'Audi',
                //             price: 20000
                //         }
        // )
        //修改整个对象
        Object.assign(car, {
            name: 'Audi',
            price: 20000
        })




    }
</script>

说明：reactive只支持对象类型。方法里面修改值不用在.value。

 

 

参考链接：

https://chat.deepseek.com/share/l47j9jlgkpq1mx0oei

响应式依赖图

模板依赖关系：模板 → Proxy对象 (内存地址0x1234)
                 ↓
                car.name, car.price
                 
变量 car: (指针) → 指向内存地址 0x1234 (Proxy对象)

当你执行 car = {...} 时：
变量 car: (指针) → 指向内存地址 0x5678 (新普通对象)
模板依赖仍然指向：内存地址 0x1234 (旧Proxy对象) ← 失去联系！

Object.assign() 保持引用

执行 Object.assign(car, {...})：

保持引用不变：
变量 car: (指针) → 仍然指向 0x1234 (Proxy对象)
模板依赖：仍然指向 0x1234

只修改 Proxy 内部的属性值：
Proxy对象 0x1234:
  - name: 'BMW' → 'Audi' (触发 setter)
  - price: 10000 → 20000 (触发 setter)

car 的引用在编译时就确定了，它指向的是最初的那个响应式对象。

对于 reactive()

// 依赖关系是：组件 → proxy对象
// 一旦 proxy对象 确定，就不会改变

对于 ref()

// 依赖关系是：组件 → ref对象的 .value 属性
// 每次访问 .value 都会重新建立依赖
// 所以即使 refObject 没变，.value 变了也能检测到

 

3、区别：