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