? 簡單的聊完前端路由，這里開始繼續(xù)講app.vue這個文件凡怎。在app.vue中有一個很常用的設(shè)計方式校焦，就是利用window.onresize 方法動態(tài)監(jiān)聽瀏覽器窗口變化，去實(shí)現(xiàn)頁面的寬度和高度自適應(yīng)统倒。
這里先介紹下這兩種方案中要使用到的鉤子函數(shù)寨典。
beforeCreate(創(chuàng)建前)，在數(shù)據(jù)觀測和初始化事件還未開始
created(創(chuàng)建后)房匆，完成數(shù)據(jù)觀測耸成，屬性和方法的運(yùn)算报亩，初始化事件，$el屬性還沒有顯示出來
beforeMount(載入前)井氢，在掛載開始之前被調(diào)用弦追，相關(guān)的render函數(shù)首次被調(diào)用。實(shí)例已完成以下的配置：編譯模板花竞，把data里面的數(shù)據(jù)和模板生成html劲件。注意此時還沒有掛載html到頁面上。
mounted(載入后)约急，在el 被新創(chuàng)建的 vm.$el 替換零远，并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象烤宙。完成模板中的html渲染到html頁面中遍烦。此過程中進(jìn)行ajax交互俭嘁。
beforeUpdate(更新前)躺枕，在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前供填」赵疲可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程近她。
updated(更新后)叉瘩，在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時粘捎，組件DOM已經(jīng)更新薇缅，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下攒磨，應(yīng)該避免在此期間更改狀態(tài)泳桦，因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用娩缰。
beforeDestroy(銷毀前)灸撰，在實(shí)例銷毀之前調(diào)用。實(shí)例仍然完全可用拼坎。 destroyed(銷毀后)浮毯，在實(shí)例銷毀之后調(diào)用。調(diào)用后泰鸡，所有的事件監(jiān)聽器會被移除债蓝，所有的子實(shí)例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用盛龄。
在一般情況下使用的情況是：
created:進(jìn)行ajax請求異步數(shù)據(jù)的獲取饰迹、初始化數(shù)據(jù)
mounted:掛載元素dom節(jié)點(diǎn)的獲取
nextTick:針對單一事件更新數(shù)據(jù)后立即操作dom
updated:任何數(shù)據(jù)的更新器虾，如果要做統(tǒng)一的業(yè)務(wù)邏輯處理
watch:監(jiān)聽數(shù)據(jù)變化，并做相應(yīng)的處理
這里介紹兩種方案：
1.在 data 中去 定義 一個記錄寬度是 屬性
data: { return { screenWidth: document.body.clientWidth // 設(shè)置默認(rèn)值 } }
2.在 vue mounted 的時候 去掛載一下 window.onresize 方法
mounted () {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?const that = this window.onresize = () => {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return (() => {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? window.screenWidth = document.body.clientWidth? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? that.screenWidth = window.screenWidth })() }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
3.watch 去監(jiān)聽這個 屬性值的變化蹦锋，如果發(fā)生變化則講這個 val 傳遞給 this.screenWidth
watch: {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?screenWidth (val) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.screenWidth = val }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
4.優(yōu)化因?yàn)轭l繁觸 resize 函數(shù)兆沙，導(dǎo)致頁面卡頓的問題
watch: {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?screenWidth (val) { if (!this.timer) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.screenWidth = val? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.timer = true? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let that = this setTimeout(function () {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // that.screenWidth = that.$store.state.canvasWidth? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(that.screenWidth) that.init() that.timer = false }, 400) } }? ? ? ? ?}
這種真的比較麻煩，介紹第二種比較簡單莉掂。
在app.vue中還可以做很多其他項(xiàng)目全局工作葛圃，比如心跳機(jī)制、關(guān)閉瀏覽器窗口退出發(fā)送請求等憎妙。
這篇主要聊app.vue中一些可以用在實(shí)際項(xiàng)目中的方法跟設(shè)計思路库正。下一篇我們的目光就要放在main.js，這個項(xiàng)目的入口文件上了厘唾。
