vue3常用 Composition API

1.拉开序幕的setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

3. 组件中所用到的：数据、方法等等，均要配置在setup中。

4. setup函数的两种返回值：

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

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

5. 注意点：

1. 尽量不要与Vue2.x配置混用

   • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。

   • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。

   • 如果有重名, setup优先。

2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

 1 <template>
 2   <h1>一个人的信息</h1>
 3   <h1>姓名：{{name}}</h1>
 4   <h1>年龄：{{age}}</h1>
 5   <h1>工作种类：{{job.type}}</h1>
 6   <h1>工作薪水：{{job.salary}}</h1>
 7   <button @click="changeInfo">修改个人信息</button>
 8 </template>
 9
10 <script>
11 import {ref} from 'vue'
12 export default {
13   name: 'App',
14   setup(){
15     let name = ref("张三")
16     let age = ref(18)
17     let job = ref({
18       type: '前端工程师',
19       salary: '30k'
20     })
21
22     function changeInfo() {
23       name.value = '李四'
24       age.value = 48
25       job.value.type = 'UI设计师'
26       job.value.salary = '35k'
27     }
28     return {
29       name,
30       age,
31       job,
32       changeInfo
33     }
34   }
35 }
36 </script>

2.ref函数

• 作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

  • JS中操作数据： xxx.value

  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

• 备注：

  • 接收的数据可以是：基本类型、也可以是对象类型。

  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

3.reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

• reactive定义的响应式数据是“深层次的”。

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

 1 <template>
 2   <h1>一个人的信息</h1>
 3   <h1>姓名：{{name}}</h1>
 4   <h1>年龄：{{age}}</h1>
 5   <h1>工作种类：{{job.type}}</h1>
 6   <h1>工作薪水：{{job.salary}}</h1>
 7   <button @click="changeInfo">修改个人信息</button>
 8 </template>
 9
10 <script>
11 import {ref, reactive} from 'vue'
12 export default {
13   name: 'App',
14   setup(){
15     let name = ref("张三")
16     let age = ref(18)
17     let job = reactive({
18       type: '前端工程师',
19       salary: '30k'
20     })
21
22     function changeInfo() {
23       name.value = '李四'
24       age.value = 48
25       job.type = 'UI设计师'
26       job.salary = '35k'
27     }
28     return {
29       name,
30       age,
31       job,
32       changeInfo
33     }
34   }
35 }
36 </script>

改进：

 1 <template>
 2   <h1>一个人的信息</h1>
 3   <h1>姓名：{{person.name}}</h1>
 4   <h1>年龄：{{person.age}}</h1>
 5   <h1>工作种类：{{person.job.type}}</h1>
 6   <h1>工作薪水：{{person.job.salary}}</h1>
 7   <button @click="changeInfo">修改个人信息</button>
 8 </template>
 9
10 <script>
11 import { reactive } from 'vue'
12 export default {
13   name: 'App',
14   setup(){
15     let person = reactive({
16       name: '张三',
17       age: 18,
18       job: {
19         type: '前端工程师',
20         salary: '30k'
21       },
22       hobby: ['唱歌', '跳舞', '打麻将']
23     })
24
25
26     function changeInfo() {
27       person.name = '李四'
28       person.age = 48
29       person.job.type = 'UI设计师'
30       person.job.salary = '35k'
31       person.hobby[0] = '学习'
32     }
33     return {
34       person,
35       changeInfo
36     }
37   }
38 }
39 </script>