系列文章目录

Vue3 —— 创建 Vue3.0 工程

Vue3 —— 常用 Composition API（零）（setup函数、ref函数、reactive函数、响应式、reactive对比ref）

Vue3 —— 常用 Composition API（一）（computed函数、watch函数、watchEffect函数、生命周期钩子）

Vue3 —— 常用 Composition API（二）（hook 函数、toRef 和 toRefs）

Vue3 —— 其他 Composition API（shallowReactive、shallowRef、readonly、shallowReadonly、toRaw、markRaw…）

Vue3 —— 新的组件及一些改变（Fragment、Teleport、Suspense、其他的改变）

---

---

一、拉开序幕的 setup

1. setup 的理解

1. setup 是 Vue3 中一个新的配置项，值为一个函数。
2. setup 是所有 Composition API（组合API）“表演的舞台”
3. 组件中所用到的：数据、方法等，都要配置在 setup 中

2. setup 函数的两种返回值

1. 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点）

	<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,
	    };
	  },
	};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

显示效果如下：

2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

	<template>
	  <h2></h2>
	</template>
	
	<script>
	export default {
	  name: "App",
	  setup() {
	    return () => h('h2', 'I am studying Vue3.')
	  },
	};
1
2
3
4
5
6
7
8
9
10
11

显示效果如下：

3. 注意点

1. Vue 3 不要与 Vue2.x 配置混用

2. setup 不能是一个 async 函数，因为返回值不再是一个return 对象，而是 promise，模板看不到 return 对象中的属性

注意： 后期用 Suspense 和异步组件配合，也可以在 setup 里返回一个 Promise 实例

二、ref 函数

1. 作用

定义一个 响应式 的数据

2. 语法

	const xxx = ref(initValue)
1

1. 创建一个包含响应式数据的引用对象（reference对象，简称 ref 对象）
2. JS中操作数据：xxx.value
3. 模板中读取数据：不需要.value，直接
   {{xxx}}

3. 备注

1. 接收的数据可以是：基本类型、也可以是对象类型
2. 基本类型的数据：响应式依然是靠 Object.defineProperty() 的 get 和 set 完成的
3. 对象类型的数据：内部 “求助” 了 Vue3.0 中的一个新函数—— reactive函数

4. 实例

1. 引入 ref，用于响应式
2. setup 里面的属性用 ref 包裹成响应式数据
3. 基本类型的数据使用 .value 来改变
4. 对象类型的数据使用 .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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

改变前的效果：

改变前后的效果：

三、reactive 函数

1. 作用

定义一个 对象类型 的响应式数据（基本类型使用 ref 函数）

2. 语法

接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象）

	const 代理对象 = reactive(源对象)
1

3. 备注

1. reactive 定义的响应式数据是 “深层次的”
2. 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

4. 实例

1. 把所有的属性放在 person 对象中
2. 通过 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

修改前：

修改后：

四、Vue3.0 的响应式

1. 实现原理

1. 通过 Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
2. 通过 Reflect（反射）：对源对象的属性进行操作。

2. 响应式原理

1. get 用于读取、set 用于修改和追加、deleteProperty 用于删除
2. 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)
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

测试：

五、reactive 对比 ref

1. 从定义数据角度对比

1. ref 用来定义：基本类型数据
2. reactive 用来定义：对象（数组）类型数据
3. 备注：ref 也可以用来定义对象（或数组）类型数据，它内部会自动通过 reactive 转为代理对象

2. 从原理角度对比

1. ref 通过 Object.defineProperty() 的 get 和 set 来实现响应式（数据劫持）
2. reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect 操作源对象内部的数据

3. 从使用角度对比

1. ref 定义的数据：操作数据需要 .value，读取数据时模板中直接读取不需要 .value
2. 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

setup 在 beforeCreate 之前执行：

2. setup 的参数

1. props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
2. context：上下文对象

1. attrs：值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性，相当于 this.$attrs
2. slots：收到的插槽内容，相当于 this.$slots
3. emit：分发自定义事件的函数，相当于 this.$emit

3. 实例：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

输出结果如下：

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中