1.內部監聽生命週期函數
在Vue組件中，可以用過$on,$once去監聽所有的生命週期鉤子函數，如監聽組件的updated鉤子函數可以寫成 this.$on('hook:updated', () => {})。
2.外部監聽生命週期函數
<template>
<!--通過@hook:updated監聽組件的updated生命鉤子函數-->
<!--組件的所有生命週期鉤子都可以通過@hook:鉤子函數名 來監聽觸發-->
<custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
components: {
CustomSelect
},
methods: {
$_handleSelectUpdated() {
console.log('custom-select組件的updated鉤子函數被觸發')
}
}
}
</script>
3.Vuex替代方案---Vue.observable（小項目使用Vuex太累贅）
（1）創建store
import Vue from 'vue'
// 通過Vue.observable創建一個可響應的對象
export const store = Vue.observable({
userInfo: {},
roleIds: []
})
// 定義 mutations, 修改屬性
export const mutations = {
setUserInfo(userInfo) {
store.userInfo = userInfo
},
setRoleIds(roleIds) {
store.roleIds = roleIds
}
}
（2）在組件中引用
<template>
<div>
{{ userInfo.name }}
</div>
</template>
<script>
import { store, mutations } from '../store'
export default {
computed: {
userInfo() {
return store.userInfo
}
},
created() {
mutations.setUserInfo({
name: '張三'
})
}
}
</script>
4.深度watch與watch立即觸發回調
（1）watch立即觸發回調：
export default {
watch: {
// 在值發生變化之後，重新加載數據
searchValue: {
// 通過handler來監聽屬性變化, 初次調用 newValue爲""空字符串， oldValue爲 undefined
handler(newValue, oldValue) {
if (newValue !== oldValue) {
//加載數據
}
},
// 配置立即執行屬性
immediate: true
}
}
}
（2）深度監聽
watch: {
// 在值發生變化之後，重新加載數據
formData: {
// 需要注意，因爲對象引用的原因， newValue和oldValue的值一直相等
handler(newValue, oldValue) {
// 在這裏標記頁面編輯狀態
},
// 通過指定deep屬性爲true, watch會監聽對象裏面每一個值的變化
deep: true
}
5.函數式組件
export default {
// 通過配置functional屬性指定組件爲函數式組件
functional: true,
// 組件接收的外部屬性
props: {
avatar: {
type: String
}
},
/**
* 渲染函數
* @param {*} h
* @param {*} context 函數式組件沒有this, props, slots等都在context上面掛着
*/
render(h, context) {
const { props } = context
if (props.avatar) {
return <img src={props.avatar}></img>
}
return <img src="default-avatar.png"></img>
}
}
（1）爲什麼使用函數式組件
函數式組件不需要實例化，無狀態，沒有生命週期，所以渲染性能要好於普通組件；
函數式組件結構比較簡單，代碼結構更清晰
（2）函數式組件與普通組件的區別
函數式組件需要在聲明組件是指定functional；
函數式組件不需要實例化，所以沒有this,this通過render函數的第二個參數來代替；
函數式組件沒有生命週期鉤子函數，不能使用計算屬性，watch等等；
函數式組件不能通過$emit對外暴露事件，調用事件只能通過context.listeners.click的方式調用外部傳入的事件；
因爲函數式組件是沒有實例化的，所以在外部通過ref去引用組件時，實際引用的是HTMLElement ；
函數式組件的props可以不用顯示聲明，所以沒有在props裏面聲明的屬性都會被自動隱式解析爲prop,而普通組件所有未聲明的屬性都被解析到$attrs裏面，並自動掛載到組件根元素上面(可以通過inheritAttrs屬性禁止)；
另：在Vue2.5之前，使用函數式組件只能通過JSX的方式，在之後，可以通過模板語法來生命函數式組件
<!--在template 上面添加 functional屬性-->
<template functional>
<img :src="avatar ? avatar : 'default-avatar.png'" />
</template>
<!--函數式組件的props可以不用顯示聲明，所以可以省略聲明props-->
6.created與mounted區別
created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。
mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
created中主要用來初始化 / 獲取數據之類，mounted()中掛載到具體的DOM節點。
補充1：請求初始化數據一般放在created中即可，如果你有用keep-alive緩存組件的情況下，比如有些數據你只需加載一次的就放在created，需要根據一些參數重複加載的最好寫方法然後放在mounted。請求數據太複雜，太多也可以放在mounted中。
引用：http://www.mamicode.com/info-detail-2848817.html https://www.jianshu.com/p/ff8f9bbc7551
補充2：如果你修改了某個dom中的數據，視圖並不會立即更新。Vue 實現響應式並不是數據發生變化之後 DOM 立即變化，而是按一定的策略進行 DOM 的更新。，此時獲取關於此dom的一切操作都是無效的，怎麼辦？在nextTick的回調中執行即可。$nextTick 是在下次 DOM 更新循環結束之後執行延遲迴調，在修改數據之後使用 $nextTick，則可以在回調中獲取更新後的 DOM。