vue中的生命週期（二）-運行中

運行中

觸發條件：數據更新
beforeUpdate

<div id="app">
    <Hello></Hello>
</div>
    <template id="hello">
<div>
    <p>{{msg}}</p>
</div>
</template>

Vue.component('Hello',{
template:'#hello',
data(){
return {
msg:'hello 相親了'
}
},
beforeCreate(){
console.log('1-beforeCreate')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('data.json')
// .then(res=>res.json())
// .then(data=>this.msg=data)
// .catch(error=>console.log(error))
},
created(){
console.log('2-created')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('data.json')
// .then(res=>res.json())
// .then(data=>this.msg=data)
// .catch(error=>console.log(error))
},
beforeMount(){
console.log('3-beforeMount')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('data.json')
// .then(res=>res.json())
// .then(data=>this.msg=data)
// .catch(error=>console.log(error))
},
mounted () {
console.log('4-mounted')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
//------------------運行中----------------------
beforeUpdate(){
console.log('beforeUpdate')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
},

})
new Vue({
el:'#app'
})

執行結果：
修改數據前：

修改數據後：

1. 更新前
2. 重新渲染 VDOM , 然後通過diff算法比較兩次vdom,生成patch 補丁對象
3. 這個鉤子函數更多的是內部進行一些操作，我們就不在多幹預了
4. 可以觸發多次

updated

Vue.component('Hello',{
template:'#hello',
data(){
return {
msg:'hello 相親了'
}
},
beforeCreate(){
console.log('1-beforeCreate')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('data.json')
// .then(res=>res.json())
// .then(data=>this.msg=data)
// .catch(error=>console.log(error))
},
created(){
console.log('2-created')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('data.json')
// .then(res=>res.json())
// .then(data=>this.msg=data)
// .catch(error=>console.log(error))
},
beforeMount(){
console.log('3-beforeMount')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
// fetch('data.json')
// .then(res=>res.json())
// .then(data=>this.msg=data)
// .catch(error=>console.log(error))
},
mounted () {
console.log('4-mounted')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
 fetch('./data.json')
 .then( res => res.json())
 .then( data => this.msg = data )
 .catch( error => console.log( error ))
},
//------------------運行中----------------------
beforeUpdate(){
console.log('beforeUpdate')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
},
updated(){
console.log('updated')
console.log('data',this.msg)
console.log('真實dom',document.querySelector('p'))
}
})
new Vue({
el:'#app'
})

執行結果：

1. 更新結束
2. 真實dom得到了，數據也得到了（ 更新後的 ）
3. 動態數據獲取（ 第三方庫實例化 ）