vue过渡,vue3组合式API详细介绍

7.过渡效果

vue提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画

• Transition会在一个元素或组件进入和离开DOM时应用动画
• TransitionGroup会在一个v-for列表中的元素或组件被插入,移动,或移除时应用动画

7-1过渡效果

过渡模式

  ...

1
2
3

组件间过渡

 
            
        
1
2
3

7-2列表过渡

TransitionGroup是一个内置组件,用于对v-for列表中的元素或组件的插入,移除和顺序改变添加动画效果

区别

• 默认情况下,他不会渲染一个容器元素,但是可以通过tag属性来指定一个元素作为容器元素来渲染

  

• 过渡模式在这里不可用，因为我们不再是在互斥的元素之间进行切换。

• 列表中的每个元素必须有一个独一无二的key属性

• css过渡的动画是会被应用在列表的元素上,而不是容器元素上

 
          
          
            

            {{ data }}
                删除
        
          
        
1
2
3
4
5
6
7
8
9
10
11

移动动画(列表)

当某一项被插入或移除时，它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题：

.list-move /* 对移动中的元素应用的过渡 */
{
  transition: all 0.5s ease;
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
1
2
3
4
5
6
7
8
9
10

7-3 可复用过渡

得益于 Vue 的组件系统，过渡效果是可以被封装复用的。要创建一个可被复用的过渡，我们需要为 Transition 组件创建一个包装组件，并向内传入插槽内容：

app.vue

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

kerwinTransition.vue

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

animate.css库的使用

官网地址:https://animate.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
53
54
55
56

四.vue3组合式API

起初定义的是Vue-Function-API，后经过社区意见收集，更名为Vue-Composition-API.
1

1.reactive

作用:包装响应式对象,非包装对象,可以认为是模版中的状态
1

• template可以放兄弟节点
• reactive类似于useState,如果参数是字符串,数字,布尔,null,undefined等基本数据类型,会报警告,value cannot be made reactive, 所以应该设置对象，这样可以数据驱动页面

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

2.ref

作用:创建一个包装式对象,含有一个响应式属性value,它和reactive的差别,就是前者没有包装属性value,还有就是前者不能定义基本的数据类型

1
2

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

2-1ref嵌套在reactive中

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

2-2ref绑定节点

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

2-3toRefs

默认直接展开State,那么此时reactive数据变成普通数据,通过toRefs,可以把reactive里的每个属性,转换为ref对象,这样展开后,就会变成多个ref对象,依然具有响应式特性
目的:目的是为了在传递属性时保留响应性
1
2

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

3.计算属性

computed是一个回调函数

模糊搜索案例

ba
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

对上述代码进行优化

创建一个hooks文件夹

在此下面创建一个useFilter.js文件

import { computed, ref } from "vue"
function useFilter(datalist) {
    const search = ref("");
const computedList = computed(() => {
    return datalist.value.filter(item => item.includes(search.value))
    
})
return {
    search,
    computedList
}
}
export default (useFilter);
1
2
3
4
5
6
7
8
9
10
11
12
13

App.vue

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

4.watch

计算属性允许我们声明性计算衍生值,然而在有些情况下,我们需要状态在状态变化时执行一些"副作用":列如更改DOM,或是根据异步操作的结果去修改另一处的状态。

在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数：

第一个参数是监听的值，第二个参数可以执行监听时候的回调

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

5. VCA中的watchEffect函数

（1）watch：

• 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(可以添加immediate:true),则页面一加载就可以箭头数据的变化

        watch(myText, (newValue, oldValue) => {
              // 异步
              console.log("异步",newValue,oldValue,myText);
          }, { immediate: true, deep: true })
  1
  2
  3
  4

• 参数可以拿到当前值和原始值

• 可以侦听多个数据的变化，用一个侦听器承载

（2）watchEffect：

• 立即执行，没有惰性，页面的首次加载就会执行。
• 自动检测内部代码，代码中有依赖 便会执行
• 不需要传递要侦听的内容 会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数
• 不能获取之前数据的值 只能获取当前值
• 一些异步的操作放在这里会更加合适

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

6. prop & emit

App.vue

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

Child.vue

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

7. VCA中provide&inject

provide、inject 是 vue-composition-api 的一个功能：依赖注入功能

App.vue

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

Navbar

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

Tabber

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
53
54
55

8. VCA中的生命周期