Vue3.0为什么普通对象不使用ref和reactive同样具有响应式的特性?

55 阅读1分钟

以下这段代码中的obj普通对象为什么具有响应式的特性?

<template>
    <h1>
        我是App组件
        <p>姓名:{{ name }}</p>
        <p>年龄:{{ age }}</p>
        <p>职位:{{ job.type }}</p>
        <p>薪资:{{ job.salary }}</p>
        <button @click="changeInfo">修改个人信息</button>
    </h1>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    // 数据
    let name = ref('张三')
    let age = ref(24)

    let job = {
        type: '全栈工程师',
        salary: '40K'
    }
   
    // 方法
    function changeInfo() {
        name.value = "李四"
        age.value = 32
      
        job.type = "前端工程师"
        job.salary = "30k"
    }

    // 返回值
    return {
        name,
        age,
       
        job,
        changeInfo
    }
  }
}
</script>

image.png 如果把基本类型的name和age注释掉普通对象obj就没有了响应式的特性,为什么呢?

1.png