【_ 記 】vue:熟悉vue生命周期和methods和mounted的区别?
vue的生命周期beforecreatebeforecreate : 举个栗子:可以在这加个loading事件createdcreated :在这结束loading,还做一些初始化,实现函数自执行(data数据已经初始化 但是 dom结构渲染完成组件没有加载)beforeDestroybeforeDestroy: 你确认删除XX吗?(简单来说就是组件还...
·
vue的生命周期
- beforecreate
beforecreate : 举个栗子:可以在这加个loading事件
- created
created :在这结束loading,还做一些初始化,实现函数自执行 (data数据已经初始化 但是 dom结构渲染完成
组件没有加载)
- mounted
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情(dom渲染完成 组件挂载完成 )
- beforeDestroy
beforeDestroy: 你确认删除XX吗?(简单来说 就是组件还存在)
- destroyed
destroyed :当前组件已被删除,清空相关内容 (组件已经销毁 )
methods和mounted的区别
. methods
methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件,就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值,而methods中可以只执行逻辑代码,可以有返回值,也可以没有。
mounted
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情(dom渲染完成 组件挂载完成 )
<script>
export default{
props: ['active', 'comPutedPrice'],
data(){
return {
filterIndex: 0,
zhifuRadio: '1', // 支付方式 1支付宝 2微信
xieyiRadio: '1',
isShowMa: false,
isShowMa2:false
}
},
mounted(){
// 3s以后去支付结果页
/*setTimeout(() => {
this.createMa()
}, 3000)*/
},
methods: {
// 选择支付方式
filterList(index){
this.filterIndex = index
},
// 显示二维码界面
goResult(){
this.isShowMa = true
},
// 二维码操作 去支付结果页
createMa(){
// 同步更新父组件active状态
this.$emit('update:active', this.active + 1)
console.log(this.active);
// 子组件给父组件发射 支付方式状态
//this.$emit('zhifuRadio',this.zhifuRadio)
// v-if子组件的时候 要加nextTick 单一事件管理组件通信
this.$nextTick(() => {
console.log(bus);
bus.$emit('zhang', 0) //1 支付成功 0支付失败
})
}
}
}
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)