Vue.js计算属性、侦听器以及生命周期函数

这几个东西比较少，我们合并在一起讲。

计算属性

• Vue.js的视图不建议书写复杂逻辑，这样不利于维护，你像下面这张图，看起来就很难受：
• 封装函数是很好的方式，但有时重复的计算会消耗不必要的性能
• 提高执行效率，就可以使用计算属性computed。计算属性使用时为属性形式，访问时会自动执行对应函数，示例如图：

methods与computed的区别

• computed具有缓存性，methods没有
• computed通过属性名访问，methods需要调用
• computed仅适用于计算操作

计算属性的setter

• 计算属性默认只有getter，Vue.js也允许给计算属性设置setter，示例如图：

侦听器

• 用于监听数据变化并执行指定操作，示例如图：
• 为了监听对象内部值的变化，需要将watch书写为对象，并设置选项deep:true，这时通过handler设置处理函数，示例如图：

注意事项

• 当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象
• 数组操作不要使用索引与length，无法触发侦听器函数

Vue.js生命周期

• Vue.js生命周期值的是Vue实例的生命周期
• Vue实例的生命周期，指的是实例从创建到运行，再到销毁的过程

Vue.js生命周期函数

• 通过设置生命周期函数，可以在生命周期的特定阶段执行功能
• 生命周期函数也称为生命周期钩子

1.创建阶段

• beforeCreate：实例初始化之前调用
• created：实例创建后调用
• beforeMount：实例挂载之前调用
• mounted：实例挂载完毕

2.运行阶段

• beforeUpdate：数据更新后，视图更新前调用
• updated：视图更新后调用
• 特点：按需调用

3.销毁阶段

• beforeDestroy：实例销毁之前调用
• destroyed：实例销毁后调用
• 特点：每个实例只能执行一次

ok，Vue.js的基础知识完结，后面开始讲组件啊、路由什么的，今日份推荐歌曲：江语晨-最后一页