1 <template>
2 <div>
3 <h2>this is from C.vue</h2>
4 </div>
5 </template>
6
7 <script>
8 export default {
9 name: 'C',
10 data () {
11 return {
12 msg: 'hello C.cue',
13 moneyInit: 100
14 }
15 },
16 computed: {
17 money () {
18 return this.moneyInit * 100
19 }
20 },
21 methods: {
22 test () {
23 console.log('this is a test')
24 }
25 },
26 beforeCreate () {
27 console.log('beforeCreate')
28
29 // this的結果是VueComponent
30 console.log('this:', this)
31 // beforeCreate時 data,computed都不能訪問，爲undefined
32 console.log('this.msg:', this.msg, 'this.money:', this.money)
33 },
34 created () {
35 console.log('created')
36 // created時，data,computed,methods均能訪問
37 console.log('this.msg:', this.msg, 'this.money:', this.money)
38 this.test()
39 }
40 }
41 </script>
42
43 <style lang="scss" scoped>
44
45 </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唯一不同的地方。
1 <template>
2 <div>
3 <div ref="tag">{{msg}}</div>
4 <div>msg1:{{msg1}}</div>
5 <div>msg2:{{msg2}}</div>
6 <button @click="changeMsg">click it</button>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'C',
13 data () {
14 return {
15 msg: '',
16 msg1: '',
17 msg2: ''
18 }
19 },
20 methods: {
21 changeMsg () {
22 this.msg = 'hello'
23 // this.msg1沒有立即更新，沒能獲取到更新後的DOM
24 this.msg1 = this.$refs.tag.innerHTML
25 // this.msg2成功渲染，成功獲取到了更新後的DOM
26 this.$nextTick(() => {
27 this.msg2 = this.$refs.tag.innerHTML
28 })
29 }
30 }
31 }
32 </script>
33
34 <style lang="scss" scoped>
35
36 </style>