<template>
<div>
<h2>this is from C.vue</h2>
</div>
</template> <script>
export default {
name: 'C',
data () {
return {
msg: 'hello C.cue',
moneyInit: 100
}
},
computed: {
money () {
return this.moneyInit * 100
}
},
methods: {
test () {
console.log('this is a test')
}
},
beforeCreate () {
console.log('beforeCreate') // this的结果是VueComponent
console.log('this:', this)
// beforeCreate时 data,computed都不能访问，为undefined
console.log('this.msg:', this.msg, 'this.money:', this.money)
},
created () {
console.log('created')
// created时，data,computed,methods均能访问
console.log('this.msg:', this.msg, 'this.money:', this.money)
this.test()
}
}
</script> <style lang="scss" scoped> </style>
<template>
<div id="app">
<div @click="changeMsg">this is from app.vue {{msg}}</div>
<router-link :to="{name:'A'}">to A Page</router-link>
<router-link :to="{name:'B'}" tag="div">to B Page</router-link>
<router-link :to="{name:'C'}">to C Page</router-link>
<router-view/>
</div>
</template> <script>
export default {
name: 'App',
data () {
return {
msg: 'hello'
}
},
methods: {
changeMsg () {
if (this.msg === 'hello') {
this.msg = 'today'
} else {
this.msg = 'hello'
}
}
},
created () {
// created 时 this.$el还不能访问，DOM还未挂载
console.log('created function from App.vue, this.$el:', this.$el)
},
beforeMount () {
// 注意beforeMount的this.$el也为undefined
console.log('beforeMount function from App.vue, this.$el:', this.$el)
},
mounted () {
// mounted 此时this.$el能访问，vue实例挂载到了DOM上
console.log('mounted function from App.vue, this.$el:', this.$el)
},
// data发生变化，即dom发生变化
beforeUpdate () {
console.log('beforeUpdate function from App.vue')
} }
</script> <style>
#app{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
注意几点：
1. created与mounted都常见于ajax请求，前者如果请求响应时间过长，容易白屏
2. mounted不能保证所有子组件都一起被挂载。如果要等到整个视图更新完毕，使用vm.$nextTick()
nextTick：在vue中，用于处理DOM更新操作。vue里面有个watcher,用于观察数据变化，然后更新DOM，vue并不是每次数据更新都会触发DOM更新，而是将这些操作缓存在一个队列。在一个事件循环结束后，刷新队列，统一执行DOM更新。
vm.$nextTick([callback])将回调延时到下次DOM更新循环结束之后执行。在修改数据后使用这个方法，它会获取更新后的DOM。它的this会绑定到调用的实例上，这是与Vue.nextTick唯一不同的地方。
<template>
<div>
<div ref="tag">{{msg}}</div>
<div>msg1:{{msg1}}</div>
<div>msg2:{{msg2}}</div>
<button @click="changeMsg">click it</button>
</div>
</template> <script>
export default {
name: 'C',
data () {
return {
msg: '',
msg1: '',
msg2: ''
}
},
methods: {
changeMsg () {
this.msg = 'hello'
// this.msg1没有立即更新，没能获取到更新后的DOM
this.msg1 = this.$refs.tag.innerHTML
// this.msg2成功渲染，成功获取到了更新后的DOM
this.$nextTick(() => {
this.msg2 = this.$refs.tag.innerHTML
})
}
}
}
</script> <style lang="scss" scoped> </style>