Vue3笔记 - ref函数

3.ref函数

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

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

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },

  setup() {

    // name ---> RefImpl{(get,set)....value}   引用的实例对象
    let name = ref("张三");
    // age ---> RefImpl{(get,set)....value}   引用的实例对象   对于基本数据类型的数据，用的ref
    let age = ref(19);
    // job ---> RefImpl{(get,set)....value}  value:{type:   --X-> RefImpl,salary:  --X-> RefImpl}引用的实例对象
    // ref处理基本数据类型用的ref的数据劫持，对象使用的是Proxy 
    let job = ref({ type: "前端工程师", salary: "20k" });
    let a = 200;

    function changeInfo() {
      // name.value = "jack";
      // age.value = 49;
      console.log(job.value);
      job.value.type.value = "算法工程师";
    }
    return {
      name,
      age,
      job,
      changeInfo,
    };
  },
};


</script>

总结一下：

1. 这一节的重点主要是响应式数据，通过导入vue中的ref,绑定ref，然后修改更新使用变量名.value = 新值
2. value值类似于vue2的数据代理，有get和set