系列文章目录
文章目录
一、拉开序幕的 setup
1. setup 的理解
- setup 是 Vue3 中一个新的配置项,值为一个函数。
- setup 是所有 Composition API(组合API)“表演的舞台”
- 组件中所用到的:数据、方法等,都要配置在 setup 中
2. setup 函数的两种返回值
- 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(
重点
)
<template>
<h2>一个人的信息</h2>
<h3>姓名:{
{
name }}</h3>
<h3>年龄:{
{
age }}</h3>
<button @click="sayHello">说话</button>
</template>
<script>
export default {
name: "App",
// 此处只是测试一下setup,暂时不考虑响应式
setup() {
// 数据
let name = "张三";
let age = 18;
// 方法
function sayHello() {
alert(`我是${
name},我${
age}岁了`);
}
// 返回一个对象(常用)
return {
name,
age,
sayHello,
};
},
};
显示效果如下:
- 若返回一个渲染函数:则可以自定义渲染内容。(了解)
<template>
<h2></h2>
</template>
<script>
export default {
name: "App",
setup() {
return () => h('h2', 'I am studying Vue3.')
},
};
显示效果如下:
3. 注意点
- Vue 3 不要与 Vue2.x 配置混用
- setup 不能是一个 async 函数,因为返回值不再是一个return 对象,而是 promise,模板看不到 return 对象中的属性
二、ref 函数
1. 作用
定义一个
响应式
的数据
2. 语法
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(reference对象,简称 ref 对象)
- JS中操作数据:xxx.value
- 模板中读取数据:不需要.value,直接
<div>{ {xxx}}<div>
3. 备注
- 接收的数据可以是:基本类型、也可以是对象类型
- 基本类型的数据:响应式依然是靠
Object.defineProperty()
的get
和set
完成的- 对象类型的数据:内部 “求助” 了 Vue3.0 中的一个新函数——
reactive函数
4. 实例
- 引入 ref,用于响应式
- setup 里面的属性用 ref 包裹成响应式数据
- 基本类型的数据使用
.value
来改变- 对象类型的数据使用
.value.xxx
来改变
<template>
<h2>一个人的信息</h2>
<h3>姓名:{
{
name }}</h3>
<h3>年龄:{
{
age }}</h3>
<h4>工作种类:{
{
job.type }}</h4>
<h4>薪资:{
{
job.salary }}</h4>
<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 changeInfo() {
name.value = "李四";
age.value = 28;
job.value.type = "算法工程师";
job.value.salary = "60K";
}
// 返回一个对象(常用)
return {
name,
age,
job,
changeInfo,
};
},
};
</script>
改变前的效果:
改变前后的效果:
三、reactive 函数
1. 作用
定义一个
对象类型
的响应式数据(基本类型使用 ref 函数)
2. 语法
接收一个对象(或数组),返回一个代理对象(Proxy 的实例对象)
const 代理对象 = reactive(源对象)
3. 备注
- reactive 定义的响应式数据是 “深层次的”
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作
4. 实例
- 把所有的属性放在 person 对象中
- 通过 reactive 把对象交出去
<template>
<div>
<h3>姓名:{
{
person.name }}</h3>
<h3>年龄:{
{
person.age }}</h3>
<h3>工作种类:{
{
person.job.type }}</h3>
<h3>爱好:{
{
person.hobby }}</h3>
<h3>薪资:{
{
person.job.salary }}</h3>
<h3>测试C:{
{
person.job.a.b.c }}</h3>
<button @click="changeInfo">修改人的信息</button>
</div>
</template>
<script>
import {
reactive } from "vue";
export default {
name: "App",
setup() {
let person = reactive({
name: "张三",
age: 18,
job: {
type: "前端工程师",
salary: "30K",
a: {
b: {
c: 99,
},
},
},
hobby: ["抽烟", "喝酒", "烫头"],
});
function changeInfo() {
(person.name = "李四"),
(person.age = 28),
(person.job.type = "算法工程师"),
(person.job.salary = "60K"),
(person.job.a.b.c = 200),
(person.hobby[0] = "敲代码");
}
return {
person,
changeInfo,
};
},
};
</script>
修改前:
修改后:
四、Vue3.0 的响应式
1. 实现原理
- 通过 Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等。
- 通过 Reflect(反射):对源对象的属性进行操作。
2. 响应式原理
- get 用于读取、set 用于修改和追加、deleteProperty 用于删除
- target 相当于 person,propName 相当于 name / age
// 源数据
let person = {
name: '张三',
age: 18
}
// 模拟Vue3中的响应式
const p = new Proxy(person, {
// 读取p的某个属性时调用
get(target, propName) {
console.log(`有人读取了p身上的${
propName}属性`);
return Reflect.get(target, propName)
},
// 修改或追加p的某个属性时调用
set(target, propName, value) {
console.log(`有人修改了p身上的${
propName}属性,我要去更新页面了`);
Reflect.set(target, propName, value)
},
// 删除p的某个属性时调用
deleteProperty(target, propName) {
console.log(`有人删除了p身上的${
propName}属性,我要去更新页面了`);
return Reflect.deleteProperty(target, propName)
}
})
测试:
五、reactive 对比 ref
1. 从定义数据角度对比
- ref 用来定义:基本类型数据
- reactive 用来定义:对象(数组)类型数据
- 备注:ref 也可以用来定义对象(或数组)类型数据,它内部会自动通过 reactive 转为代理对象
2. 从原理角度对比
- ref 通过 Object.defineProperty() 的
get
和set
来实现响应式(数据劫持)- reactive 通过使用
Proxy
来实现响应式(数据劫持),并通过Reflect
操作源对象内部的数据
3. 从使用角度对比
- ref 定义的数据:操作数据需要
.value
,读取数据时模板中直接读取不需要.value
- reactive 定义的数据:操作数据与读取数据:均不需要
.value
六、setup 的两个注意点
1. setup 执行的时机
在 beforeCreate 之前执行一次,this 是 undefined
测试 setup 的执行时机
<template>
<div>
<h3>姓名:{
{
person.name }}</h3>
<h3>年龄:{
{
person.age }}</h3>
</div>
</template>
<script>
import {
reactive } from "vue";
export default {
name: "Demo",
beforeCreate() {
console.log("--beforeCreate--");
},
setup() {
console.log("--setup--", this);
let person = reactive({
name: "张三",
age: 18,
});
return {
person,
};
},
};
</script>
setup 在 beforeCreate 之前执行:
2. setup 的参数
- props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性
- context:上下文对象
- attrs:值为对象,包含:组件外部传递过来,但没有在 props 配置中声明的属性,相当于 this.$attrs
- slots:收到的插槽内容,相当于 this.$slots
- emit:分发自定义事件的函数,相当于 this.$emit
- 实例:
App.vue
<template>
<div>
<Demo @hello="showHelloMsg" msg="Hello" school="清华大学">
<template v-slot:qwe>
<span>清华大学</span>
</template>
</Demo>
</div>
</template>
<script>
import Demo from "./components/Demo.vue";
export default {
name: "App",
components: {
Demo },
setup() {
function showHelloMsg(value) {
alert(`你好啊,你触发了hello事件,我收到的参数:${
value}!`);
}
return {
showHelloMsg,
};
},
};
</script>
Demo.vue
<template>
<div>
<h3>姓名:{
{
person.name }}</h3>
<h3>年龄:{
{
person.age }}</h3>
<button @click="test">测试触发一下Demo组件的Hello组件</button>
</div>
</template>
<script>
import {
reactive } from "vue";
export default {
name: "Demo",
props: ["msg", "school"],
emits: ["hello"],
setup(props, context) {
console.log("--setup--", props);
console.log("--setup--", context);
console.log("--setup--", context.attrs); //相当于Vue2中的$attrs
console.log("--setup--", context.emit); //触发自定义事件
console.log("--setup--", context.slots); //插槽
let person = reactive({
name: "张三",
age: 18,
});
function test() {
context.emit("hello", 200);
}
return {
person,
test,
};
},
};
</script>
输出结果如下:
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路,持续更新中