初识Vue实例的生命周期钩子

2019年1月14日23:02:12 发表评论 阅读(423)

学习vue的过程中,有一个重要的知识点,那就是生命周期钩子,vue官方提供了一张生命周期的图示,通过这张图示我们可以很容易的学会生命周期函数。

初识Vue实例的生命周期钩子

那么什么是生命周期函数呢?生命周期函数就是vue实例在某一个时间点会自动执行的函数。

我们可以通过以下的代码实例简单的了解一下:

  1. <div id="app">
  2.         {{msg}}
  3.     </div>
  4. <script>
  5.     //生命周期函数就是vue实例在某一个时间点会自动执行的函数
  6.     var vm = new Vue({
  7.         el: '#app',
  8.         template: "<div>{{msg}}</div>",
  9.         data: {
  10.             msg: "hello world"
  11.         },
  12.         created: function () {
  13.             console.log("created");
  14.         },
  15.         beforeCreate: function() {
  16.             console.log("beforeCreate");
  17.         },
  18.         beforeMount: function() {
  19.             console.log(this.$el);
  20.             console.log("beforeMount");
  21.         },
  22.         mounted: function () {
  23.             console.log(this.$el);
  24.             console.log("mounted");
  25.         },
  26.         beforeDestroy: function () {
  27.             console.log("beforeDestroy");
  28.         },
  29.         destroyed: function() {
  30.             console.log("beforeDestroy");
  31.         },
  32.         beforeUpdate: function() {
  33.             console.log("beforeUpdate")
  34.         },
  35.         updated: function () {
  36.             console.log("updated")
  37.         }
  38.     })
  39. </script>

以上的代码执行会在控制台打印函数执行的顺序,需要注意的是其中beforeDestroy函数destroy函数以及beforeUpdate函数updated函数需要执行对应的操作才会打印相应的信息。

初识Vue实例的生命周期钩子

通过看vue的源码我们可以知道生命周期函数一共有11个,但是本文只说到了其中的8个。

最后生命周期钩子具体有哪些作用呢?目前我也没学到,一起拭目以待吧~

另外

生命周期函数直接定义在vue实例中,不需要单独写在methods当中

 

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛