vue生命周期在工作中的用法

时间:2023-02-17 17:19:50

1、首先来官方服生命=周期的解释:

  • beforeCreate():实例在内存中被创建出来,还没有初始化好data和methods属性。
  • create():实例已经在内存中创建,已经初始化好data和method,此时还没有开始编译模板。
  • beforeMount():已经完成了模板的编译,还没有挂载到页面中。
  • mounted():将编译好的模板挂载到页面指定的容器中显示。
  • beforeUpdate():状态更新之前执行函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为还没有开始重新渲染DOM节点。
  • updated():此时data中的状态值和界面上显示的数据都已经完成了跟新,界面已经被重新渲染好了!
  • beforeDestroy():实例被销毁之前。
  • destroyed():实例销毁后调用,Vue实例指示的所有东西都会解绑,所有的事件监听器都会被移除,所有的子实例也都会被销毁。组件已经被完全销毁,此时组建中所有data、methods、以及过滤器,指令等,都已经不可用了。

2、工作中的用法:

  • beforecreate : 可以在这函数中初始化加载动画。
  • created :做一些数据初始化,实现函数自执行。
  • mounted: 调用后台接口进行网络请求,拿回数据,配合路由钩子做一些事情。
  • destoryed :当前组件已被删除,清空相关内容。

在实际开发项目的过程中,mounted主要做网络请求和重新赋值。

数据对象data:初始化属性及能够其响应数据变化,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。

注:vue组件中的data为什么是一个函数:

组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响;

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

//使用方法
data: function () {
return {
message: 'Welcome Vue',
goodsImg: '',
itemGoodsId: '',
imageUrls: []
}
},

计算属性computed: 将返回function内return的值赋值在html的DOM上,computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容。

<template>
<div>
<div>{{reversedMessage}}</div>
<div @click="handlerCilck">点我</div>
</div>
</template> <script>
export default {
name: 'test',
data(){
return{
message: 'hello'
}
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
methods:{
handlerCilck(){
this.message = 'hello world'
this.reversedMessage()//重新修改DOM的值
}
}
}
</script>

自定义方法methods:methods:{所有页面的自定义函数}

<div  @click="clickReverse">点击</div>
methods:{
clickReverse(){
this.message = 'hello world'
this.reversedMessage()//重新修改DOM的值
},
}

  beforeRouteEnter(to, from, next):进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

vue生命周期在工作中的用法

beforeRouteLeave(to, from, next):离开路由之前执行的函数,可用于页面的反向传值,页面跳转。

 // 点击后拿到数据返回给下单地址
beforeRouteLeave (to, from, next) {
if (to.name === 'home') {
to.query.temp = '这里是参数,选中后的地址'
}
console.log(to)
console.log(from)
next()//一定不要忘记写
},

vue生命周期在工作中的用法

具体方法和参数按照工作中的需求而自行应用。