vue3—ref函数

在vue3中，我们可以使用ref函数创建一个响应式数据。当数据发生改变时，自动更新页面的值。

比如下面基础页面：

<template>
  <div>
    姓名：{{ name }}。 年龄：{{ age }}
    <br />
    <button @click="change">修改信息</button>
  </div>
</template>
<script>
export default {
  name: "App",
  //setup函数
  setup() {
    //定义数据
    let name = "张三";
    let age = 19;
    // 定义方法
    function change() {
      this.name = "李四";
      this.age = 12;
    }

    return {
      name,
      age,
      change,
    };
  },
};
</script>

我们引入ref函数，并将数据写成对象形式：

<template>
  <div>
    姓名：{{ people.name }}。 年龄：{{ people.age }}
    <br />
    <button @click="change">修改信息</button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "App",
  //setup函数
  setup() {
    //定义数据
    let people = ref({
      name: "张三",
      age: 19,
    });
    // 定义方法
    function change() {
      // this.name = "李四";
      // this.age = 12;
      people.value.name='李四'
      people.value.age=20
    }

    return {
      // name,
      // age,
      change,
      people,
    };
  },
};
</script>

效果：