vue3组合式API

组合式API

介绍

介绍：什么是组合式API，组合式API的特点

Vue3提供两种组织代码逻辑的写法：

• 通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法

• 所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法

• 在setup中通过vue提供的函数组织代码实现功能，就是组合式API写法。

• 组合式API有什么好处？可复用，可维护

• ref 是不是一个组合式API？是

setup函数

setup函数是组合式API的入口函数

• setup 函数是 Vue3 特有的选项，作为组合式API的起点
• 从组件生命周期看，它在 beforeCreate 之前执行
• 函数中 this 不是组件实例，是 undefined
• 如果数据或者函数在模板中使用，需要在 setup 返回

基本结构:

比较麻烦,写模板,然后用setup(),再继续再setup里面return数据才能调用

<!-- 不使用语法糖step -->
import { ref } from 'vue'
<template>
  <button @click="toggle">显示隐藏图片</button>
</template>
<script>

export default {
  setup() {
       const show = ref(true);
    };
    return {
      show
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

总结：

• 今后在vue3的项目中几乎用不到 this , 所有的东西通过函数获取。

reactive函数

通常使用它定义 对象类型 响应式数据

• reactive主要是来定义复杂类型数据
• 比较少用

使用步骤：

• 从 vue 中导出 reactive 函数
• 在 setup 函数中，使用 reactive 函数，传入一个普通对象，返回一个响应式数据对象
• 最后 setup 函数返回一个对象，包含该响应式对象即可，模板中可使用

<template>
  <p>
    ref：name is {
  { person1.name }} age is {
  { person1.age }} &nbsp;&nbsp;<button
      @click="changePerson1"
    >
      change person1
    </button>
  </p>
  <p>
    reactive：province is {
  { address.province }} city is {
  { address.city }}
    <button @click="changeAddress">change address</button>
  </p>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  // vue3的几乎所有内容，都放在setup函数中
  setup () {
   
    const person1 = ref({ name: '张三', age: 30 })
    console.log('---person1---', person1)
    const changePerson1 = () => {
      person1.value.name = '李四'
      person1.value.age = 40
    }

    const address = reactive({ province: '江西省', city: '赣州' })
    console.log('---address---', address)
    const changeAddress = () => {
      address.province = '广东'
      address.city = '茂名'
    }

    return {
      person1,
      changePerson1,
      address,
      changeAddress
    }
  }
}
</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

总结：

• reactive 函数通常定义：复杂类型的响应式数据
• 可以转换简单数据吗？不能

ref函数

通常使用它定义响应式数据，不限类型

使用步骤：

• 从 vue 中导出 ref 函数
• 在 setup 函数中，使用 ref 函数，传入普通数据（简单or复杂），返回一个响应式数据
• 最后 setup 函数返回一个对象，包含该响应式数据即可
• 注意：使用 ref 创建的数据，js 中需要 .value ，template 中可省略

总结：

• ref 可以把简单数据或者复杂数据转换成响应式数据，注意使用加上 .value，不过模板可省略。
• 疑问：定义响应式数据使用 ref 还是 reactive 呢？

reactive 与 ref 的选择

知道：在定义响应式数据的时候如何选择reactive和ref

开始分析：

• reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型。

• ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。

• 它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。

  • ref：既可以定义简单类型数据、也可以定义复杂类型数据，但是它在js中访问模型数据的时候，要加一个.value
  • reactive：只能定义复杂类型数据，在js中访问模型数据的时候，不需要加.value（因为它没有）
    *
  • ref这个用得很多，因为它不仅仅可以用于定义模型数据（简单、复杂）还可以操作dom，等等之类

推荐用法：

• 如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。这样就没有 心智负担 。

参考代码：

// 1. 明确表单对象有两个字段
const form = reactive({
  username: '',
  password: ''
})

// 2. 后台返回的数据对象
const data = ref(null)
const res = await axios.get('/user/100')
data.value = res.data
1
2
3
4
5
6
7
8
9
10

总结：

• 在定义响应式数据的函数选择上，遵循：尽量使用 ref 函数支持所有场景，确定字段的对象使用 reactive 可以省去.value。

setup语法糖

简化 setup 固定套路代码 ，让代码更简洁

经常使用

<script setup>
const say = () => console.log('hi')
</script>

1
2
3
4

案例：

<template>
  <img v-show="show" src="../assets/vue.svg" />
  <hr />
  <button @click="toggle">显示隐藏图片</button>
</template>

<script setup>

import { ref } from 'vue'

const show = ref(true)

//方法
const toggle = () => {
  show.value = !show.value
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

小结：

• 在 script setup 中的顶层变量都可以在模板使用，数据，函数，组件。

computed函数

掌握：使用 computed 函数定义计算属性

大致步骤：

• 从 vue 中导出 computed 函数
• 在 setup 函数中，使用 computed 函数，传入一个函数，函数返回计算好的数据
• 最后 setup 函数返回一个对象，包含该计算属性数据即可，然后模板内使用

落地代码：

<script setup>
import { ref, computed } from "vue"

const scoreList = ref([80, 100, 90, 70, 60])
// 计算属性
const betterList = computed(() => scoreList.value.filter((item) => item >= 90))
// 改变数据，计算属性改变
setTimeout(() => {
  scoreList.value.push(92, 66)
}, 3000)
</script>

<template>
  <div>
    <p>分数：{
  { scoreList }}</p>
    <p>优秀：{
  { betterList }}</p>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

总结：

• 使用 computed 定义计算属性，场景：当需要依赖一个数据得到新的数据使用计算属性

watch函数

掌握：使用watch函数监听数据的变化

大致内容：

• 使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听(常用)
• 使用 watch 监听，配置默认执行(

落地代码：

• 使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听

<template>
  <div class="">
    <p>count is {
  { count }} name is {
  { name }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('zhangsan')
const person = ref({
  age: 30,
  sex: '男',
  address: {
    province: '江西省',
    city: '九江市'
  }
})

/*
 * 深度监听1 & 立即执行【用得多】
 * 注意：我们要监听 person.value
 */
 watch(person.value, (val1, val2) => {
   console.log(val1, val2)
})

/**
 * 深度监听1 & 立即执行【用得多】
 * 注意：我们只监听 person中的address属性的改变
 *
 * 参数1：要监听的对象中的对象属性
 * 参数2：回调函数
 * 参数3：立即监听&立即执行的对象
 */
watch(
  () => person.value.address,
  (val1, val2) => {
    console.log(val1, val2)
  },
  {
    deep: true, // 深度监听
    immediate: true // 立即执行
  }
)
</script>

<style scoped></style>


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
49
50
51
52

• 使用 watch 监听，配置默认执行

{
  // 开启深度监听
  deep: true,
  // 默认执行一次
  immediate: true
}

1
2
3
4
5
6
7

总结：

• watch(需要监听的数据,数据改变执行函数,配置对象) 来进行数据的侦听
• 数据：单个数据，多个数据，函数返回对象属性，属性复杂需要开启深度监听
• 配置对象：deep 深度监听 immediate 默认执行

生命周期函数

掌握：vue3的常用生命周期函数

使用步骤：

1. 先从vue中导入以on打头的生命周期钩子函数
2. 在setup函数中调用生命周期函数并传入回调函数
3. 生命周期钩子函数可以调用多次