详解Vue生命周期【上】

栏目: 编程语言 · 发布时间: 5年前

内容简介:生命周期是理解Vue的一个非常重要的环节,初学Vue时可能会出现数据渲染的失败的错误,因此打算写两篇博客详细介绍Vue的生命周期:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用;data、computed、watch、methods和DOM都不能使用如果非要在beforeCreate()取data也不是没有办法,异步方式可以通过

生命周期是理解Vue的一个非常重要的环节,初学Vue时可能会出现数据渲染的失败的错误,因此打算写两篇博客详细介绍Vue的生命周期:

  • 单个组件的Vue生命周期(本文)
  • 多个组件的Vue生命周期

Vue生命周期

1.1 beforeCreate()

说明

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用;data、computed、watch、methods和DOM都不能使用

data () {
    return {
      msg: 1
    }
  },
  beforeCreate() {
    console.log(this.$data)  //undefined
    console.log(this.$el)    //undefined
  }
复制代码

注意

如果非要在beforeCreate()取data也不是没有办法,异步方式可以通过 this.$nextTick()或seTimeout ,同步方式可以通过 this.$options 。当然一般不会这么操作。

beforeCreate() {
    this.$nextTick(() => {       
      console.log(this.msg)                  //1
    })

    setTimeout(()=> {
      console.log(this.msg)                  //1
    }, 1000)

    console.log(this.$options.data()["msg"]) //1
  }
复制代码

1.2 created()

说明

在实例创建完成后被立即调用,可以操作data、computed、watch、methods,但DOM还没挂载,不能操作。

created () {
    this.getMsg()          //1
    console.log(this.msg)  //1
    console.log(this.$el)  //undefined
  },
  methods: {
    getMsg() {
      console.log(this.msg)
    }
  }
复制代码

通常在此进行页面初始化操作或简单的Ajax请求(此时页面还未呈现,过多的请求会导致白屏)

1.3 beforeMount()

说明

在挂载开始之前被调用:相关的 render 函数首次被调用。这一步没啥特别的,很少在此进行操作。

beforeMount() {
    console.log(this.msg)  //1
    console.log(this.$el)  //undefined
  }
复制代码

1.4 mounted()

说明

实例被挂载到DOM上。通常用于执行Ajax请求。

mounted() {
    console.log(this.msg)  //1
    console.log(this.$el)   //可看到 DOM 的信息
  }
复制代码

注意

mounted 不保证所有子组件都一起被挂载了。若想要等整个视图都渲染完毕再操作,可以使用 this.$nextTick

mounted() {
    this.$nextTick()
  }
复制代码

1.5 beforeUpdate()

只有数据更新时才调用,发生在虚拟 DOM 打补丁之前。适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

<div>{{msg}}</div>
复制代码
mounted() {   
    this.msg = 2
  },
  beforeUpdate: function() {
    console.log(this.$el.innerHTML)  //1
    console.log(this.$el)            //<div ...> 2 </div>
    console.log(this.msg)            //2
  }
复制代码

1.6 updated()

说明

虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可以执行依赖于DOM的操作。

mounted() {   
    this.msg = 2
  },
  updated: function() {
    console.log(this.$el.innerHTML)  //2
    console.log(this.$el)            //<div ...> 2 </div>
    console.log(this.msg)            //2
  }
复制代码

注意

updated 不保证所有子组件都被重绘了。若想要等到整个视图都重绘完毕再操作,可以用 this.$nextTick

1.7 beforeDestroy()

说明

实例销毁前调用,这里没什么特殊的,该用的仍然可用

beforeDestroy() {
    console.log(this.msg)  //2
    console.log(this.$el)  //<div ...> 2 </div>
  }
复制代码

1.8 destroyed()

说明

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

这里我一开始的理解是数据不能用了,结果还依然打印了数据,不解中……

destroyed() {
    console.log(this.msg)  //2
    console.log(this.$el)  //<div ...> 2 </div>
  }
复制代码

总结

Vue的生命周期可以总结为3个阶段:

  1. 初始化阶段(执行1次):beforeCreate、created、beforeMount、mounted
  2. 数据更新阶段(执行多次):beforeUpdate、updated
  3. 销毁阶段/切换组件(执行1次):beforeDestory、destroyed
  4. 用得比较多的就是 created 和 mounted 了

以上所述就是小编给大家介绍的《详解Vue生命周期【上】》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

解码宇宙

解码宇宙

(美) 塞费 / 隋竹梅 / 上海科技教育出版社 / 2010-4 / 26.00元

《解码宇宙:新信息科学看天地万物》:宇宙,或许就是一台庞大的计算机。这是查尔斯·塞费在《解码宇宙:新信息科学看天地万物》中对宇宙做出的结论。作者从信息的特点开始谈起,详细论述了信息论和量子计算,向我们展示了一种不可思议的拜占庭式宇宙的情景,涉及生命的本质、热力学、相对论、量子力学、黑洞、多重宇宙,直至宇宙的命运。《解码宇宙:新信息科学看天地万物》资料翔实,内容丰富多彩,思路清晰,观点明确,读后使人......一起来看看 《解码宇宙》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具