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

系列文章目录

Vue3 —— 创建 Vue3.0 工程

---

---

一、拉开序幕的 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,
	    };
	  },
	};

显示效果如下：

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

	<template>
	  <h2></h2>
	</template>
	
	<script>
	export default {
	  name: "App",
	  setup() {
	    return () => h('h2', 'I am studying Vue3.')
	  },
	};

显示效果如下：

3. 注意点

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

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

二、ref 函数

1. 作用

定义一个 响应式 的数据

2. 语法

	const xxx = ref(initValue)

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>

改变前的效果：

改变前后的效果：

三、reactive 函数

1. 作用

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

2. 语法

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

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

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>

修改前：

修改后：

四、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)
        }
    })

测试：

五、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>

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>

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>

输出结果如下：

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

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