[Part 6 ] Vue.js 的精随-元件生命周期 (续)

前言

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 APIbeforeCreatecreated 都改使用 setup(),代表原本写在
beforeCreatecreated的内容都改放在 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

1. beforeMount()onBeforeMount()

元件尚未渲染以及挂载,此时根元素也还不存在。

2. 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 会提供资料更改前後的值。

生命周期未完待续.....

每日一句:
每天的文章都在比短...../images/emoticon/emoticon02.gif


<<:  用 Line LIFF APP 实现信箱验证绑定功能(5) - 前後端认证功能

>>:  第 13 天 坚持刷题持续进步( leetcode 016 )

How to change Siri's voice on your iPhone

If you want your iPhone to be more original and st...

Day9 HTML 常用标签: table

表格 (table) 表格是一个由列和栏组成的结构化资料(tabular data)。表格能帮助你快...

Day24-DIY总是比较麻烦 如何建立chart

在上一章我们使用的仓库内的chart,这章後面会介绍怎麽建立自己的chart,不过在建立自己的的ch...

[Day 24] Leetcode 416. Partition Equal Subset Sum (C++)

前言 今天继续挑战top 100 liked中sum相关的题目─416. Partition Equ...

Day03 永丰金API 基础流程 -- Nonce

每家金流的流程都不太一样,但基本上有牵扯到金钱的东西,肯定会有一堆验证机制, 我们先看一下永丰金的流...