beforeCreate(){
console.log('刚刚创建实例');
},
created(){
console.log('实例创建完成');
},
beforeMount(){
console.log('模板编译之前 ');
},
mounted(){
/* 请求数据,操作Dom时常用 */
console.log('实力挂载完成');
},
beforeUpdate(){
console.log('更新前')
},
updated(){
console.log('更新后')
},
beforeDestroy(){
/* 页面销毁时要保存数据,可以监听这个销毁的生命周期 */
console.log('实例销毁前')
alert('准备销毁')
},
destroyed(){
console.log('实力销毁后')
}
--------------------------------------------------------
//业务中常用的Vue生命周期函数
mounted(){
/* 请求数据,操作Dom时常用 */
console.log('实力挂载完成');
},
beforeDestroy(){
/* 页面销毁时要保存数据,可以监听这个销毁的生命周期 */
console.log('实例销毁前')
alert('准备销毁')
}
1、methods
是个对象,是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行,
只执行逻辑,返回值可有可无,对一些数据请求,点击事件进行封装函数等。
2、creted
是个方法,在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
3、monted
在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
4、computed
是计算属性,也可以理解为一个方法。无需再data中声明,其中计算的结果如果不发生改变就不会触发,
且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。
<div v-for="(item,index) in adList" :key='index'>i{{item}}</div>
adList() {
let tmp = this.$store.state.adList;
if (!tmp) {
tmp = [];
}
return tmp;
}
5、watch
监听数据变化、列如v-model的input值什么的、但是必须在data中声明
watch:{
dataTime(val,newVal){
.......
}
}
6、onload
页面加载完成后触发函数html、css、js,属于js方法,一个页面只会调用一次
7、onshow
页面切换后触发,可用于切换页面刷新数据等
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » Vue 常用的狗钩子函数
发表评论 取消回复