VUE之生命周期钩子 VUE之计算属性与侦听器

一，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选项处理即可。