从构建vue项目开始，来分析vue项目中的细节以及知识点： 2.利用window.onresize实现自适应页面

  简单的聊完前端路由，这里开始继续讲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，这个项目的入口文件上了。