Vue3.0 ref函数

ref函数

1、作用

定义一个响应式的数据

2、语法

const xxx = ref(initValue)

• 创建一个包含响应式数据的应用对象（reference对象）
• JS中操作数据：xxx.value
• 模板中读取数据：不需要 .value ，直接：<div>{{xxx}}</div>
• 备注:
  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型数据：内部“求助”了Vue3.0中的一个新函数——reactive函数

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h3>工作种类:{{ job.type }}</h3>
  <h3>工作薪水:{{ job.salary }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("张三");
    let age = ref(24);
    let job = ref({
      type: "web",
      salary: "10k",
    });

    function changeInfo() {
      // console.log(name, age);
      name.value = "李四";
      age.value = 26;

      // console.log(job.value);
      job.value.type = "java";
      job.value.salary = "15k";
    }

    return {
      name,
      age,
      changeInfo,
      job,
    };
  },
};
</script>

<style>
</style>