什么是ref函数
Vue3中的ref函数是一个用于创建响应式数据的函数。在Vue3中，当组件渲染时，会生成一个响应式数据对象，该对象包含了组件实例的所有数据属性。使用ref函数可以创建一个响应式的数据对象，并且可以在组件的生命周期内进行读取和修改。
具体来说，ref函数接受一个初始值作为参数，并返回一个包含该初始值的响应式对象。这个响应式对象可以被其他组件或函数引用，并且当它被修改时，相关的视图也会自动更新。
ref函数作用
定义一个响应式的数据
语法
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据：
xxx.value- 模板中读取数据: 不需要.value，直接：
<div>{{xxx}}</div>
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠
Object.defineProperty()的get与set完成的。 - 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive函数。
ref源码
function ref(value) {
return createRef(value, false);
}
function createRef(rawValue, shallow) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue, shallow);
}
class RefImpl {
constructor(value, _shallow) {
this._shallow = _shallow;
this.dep = undefined;
this.__v_isRef = true;
this._rawValue = _shallow ? value : toRaw(value);
this._value = _shallow ? value : convert(value);
}
get value() {
trackRefValue(this);
return this._value;
}
set value(newVal) {
newVal = this._shallow ? newVal : toRaw(newVal);
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
triggerRefValue(this, newVal);
}
}
}举例
具体用法如下：
- 在组件的setup函数中，使用ref函数创建一个响应式数据对象。
<template>
<h1>jf的信息</h1>
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<h2>职业： {{ job.type }}</h2>
<h2>工资：{{ job.salary }}</h2>
<button @click="sayInfo">显示信息</button>
<button @click="changeInfo">修改信息</button>
</template>
<script>
import { ref } from "vue";
export default {
name: "App",
setup() {
// 数据
let name = ref("造梦者");
let age = ref(18);
let job = ref({
type: "前端工程师",
salary: "30K",
});
// 方法
function sayInfo() {
alert(`你好${name.value}，你太厉害了吧，薪水${job.value.salary}这么高`);
}
function changeInfo() {
name.value = "三十年后的造梦者";
age.value = 48;
job.value.type = "工程师";
job.value.salary = "30w";
}
return {
name,
age,
job,
sayInfo,
changeInfo,
};
},
};
</script>