Vue之生命周期钩子
1.简介
什么是生命周期?
Vue实例有一个完整的生命周期,通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
2.概念图
对生命周期图的标注
3.钩子列表
(1)beforeCreate挂在之前被调用,完成了el和data的初始化
created:实例已创建完成之后被调用,然后 ,挂载阶段还没开始,$el属性目前不可见
(2)beforeMount:在挂载开始之前被调用
mouned:模板挂载完毕,el被创建的vm.el替换
(3)beforeUpdate:数据更新之前 或者 在控制台输入新数据
updated:数据更新完毕
(4)beforeDestroy;销毁前
destroy:销毁完毕
这个时候发现发现控制台并没有什么特别,在控制台输入destroy()
这是因为destroy只是销毁一个实例,清理它与实例的连接,解绑它的全部及事件监听器,并不会清楚data的数据或者清楚dom。
4.生命周期小结
(1)创建阶段:主要用于组件创建时,获取数据这是组件。
(2)挂在阶段:主要用于访问组件DOM。
(3)更新阶段:数据变化,组件重新渲染。
(4)销毁阶段:用于销毁组件,做青睐工作。
Vue计算属性与侦听器
课程大纲
(1)计算属性简介
(2)计算属性用法
(3)计算属性技巧
(4)computed Vs methods
(5)侦听器/属性
(6)小结
计算属性简介
什么是计算属性? 在模板里双向绑定一些数据或者表达式
步骤:3部曲
(1)调用(2)computed选项(3)方法返回值
计算机属性用法
计算机属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回计算后的结果。
案列1:
案例解析1:当package1或者package2中的商品有任何变化,比如购买数量变化或者删除商品时,计算属性money就会自动更新,视图中的总价也会自动变化。
getter与setter:计算属性包含getter和setter,上面实例都是计算属性默认用法,只是利用getter读取。此外也可以用setter函数,当手动修改计算属性的值就像修改普通数据时,便会触发setter函数,执行一些自定义操作。
该案例也是计算属性的默认用法,只是利用getter读取。
getter与setter结合
computed VS methods
计算性缓存VS方法:
使用methods来代替computed,效果上两个是一样,但是computed是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。
可以说使用computed性能会更好,但是如果不希望缓存,可以使用methods属性。
侦听器/属性
除了计算机属性Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动:侦听属性/器
小结
(1)使用计算属性还是methods取决于是否需要缓存,当遍历大数据和做大量计算时,应当使用计算属性,除非你不希望得到缓存。
(2)因为侦听器watch相对繁琐,大多情况下推荐计算属性computed选项处理即可。