vue 的生命周期11个钩子函数是按照以下的顺序来的 ：（不可逆转哦,第11个除外） 
一. 组件创建前后

1.beforeCreate
2.created
    


        

            1
        

        

            2
        

    

如，写一个子组件，然后挂在到父组件，在子组件中，console.log 子组件中的

data（）{ return { a:1 },
    beforeCreate(){
        console.log(this.a)//undefined },
    created(){
        console.log(this.a)//1 }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

. 
.

二. vue启动前后

3.beforeMount 4.mounted
    


        

            1
        

        

            2
        

    

这两个的意思就是， 
vue在beforeMount时，还不管事，也就是说，还没有渲染数据到<div id="app"><div/>里面，此时的这个组件还是空的

当mounted时，才会往<div id="app"><div/> 添加东西，也就是vue正式 
接管<div id="app"><div/>

可以获取#app的innerHTML查看差异；

beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的内容 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

. 
.

三. 组件更新前后

5.beforeUpdate 6.updated
    


        

            1
        

        

            2
        

    

这个就不用我多说了吧？当子组件里面的 视图改变 的时候触发。 
如，做一个按钮，让data里面的a++，假如 一开始a是1 
beforeUpdate返回1 
updated返回2

beforeUpdate(){
    console.log(document.getElementById('a').innerHTML)//1 },
updated(){
    console.log(document.getElementById('a').innerHTML)//2 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

再点一次 
beforeUpdate返回2 
updated返回3。。。 
. 
.

四. 组件销毁前后(一般配合v-if使用)

7.beforeDestroy
8.destroyed
    


        

            1
        

        

            2
        

    

给这个子组件用v-if来控制它的销毁和创建，注意以下：v-show不行。 
子组件销毁前触发beforeDestroy 
子组件销毁后触发destroyed 
第一次会触发7.8. 
创建子组件后会触发以上的第1.2.3.4.钩子函数。

有一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？ 
答案是会的 
所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。

所以这两个钩子函数一般用于做性能的优化。 
. 
.

五. 组件激活时，未激活时

9.activated
10.deactivated
    


        

            1
        

        

            2
        

    

这两个钩子函数呢一般配合<keep-alive><keep-alive/>来使用。 
通过看 四。这个例子，你肯定知道了一个组件怎么被销毁和创建。 
但是我们知道通常一个组件是很大的，如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理，而且很浪费性能。。。

这时候我们就可以用<keep-alive><keep-alive/>配合着两个钩子函数来控制组件的激活和不激活。

说一下<keep-alive><keep-alive/>，它就相当于把你的组件给缓存下来了，目的呢就是不让组件重复的渲染，然后我们通过v-if触发，子组件就不会再触发7 和 8 了，而是只会频繁的触发9 和 10 
这样性能会比7 和 8 好的多。 
. 
.

六. 当捕获一个来自子孙组件的错误时被调用

11.errorCaptured
    


        

            1
        

    

当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数， 
第一个参数是 错误对象 
第二个参数是 报错的子孙组件 
第三个参数是 报错的子孙组件的具体哪个地方报错。（如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook）

具体第11个没深入研究，喜欢的可以去看下官网的 errorCaptured。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本组件基于element-ui 的图标库（星星图标）

第一步：

vue + webpack + element-ui 框架

第二步：

创建Rate.vue文件，实现双向绑定分数

第三部：

使用组件

代码

在app.vue中引入组件

    


        


            


                


                

            

            


                

                    <Rate v-model='value' size="32px">
                

            

        

        


            


                


                

            

            


                

                    <span>{{value}} 分</span>
                

            

        

        


            


                


                

            

            


                

                    </Rate>
                

            

        

    

import Rate from './components/Rate'

组件

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div class="Rating" :value='value'>
                

            

        

        


            


                


                

            

            


                

                    <ul class="Rating-list">
                

            

        

        


            


                


                

            

            


                

                    <li v-for="s in 5" @click="changeRate(s)">
                

            

        

        


            


                


                

            

            


                

                    <i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
                

            

        

        


            


                


                

            

            


                

                    </li>
                

            

        

        


            


                


                

            

            


                

                    </ul>
                

            

        

        


            


                


                

            

            


                

                    <slot></slot> <!--显示用户自定义内容-->
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

    


        


            


                


                

            

            


                

                    props: {
                

            

        

        


            


                


                

            

            


                

                    size: { //父组件传值设置字体大小
                

            

        

        


            


                


                

            

            


                

                    type: String,
                

            

        

        


            


                


                

            

            


                

                    default: '16px'
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    value: { //绑定value，与$emit实现双向绑定
                

            

        

        


            


                


                

            

            


                

                    type:Number,
                

            

        

        


            


                


                

            

            


                

                    default:0 
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    data() {
                

            

        

        


            


                


                

            

            


                

                    return {
                

            

        

        


            


                


                

            

            


                

                    star: this.value, // 初始化
                

            

        

        


            


                


                

            

            


                

                    style: {
                

            

        

        


            


                


                

            

            


                

                    fontSize: this.size //通过prop传值设置星星字体大小
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    methods: {
                

            

        

        


            


                


                

            

            


                

                    changeRate(s) {
                

            

        

        


            


                


                

            

            


                

                    this.star = s //更新当前星星数量
                

            

        

        


            


                


                

            

            


                

                    this.$emit('input', s); //将当前星星数量s与v-model绑定
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

demo演示

1. 1、opacity:0
2. 2、visibility:hidden
3. 3、diaplay:none
4. 4、position:absolute

     opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

visibility

     第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏

    注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可。

dispaly

    display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

    不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

position

    假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。在这种情况下，只能考虑将元素移出可视区域。这个办法既不会影响布局，有可能让元素保持可以操作。

1. .hide {
2. position: absolute;
3. top: -9999px;
4. left: -9999px;
5. }

    隐藏元素的另一种方法是通过剪裁它们实现。

1. .hide {
2. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
3. }

1. 1、opacity:0
2. 2、visibility:hidden
3. 3、diaplay:none
4. 4、position:absolute

     opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

visibility

     第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏

    注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可。

dispaly

    display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

    不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

position

    假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。在这种情况下，只能考虑将元素移出可视区域。这个办法既不会影响布局，有可能让元素保持可以操作。

1. .hide {
2. position: absolute;
3. top: -9999px;
4. left: -9999px;
5. }

    隐藏元素的另一种方法是通过剪裁它们实现。

1. .hide {
2. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
3. }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 标签重定义 */

* {
margin: 0;
padding: 0;
border: none;
}

body {
background: #ddd;
}

img {
border: none;
}

a {
text-decoration: none;
color: #444;
}

a:hover {
color: #999;
}
/* wrap */

#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}

#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}

#wrap>div>img {
width: 260px;
margin: 0 auto;
}

#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>


<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a href="http://www.imooc.com" target="_blank">第一张 路飞与艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a href="http://www.imooc.com" target="_blank">第二张 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a href="http://www.imooc.com" target="_blank">第三张 路飞</a>
</div>
<div>
<img src="img/4.jpg">
<a href="http://www.imooc.com" target="_blank">第四张 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a href="http://www.imooc.com" target="_blank">第五张 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a href="http://www.imooc.com" target="_blank">第六张 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a href="http://www.imooc.com" target="_blank">第七张 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a href="http://www.imooc.com" target="_blank">第八张 霸气</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>

</html>

JS:

var waterfall = function(wrap, boxes) {
// 获取屏幕可以显示的列数
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);


// 设置容器的宽度
wrap.width(boxWidth * colsNumber);


// 定义一个数组并存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};


// 获取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};

$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});