Hooks
都是一个一个 function,在生命周期中有些时刻发生了,就会去执行对应的 Hooks function
!
created hook
会初始化所有状态和事件,所以在beforeCreate
中无法取得任何元件的内容。不论是 data 或是 methods 都无法取得!
ex:
export default {
data() {
return {
val: 'hello'
}
},
beforeCreate() {
console.log('Value of val is: ' + this.val) // undefined!!!
}
}
使用场景例如:执行一些不需用到实体 data 属性的逻辑或是 API。
接着进入 created()
.....属性都绑定好了,但还没挂载到 DOM
上。
// 使用和上面一样的例子
export default {
data() {
return {
val: 'hello'
}
},
created() {
console.log('Value of val is: ' + this.val) // 印出 Value of val is: hello
}
}
使用场景例如: 打完某只 API 後需要储存资料,就可在
created()
中读取/赋值给 data。
进到 Vue 3
使用 Composition API
,beforeCreate
和 created
都改使用 setup()
,代表原本写在
beforeCreate
和 created
的内容都改放在 setup
中!
ex:
import { ref } from 'vue'
export default {
setup() {
const val = ref('hello')
console.log('Value of val is: ' + val.value)
return {
val
}
}
}
mounting hooks
处理元件的挂载和渲染,最最最最常见使用的 hooks
!
beforeMount()
和 onBeforeMount()
元件尚未渲染以及挂载,此时根元素也还不存在。
mounted()
和 onMounted()
在元件第一次渲染之後会被呼叫的 hooks,此时元素已经可以直接从 DOM 取得。
ex:
// Composition API 使用 refs 取得 DOM
import { ref, onMounted } from 'vue'
export default {
setup() { /* Composition API */
const root = ref(null)
onMounted(() => {
console.log(root.value)
})
return {
root
}
},
mounted() { /* Options API */
console.log(this.$el)
}
}
当状态被修改时,会触发再次渲染
beforeUpdate()
和 onBeforeUpdate()
当资料改变,元件被重新渲染前! 在画面改变前,适合在此处去手动更新 DOM,例如移除事件监听
也可以用在追踪元件是否被编辑或是追踪事件去取消动作(例如:回复功能 undo)
updated()
和 onUpdated()
当 DOM 更新後会去呼叫 updated
ex:
import { ref, onBeforeUpdate, onUpdated } from 'vue'
export default {
setup () {
const count = ref(0)
const val = ref(0)
onBeforeUpdate(() => {
count.value++;
console.log("beforeUpdate");
})
onUpdated(() => {
console.log("updated() val: " + val.value)
})
return {
count, val
}
}
}
大部分时候,比较多会使用 watchers
去侦测资料是否改变,因为watchers
会提供资料更改前後的值。
生命周期未完待续.....
每日一句:
每天的文章都在比短.....
<<: 用 Line LIFF APP 实现信箱验证绑定功能(5) - 前後端认证功能
>>: 第 13 天 坚持刷题持续进步( leetcode 016 )
If you want your iPhone to be more original and st...
表格 (table) 表格是一个由列和栏组成的结构化资料(tabular data)。表格能帮助你快...
在上一章我们使用的仓库内的chart,这章後面会介绍怎麽建立自己的chart,不过在建立自己的的ch...
前言 今天继续挑战top 100 liked中sum相关的题目─416. Partition Equ...
每家金流的流程都不太一样,但基本上有牵扯到金钱的东西,肯定会有一堆验证机制, 我们先看一下永丰金的流...