简单的聊完前端路由，这里开始继续讲app.vue这个文件。在app.vue中有一个很常用的设计方式，就是利用window.onresize 方法动态监听浏览器窗口变化，去实现页面的宽度和高度自适应。
这里先介绍下这两种方案中要使用到的钩子函数。
beforeCreate(创建前)，在数据观测和初始化事件还未开始
created(创建后)，完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount(载入前)，在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后)，在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前)，在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated(更新后)，在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前)，在实例销毁之前调用。实例仍然完全可用。 destroyed(销毁后)，在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
在一般情况下使用的情况是：
created:进行ajax请求异步数据的获取、初始化数据
mounted:挂载元素dom节点的获取
nextTick:针对单一事件更新数据后立即操作dom
updated:任何数据的更新，如果要做统一的业务逻辑处理
watch:监听数据变化，并做相应的处理
这里介绍两种方案：
1.在 data 中去 定义 一个记录宽度是 属性
data: { return { screenWidth: document.body.clientWidth // 设置默认值 } }
2.在 vue mounted 的时候 去挂载一下 window.onresize 方法
mounted () { const that = this window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } }
3.watch 去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth
watch: { screenWidth (val) { this.screenWidth = val } }
4.优化因为频繁触 resize 函数，导致页面卡顿的问题
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中还可以做很多其他项目全局工作，比如心跳机制、关闭浏览器窗口退出发送请求等。
这篇主要聊app.vue中一些可以用在实际项目中的方法跟设计思路。下一篇我们的目光就要放在main.js，这个项目的入口文件上了。
