脚本宝典收集整理的这篇文章主要介绍了

20190604-Vue的生命周期

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

什么是生命周期?

每个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())。因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 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))
    })
  }
}

Vue实例的全局配置

  • silent

    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

    // 务必在加载 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

总结

以上是脚本宝典为你收集整理的

20190604-Vue的生命周期

全部内容,希望文章能够帮你解决

20190604-Vue的生命周期

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过