Vue開發技巧總結

1. 內部監聽生命週期函數

this.$on('hook: 生命週期函數', () => {}) 或 this.$once('hook: 生命週期函數', () => {})
 		this.timeId = setTimeout(() => {
            
        }, 1000);
        

 1. 	this.$on('hook: beforeDestory', () => {
                clearTimeout(this.timeId);
            })

    

 2. 	this.$once('hook: beforeDestory', () => {
            clearTimeout(this.timeId);
        })

監聽當前實例上的自定義事件
可以監聽生命週期函數, once 只能觸發一次, 一旦觸發之後，監聽器就會被移除

好處在於： 開啓一個事件監聽器的同時，就在 beforeDestory 生命週期中掛載一個刪除事件監聽器的事件

2. 外部監聽生命週期函數

@hook:生命週期="函數"

<my-list @hook:updated="$_handleSonUpdated"></my-list>

$_handleSonUpdated () {
    console.log('監聽到子組件的 updated 事件');
}

3. watch監聽，深度監聽和立即監聽

watch: {
    count: {
        handler: function (val, old) {
            // 一系列的操作
        },
        deep: true, // 深度監聽
        immediate: true // 立即觸發
    }
}

4. 父組件調用子組件的方法

<my-list ref="myList"></my-list>

// 父組件中調用子組件的方法, closeList() 是子組件中的方法
this.$refs.myList.closeList()