1.ref函数
-
作用: 定义一个响应式的数据；
-
语法:
const xxx = ref(initValue)-
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
-
JS中操作数据：
xxx.value -
模板中读取数据: 不需要.value，直接：
<div>{{xxx}}</div>
-
-
备注：
-
接收的数据可以是：基本类型、也可以是对象类型。
-
基本类型的数据：响应式依然是靠
Object.defineProperty()的get与set完成的。 -
对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive函数。
-
App.vue
ref定义基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- ref 对于基本类型的数据确实采用
Object.defineProperty()走get与set走的数据劫持方式； - 数据劫持才是响应式的根基， 我的劫持到你修改的数据，才能去写一个逻辑更新页面！
<template>
<h1>一个人的信息</h1>
<h2>姓名{{ name }}</h2>
<h2>年龄{{ age }}</h2>
<button @click="changeInfoHandle">修改个人信息</button>
</template>
<script>
import { ref } from "vue";
export default {
name: "App",
setup() {
/**
* 定义引用对象:
* RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 'ls', _value: 'zs'}
* RefImpl : Reference 引用; Implement 实现。
*
* **/
let name = ref("zs");
let age = ref("18");
// 修改数据
function changeInfoHandle() {
name.value = "ls";
age.value = "20";
console.log(name, age);
}
return {
name,
age,
changeInfoHandle,
};
},
};
</script>
ref定义对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
<template>
<h1>一个人的信息</h1>
<h2>工作种类: {{ job.type }}</h2>
<h2> 薪水: {{ job.salary }}</h2>
<button @click="changeInfoHandle">修改个人信息</button>
</template>
<script>
import { ref, reactive } from "vue";
export default {
name: "App",
setup() {
let job = ref({ type: "前端工程师", salary: "30k" });
// 修改数据
function changeInfoHandle() {
job.value.type = 'UI工程师',
job.value.salary = '60k'
console.log(job);
}
return {
name,
age,
job,
changeInfoHandle,
};
},
};
</script>
2.reactive函数
-
作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用
ref函数） -
语法：
const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象） -
reactive定义的响应式数据是"深层次的"。
-
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
<template>
<h1>一个人的信息</h1>
<h2>姓名: {{ person.name }}</h2>
<h2>年龄: {{ person.age }}</h2>
<h2>工作种类: {{ person.job.type }}</h2>
<h2>薪水: {{ person.job.salary }}</h2>
<h2>测试数据c: {{ person.job.a.b.c }}</h2>
<h2>爱好: {{ person.hobby }}</h2>
<button @click="changeInfoHandle">修改个人信息</button>
</template>
<script>
import { ref, reactive } from "vue";
export default {
name: "App",
setup() {
// reactive() : 处理响应式数据是深层次的;
let person = reactive({
name : "zs",
age :"20",
job : {
type: "前端工程师",
salary: "30k",
a: {
b: {
c: 777
}
}
},
hobby: ['抽烟', '喝酒', '烫头']
})
// 修改数据
function changeInfoHandle() {
person.name = "ls";
person.age = "20";
person.job.type = "UI工程师";
person.job.salary = "60k";
person.job.a.b.c = 999
person.hobby[0] = '学习'
}
return {
person,
changeInfoHandle,
};
}
};
</script>
