vue3—ref函数

原文连接：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>

效果：