一，VUE之生命周期钩子
生命周期 ？
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
概念图
钩子列表
Vue 组件的生命周期分为四个阶段，每个阶段有两个生命钩子
（1）创建阶段：创建之前（beforebeforeCreate），创建完毕（created）
（2）挂载阶段：挂载之前（beforeMount），挂载完毕（mounted）
（3）更新阶段：更新之前（beforeUpdate），更新完毕（updated）
（4）销毁阶段：销毁之前（beforeDestroy），销毁之后（destroyed）
<div class="app">
<p>{{info}}</p>
</div>
<script>
var app = new Vue({
el:'.app',
data:{
info:"信息"
},
methods:{
},
beforeCreate:function(){
console.group("----beforeCreate创建之前----");
console.log("%c%s","color:red","el为"+this.$el); //undefined
console.log("%c%s","color:red","data为"+this.$data); //undefined
console.log("%c%s","color:red","info为"+this.info); //undefined
console.groupEnd();
},
created:function(){
console.group("----created创建完毕----");
console.log("%c%s","color:red","el为"+this.$el); //undefined
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //信息
console.groupEnd();
},
beforeMount:function(){
console.group("----beforeMount挂载之前----");
console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
console.log(this.$el); //<div class="app"><p>{{info}}</p></div>
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //信息
console.groupEnd();
},
mounted:function(){
console.group("----mounted挂载完毕----");
console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
console.log(this.$el); //<div class="app"><p>{{info}}</p></div>
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //信息
console.groupEnd();
},
//更改app.info的内容 出现
beforeUpdate:function(){
console.group("----beforeUpdate数据更新之前----");
console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //更新后的信息
console.groupEnd();
},
updated:function(){
console.group("----updated数据更新完毕----");
console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //更新后的信息
console.groupEnd();
},
//用app.$destroy() 出现
beforeDestroy:function(){
console.group("----beforeDestroy销毁之前----");
console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //信息
console.groupEnd();
},
destroyed:function(){
console.group("----destroyed销毁完毕----");
console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
console.log("%c%s","color:red","data为"+this.$data); //[object Object]
console.log("%c%s","color:red","info为"+this.info); //信息
console.groupEnd();
}
})
</script>
在实例化Vue的时候，有两种方式挂载数据
<!--挂载根实例 方法1：最常用的-->
<div class="app">
<p>{{info}}</p>
</div>
<script>
var app = new Vue({
el:'.app',
data:{
info:"挂载根实例 的第一种方法"
}
})
</script>
<!--挂载根实例 方法2：$mount-->
<div class="app">
<p>{{info}}</p>
</div>
<script>
var app = new Vue({
data:{
info:"挂载根实例 的第二种方法"
}
})
app.$mount(".app");
</script>
DOM销毁–页面消失；Vue销毁–销毁绑定
生命周期钩子 = 生命周期函数 = 生命周期事件
二、VUE之计算属性与侦听器
计算属性缘由：模板里面不建议进行复杂逻辑操作，为了代码的整洁，放到computed计算属性。
所有的计算属性都以 函数的形式写在vue实例内的computed选项内，最终return返回计算后的结果。
步骤：3部曲
1.调用
2.computed选项
3.方法返回值
计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
计算属性包含getter和setter，上面实例都是计算属性默认用法，只是利用getter读取。
此外也可以用setter函数，当手动修改计算属性的值就像修改普通数据时，便会触发setter函数
计算属性技巧：
①计算属性可以依赖其他计算属性；
②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据
computed vs methods（计算属性缓存VS方法）：
效果上两个是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。
侦听器（watch）代码是命令式且重复的。
小节：
（1）使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
（2）因为侦听器watch相对繁琐，大多情况下推荐用计算属性computed选项处理即可。