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>