在上一篇中，我们对平时进行vue开发中遇到的常用指令进行归类说明讲解，大概已经学会了怎么去实现数据绑定，以及实现动态的实现数据展示功能，运用指令，可以更好更快的进行开发。而在这一篇中，我们将通过实例，探究vue的生命周期。

万物皆有灵，世间万物都拥有灵魂，小到山河湖海，花草树木，蚂蚁到人类，以及所有的动植物，大到地球星空和宇宙，都拥有灵魂，可以说他们都是有生命的，只是他们的生命形态是我们人类所不能理解的存在。在生产中，生命周期通俗来讲，就是从自然中来回到自然中去的全过程，也就是从采集材料设计，到加工生产后流通使用的过程，以及产品报废，进而回归大自然的过程，这整个过程就是一个完整的生命周期。因此，在开发应用项目的中，从启动页面的加载，页面渲染到销毁，也算是生命周期。Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。这里的“钩子”可以这么理解，就是在每一个阶段用钩子钩住，并进行响应的操作。

学习生命周期，可以使我们更好的理解Vue的生命机制，通过了解每个阶段的钩子，可以更好的实现我们的业务代码，处理更加复杂的业务逻辑。

Vue每一个组件都有属于自己的生命周期，从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等这就是一个组件的生命周期。

在整个生命周期内，总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

*图片来自官网，只要你理解了这张图，也就对Vue的生命周期有了一个大致的了解。

在谈到Vue的生命周期的时候，我们首先需要创建一个实例：

2.created-创建完成 ：实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染（完成了data数据的初始化，el没有）

1.beforeMount ：准备载入——在挂载开始之前被调用：相关的 render 函数首次被调用。程序运行，控制台看输出 （完成了虚拟el和data初始化）

2.mounted ：挂载完成——el选项的DOM节点 被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染（完成了真实el和data初始化）

这个时候，页面渲染的四个阶段已经完成了，我们看看流程：（刚开始的时候beforeCreate阶段，数据和页面都没有渲染，但是页面的静态数据已经被加载出来，然后一步一步，先vue实例，然后挂载，到最后页面渲染完成）

1.beforeUpdate ：更新Data之前——数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理

当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。

由图看来，我们的 Data 数据已经更新了，但是页面里还没有更新

2.update ：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行

1.beforeDestroy ：页面销毁前——实例销毁之前调用。调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。

2.destroyed ：销毁完成——Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

这个时候我们可以看到，vue 实例被销毁后，再修改 Data 页面也已经不能修改页面 DOM 了。

1.说说钩子是什么时候触发的？

Vue文档源码：在实例化的时候

在执行钩子的时候，会触发这个函数，遍历执行，绑定上下文

1.通过简单了解 Vue 生命周期的八个阶段，可以应用在之后的开发中，针对不同的阶段的钩子采取不同的操作，更好的实现我们的业务代码，处理更加复杂的业务逻辑。

2.参考资料Vue官网

3.下一篇开始创建项目应用

• build 文件夹：用于存放 webpack 相关配置和脚本。
• config 文件夹：主要存放配置文件，比如配置开发环境的端口号、开启热加载或开启gzip压缩等。
• dist 文件夹：默认命令打包生成的静态资源文件。
• node_modules：存放 npm 命令下载的开发环境和生产环境的依赖包。
• src: 存放项目源码及需要引用的资源文件。
• src下emit：自己配置的 vue 集中式事件管理机制。
• src下service：自己配置的 vue 请求后台接口方法。
• src下page：存在 vue页面组件的文件夹。
• src下util：存放 vue开发过程中一些公共的 js 方法。

之后就可以直接在项目中使用 DiyHeader 这个组件

在页面里导入组件然后放到components中就可以使用了

• 在directives.js文件引入所有要注册的全局指令

什么是vue生命周期和生命周期钩子函数？

vue 的生命周期是： vue 实例从创建到销毁，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

vue生命周期钩子函数有哪些？

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

在挂载开始之前被调用：相关的 render 函数首次被调用。

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

vue等单页面应用及其优缺点

就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML、CSS 和 JavaScript，所有的操作都在这张页面上完成，都由 JavaScript 来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

单页 Web 应用的优点：

• 提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
• 单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
• 单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
• 单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
• 良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

单页 Web 应用的缺点：

• SEO问题，不利于百度，360等搜索引擎收录。
• 容易造成Css命名冲突。
• 前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。

自定义指令的几个钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
• unbind：只调用一次，指令与元素解绑时调用。

13. Vue双向绑定实现的原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。
Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，通过 Getter暴露给 view层的组件或者页面，页面监测到状态改变于是更新页面。如果你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 能够更好的帮助我们管理组件外部的状态，一般可以运用在购物车、登录状态、播放等场景中。

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

答：MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

vue项目优化解决方案

• 不打包框架、库文件，通过cdn的方式引入

通过用window.location.hash监听页面的hash值变化，切换对于的内容，hash变化不会重载页面。

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

• 父组件向子组件传值通过props
• 子组件向父组件传递，子组件使用$emit传递，父组件使用on监听。

minix（混入） 是 Vue 中的高级用法，混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。比如我们做一个下拉加载，很多组件都需要用到下拉加载，我们就可以把下拉加载封装成一个minix，然后需要下拉加载功能的页面都去导入这个minix，minix里面的属性或者方法就会被混合到当前组件本身的属性上。简单的说，minix B 有个 C方法（下拉加载），页面 A 需要下拉加载于是就导入了 minix B，这时候页面 A 也就拥有了 C 方法。如果页面 A 本身有个 D方法，这时页面 A 就会既有 C 方法也有本身的 D 方法。

Vue.use() 是Vue的一个全局注册方法，主要用来注册插件，默认第一个参数是它接受的参数类型必须是Function或者是Object，如果是个对象，必须提供install方法，install方法默认第一个参数为 Vue,其后的参数为注册时传入的arguments。如果是 Function 那么这个函数就被当做 install 方法。同一个插件 Vue.use 会自动阻止多次注册。除了在注册插件中使用 Vue.use 外，我们还可以在 directive注册、filters注册、components注册等条件下使用。
有的时候我们会遇到某些时候引入插件是并没有使用 Vue.use ，比如使用 axios 的时候，原因是 axios 没有 install 方法，所以也就不需要使用 Vue.use 来全局注册。

欢迎大家关注我的个人公众号，互联网码农，专注互联网编程技术分享，关注公众号，回复关键字，可以领取系列编程学习视频哦，前端、java、ios、安卓、c++、python应用尽有。