20190604-Vue的生命周期

2019年9月1日 163次阅读 来源: Kisnnnn

什么是生命周期？

每一个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 之类的毛病。

《20190604-Vue的生命周期》

参考
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构造依旧存在。

《20190604-Vue的生命周期》

示例

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))
    })
  }
}

Vue实例的全局设置

  • 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的全局API

  • 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

    原文作者：Kisnnnn
    原文地址: https://segmentfault.com/a/1190000019384891
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞