Vue js 的生命周期

用Vue框架,熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图,详细的给出了vue的生命周期:


它可以总共分为8个阶段:

  • beforeCreate(创建前),
实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

  • created(创建后),
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

  • beforeMount(载入前),
在挂载开始之前被调用:相关的 render 函数首次被调用。

  • mounted(载入后),
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted被调用时 vm.$el 也在文档内。

  • beforeUpdate(更新前),
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

  • updated(更新后),

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

  • beforeDestroy(销毁前),
实例销毁之前调用。在这一步,实例仍然完全可用。

  • destroyed(销毁后)
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

然后用一个实例的demo 来演示一下具体的效果:

<div id=app>{{a}}</div>

<script>

var myVue = new Vue({
el: "#app", 
data: {
    a: "Vue.js"
},         

 beforeCreate: function() { 
         console.log("创建前") 
         console.log(this.a) 
         console.log(this.$el)  
},         

 created: function() {
         console.log("创建之后");  
         console.log(this.a)  
         console.log(this.$el)  
},         

 beforeMount: function() {  
         console.log("mount之前")  
         console.log(this.a) 
         console.log(this.$el) 
},          

mounted: function() {  
         console.log("mount之后")
         console.log(this.a)
         console.log(this.$el)
},          

beforeUpdate: function() {
         console.log("更新前");
         console.log(this.a)
         console.log(this.$el)
},          

updated: function() {
         console.log("更新完成");
         console.log(this.a);
         console.log(this.$el);
},          

beforeDestroy: function() { 
         console.log("销毁前");
         console.log(this.a)
         console.log(this.$el)
         console.log(this.$el)
},          

destroyed: function() {
         console.log("已销毁");
         console.log(this.a)
         console.log(this.$el)
}
});
</script>


运行后,查看控制台,

得到这个:




然后再methods 里面添加一个change方法:

<div id=app>{{a}}
    <button v-on:click="change">change</button>
</div>

点击按钮之后出现的是:


这就是vue的生命周期,很简单吧。

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

Vue.js页面渲染生命周期问题

08-28

使用Vue.js做瀑布流布局时,在mounted中直接调用waterFall函数,页面上图片布局是乱的,设置了setTimeout延迟0ms渲染也不起作用。 在safari和chrome上页面正常了,设置延迟100ms,页面加载后布局正常,但是明显的可以看到布局的变化过程,效果不好,延迟值再设置低一些,就不起作用; 在火狐浏览器,要设置延迟150ms以上才起作用,而且也是可以看到页面布局的变化过程,体验不好。 求各位大师指点明路。 ```, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../../vue.js"></script> <style> *{margin: 0;padding: 0} #main{position: relative;margin:0 auto;} #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;} .pic{float: left;padding: 15px 0 0 15px;} .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;} </style> </head> <body> <div id="main"> <div class="pic" v-for='img in images'> <img :src="img"> </div> </div> <script type="text/javascript"> var vm = new Vue({ el : '#main' , data : { images:[ 'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg', 'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg', 'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg', 'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg' ] }, mounted:function(){ var _this = this ; setTimeout(function(){ _this.waterFall('main','pic'); },0); //safari浏览器下必须迟延30ms执行waterFall,布局才会正常渲染,其他浏览器下设置为0即可。 }, methods:{ getByClass:function(oParent,clsName){ return oParent.getElementsByClassName(clsName); }, waterFall:function(Parent,clsName){ var _this = this ; var oParent = document.getElementById(Parent); var oBoxs = _this.getByClass(oParent,clsName); var oBoxW = oBoxs[0].offsetWidth ; //获取每列的宽度 var pageW = document.documentElement.clientWidth ; var cols = Math.floor(pageW / oBoxW) ; //判断页面列数 oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中 var arr = [] ; //用于存放每列的高度 for(var i=0;i<oBoxs.length;i++){ if( i<cols ){ arr.push(oBoxs[i].offsetHeight); }else { var minH = Math.min.apply('null',arr); //求出高度最低列的值 var index = _this.getMinIndex(arr,minH) ; //高度最低列的索引值 oBoxs[i].style.position = 'absolute' ; oBoxs[i].style.top = minH + 'px' ; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ; arr[index] += oBoxs[i].offsetHeight ; //更新数组中每列的高度 } } }, getMinIndex:function(arr,value){ //获取数组arr中,值为value的索引值 for(var i=0;i<arr.length;i++){ if(arr[i] == value){ return i ;} } } }, }); </script> </body> </html> ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览