vue3初学注意点
- 解构会失去响应式功能， 如
const foo = {
x: 0,
y: 0
}
const { x } = foo
console.log(x) // 0
foo.x = 1
console.log(x) // 0
console.log(foo.x) // 1
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
当然你后面对数据重新解构是能获取最新的值的
import { toRefs, reactive } from vue
...
setup() {
const data = reactive({
count: 0
})
const refData = toRefs(data)
return {
...refData
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 生命周期
// vue2 to vue3
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
// new
onRenderTracked
onRenderTriggerd
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
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
# watch
setup 是和beforeCreate 和 created 一起运行的，而且只执行一次，在后续操作中不会再触发。如果需要出发多次需要引入watch 等函数
如果watch中对单独某个响应式对象中的某个属性进行监听，就需要使用方法返回这个对象的属性，否则你直接写某个属性那么也会失去响应式属性
import { watch, reactive } from vue ... setup() { const data = reactive({ count: 0 }) watch([data.count], (newVal, oldVal) => { // 回报如下错误 ... }) }1
2
3
4
5
6
7
8
9
10
// 更正后
watch([() => data.count], (newVal, oldVal) => {
...
})
1
2
3
4
5
2
3
4
5
# defineComponent
defineComponent 这个并没有实现任何逻辑 完全是服务typescript 存在的
# 新功能
# suspens
上次更新: 2022/06/05, 20:31:36