17.Composition API（三）高级语法补充

1.生命周期钩子

setup可以用来代替methods、data、watch等这些选项，也可以替代生命周期钩子。

可以直接导入以on开头的函数注册生命周期钩子；

import {onUpdated,onBeforeUpdate} from "vue"
1

然后在setup中使用函数即可：

setup() {
			onUpdated(()=>{
				console.log("updated")
			})
		}
1
2
3
4
5

2.Provide和inject函数

provide给子组件提供数据，一般相邻的组件传递数据使用props，不相邻组件使用provide； inject子组件接受父组件传输过来的数据。

父组件：

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

子组件：

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

3.代码练习

练习1：体会compositionAPI：
将功能模块的代码提取到hook中，方便后期管理和修改；