vue3-04vue3中ref函数( 定义一个响应式的数据)

1.前言

作用: 定义一个响应式的数据

语法:

 const xxx = ref(initValue)

1. 创建一个包含响应式数据的引用对象 (reference对象，简称ref对象)
2. JS中操作数据: xxx .value
3. 模板中读取数据: 不需要.value，直接: <div>{xxx]}</div>

---

备注:

1. 接收的数据可以是: 基本类型、也可以是对象类型
2. 基本类型的数据: 响应式依然是靠 object.defineProperty()的 get 与set 完成的。
3. 对象类型的数据:内部“求助”了Vue3.0中的一个新函数- reactive 函数

2.例子

2.1 未使用ref函数-点击按钮更改信息

<template>
  <div>博主信息</div>
  <div>昵称--{{ name }}</div>
  <div>年龄--{{ age }}</div>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
export default {
  name: "App",
  setup() {
    // 数据
    let name = "岂不闻";
    let age = 25;

    // 方法
    function changeInfo() {
      name = "哟哟";
      age = 15;
      console.log("更改", name, age);
    }
    return {
      name,
      age,
      changeInfo,
    };
  },
};
</script>

<style>
</style>

未双向绑定渲染 ，更改数据渲染失败。

2.2 使用ref

使用get与set进行响应式处理（数据劫持）

2.2.1查看ref后-数据变化

<template>
  <div>博主信息</div>
  <div>昵称--{{ name }}</div>
  <div>年龄--{{ age }}</div>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 数据
    let name = ref("岂不闻");
    let age = ref(25);

    // 方法
    function changeInfo() {
      console.log("更改", name, age);
    }
    return {
      name,
      age,
      changeInfo,
    };
  },
};
</script>

<style>
</style>

引入实例对象 

2.2.2读取ref后的数据

 2.2.2.1基本类型-get 与set

<template>
  <div>博主信息</div>
  <div>昵称--{{ name }}</div>
  <div>年龄--{{ age }}</div>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 数据
    let name = ref("岂不闻");
    let age = ref(25);

    // 方法
    function changeInfo() {
      name.value = "哟哟";
      age.value = 15;
      console.log("更改", name, age);
    }
    return {
      name,
      age,
      changeInfo,
    };
  },
};
</script>

<style>
</style>

 双向绑定渲染 ，更改数据渲染成功。

2.2.2.2对象数据-proxy代理对象封装在vue3中的reactive函数中

在模板中无需.value

<template>
 
  <div>工作-{{ job.type }}--工龄{{ job.workYear }}</div>
  
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 对象
    let job = ref({
      type: "前端开发",
      workYear: "10年",
    });

    return {
      job,
    };
  },
};
</script>
<style>
</style>

修改对象中的属性，第一层.value

<template>
  <div>博主信息</div>

  <div>工作-{{ job.type }}--工龄{{ job.workYear }}</div>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 数据 对象
    let job = ref({
      type: "前端开发",
      workYear: "10年",
    });

    // 方法
    function changeInfo() {
      job.value.type = "java开发";
      job.value.workYear = "6年";
      console.log("更改", job.type, job.workYear);
    }
    return {
      job,
      changeInfo,
    };
  },
};
</script>

<style>
</style>