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

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