20190604Vue的生命周期

jiezi

5 年前

每个 Vue 实例在被创建时都经过了一系列的初始化过程

设置数据监听
编译模板
将实例挂载到 DOM
数据变化时更新 DOM

在这一系列过程中，也会运行一些「生命周期钩子」的函数，用在给开发者在不同阶段添加自己的代码的机会。

「created」钩子，在一个实例被创建后执行代码

new Vue({
  data: {a: 1},
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is:' + this.a)
  }
})
// => "a is: 1"

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

参考 Vue 实例

通俗的讲：就是在.Vue 从加载前到销毁后，这一些系列过程中，有特定的阶段 fn 可以提供我们开发者来进行操作。

钩子函数方法	触发阶段	操作
beforeCreate	创建前	组件实例刚被创建，组件属性计算前，数据对象 data 都未定义，未初始化
created	创建后	组件实例创建完成，属性已经绑定，数据对象 data 已经定义存在，DOM 没为生成，$el 未存在
beforeMount	挂载前	Vue 实例的 $el 和 data 都已经初始化完成，挂在前为虚拟的 dom 节点，模板还没有渲染到 HTML 页面上去，data.message 未替换。
mounted	挂载后	Vue 实例挂载完成，模板已经渲染到 HTML 中，dota.message 成功渲染。这个阶段可以做一些 ajax 请求操作，mounted 在周期中只会执行一次。
beforeUpdate	更新前	当 dota 更新之前，会触发 beforeUpdate 方法。
updated	更新后	当 data 更新完成后，触发 updated 方法。
beforeDestory	销毁前	Vue 组件实例销毁前执行的方法。
destroyed	销毁后	组件销毁后，调用的方法，对 data 的改变不会再触发函数周，vue 实例已经解除事件监听和 dom 绑定，但 dom 结构依然存在。

import Axios from 'axios'       // 这是一个轻量级的 ajax 库，import 是 es6 模块导入的语法。export default {                // 这是一个 vue 的模块，后面讲奥。name: 'app',
  components: { },
  data: function () {
    return {list: []
    }
  },
  mounted: function () {          // 挂在完成后的生命周期钩子注册。this.$nextTick(function () {  // 等待下一次更新完成后执行业务处理代码。Axios.get('/api/menulist', {// 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
        params: {}}).then(function (res) {this.list = res.data}.bind(this))
    })
  }
}

silent

类型：boolean
默认值：false
用法：

Vue.config.silent = true
// 取消 Vue 所有的日志与警告

optionMergeStrategies

类型：{[key: string]: Function }
默认值：{}
用法：

Vue.config.optionMergeStrategies._my_option=function(parent,child,vm){return child+1}
const Profile = Vue.extend({_my_option: 1})
Profile.options._my_option = 2
// 自定义合并策略选项
// 合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue 实例上下文被作为第三个参数传入。

devtools

类型：boolean
默认值：true
用法：

// 务必在加载 Vue 之后，立即同步设置以下内容 Vue.config.devtools = true
// 配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

Vue.nextTick

语法：Vue.nextTick([callback, context])

{Function}[callback]
{Object}[callback]

用法：

在下次 DOM 更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

// 修改数据
vm.msg = 'msg'
// DOM 未更新
Vue.nexTick(function() {
    // DOM 更新了
    // 执行操作
})

Vue.set

语法：Vue.set(object, key, value)

参数:

{Object} object
{String} key
{any} value

用法：

设置对象数据。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新，这个方法主要用于避开 Vue 不能检测属性被添加的限制。注意对象不能使 Vue 示例，或者 Vue 实例的根数据对象。

Vue.complie

语法：Vue.compile(template)

参数：

{string} template

用法：

// 在 render 函数中编译模板字符串
// 在独立构建时有效
var res = Vue.Compile(`<div><span>{{ msg}}</span></div>`)

new Vuew({
    data:{msg:'hello'},
    render:res.render,
    staticRenderFns:res.staticRenderFns
})

更多的 API 和用法请看 -> API-Vue

20190604Vue的生命周期

什么是生命周期？

阶段

示例

Vue 实例的全局配置

Vue 的全局 API