一 vue之生命周期钩子
1:什么是生命周期???
vue实例从创建到销毁的过程,就是生命周期。
]
Vue 组件的生命周期分为四个阶段,每个阶段有两个生命钩子,注意前后钩子;
①beforeCreate:组件实例刚被创建,组件属性data、el等还未生效。el 和 data 并未初始化。
②created:实例已经创建完成之后被调用,然而,挂载阶段还没开始,$el 属性目前不可见。
③beforeMount:在挂载开始之前被调用,完成了 el 和 data 初始化。el 和 data 均已初始化。
④mounted:模板挂载完毕,el 被新创建的 vm.el替换。beforeMount和mounted之间区别:∗∗∗ VirtualDOM(虚拟Dom)技术 ∗∗∗;beforeMount和mounted两者主要区别在于模板是否编译和挂载了。∗∗利用mount挂载的方法有一个很大的好处,就是将实例化的内容和对应HTML的关联分开,可以更直观的展现。**
⑤beforeUpdate:数据更新之前;
⑥updated:数据更新之后;
⑦beforeDestroy:销毁前;
⑧destroyed:销毁完毕;
注:$destroy只是销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器,并不会清除data的数据或者清除dom。
DOM销毁–页面消失;Vue销毁–销毁绑定
二 vue及计算属性和侦听器
①计算属性??
为了代码的整洁,放到了computed计算属性。
②计算属性简介三部曲:1,调用。2,computed选项。 3,方法返回值return。
③计算属性包含:getter setter。
④计算属性有两个实用的技巧/特点:
1)计算属性可以依赖其他计算属性;
2)计算属性不仅可以依赖当前vue实例的数据,还可以依赖其他实例数据;
⑤computed vs methods
1)computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
2)使用 computed 性能会更好,但是如果不希望缓存,可以使用 methods 属性。
⑥侦听器/属性:watch
侦听器watch相对繁琐,大多情况下推荐用计算属性computed选项处理(了解即可)