Vue的data,components,methods,computed,mounted,activated,deactivated,beforeCreate,created的含义及用法
1、data
Vue 会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
data () {
return {
dataForm: {
xxx: ‘’,
xxx: 数字 //这里的数字会固定XXX的选项
},
xxx: [],
xxx: false,
xxx: 数字,
xxx: {}
}
}
2、components
调用其他组件
<template>
<div class="mod-config">
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './bareapointinfo-add-or-update'
export default {
components: {
AddOrUpdate
}
}
</script>
3、methods
用来定义方法
methods: {
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/area/bareapointinfo/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'pointName': this.dataForm.key
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
this.$message.error(data.msg)
}
this.dataListLoading = false
})
}
}
4、computed
当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值。可以理解为为便签设置属性时调用
<div class="truckGpsScreen" ref="truckGpsScreen" :style="{height:mainHeight + 'px'}">
</div>
computed: {
mainHeight: {
get () {
return this.$store.state.common.documentClientHeight - 50 - 40 - 32
}
}
}
5、mounted
进入页面便开始调用,从页面产生到消亡只会执行一次,可以用来加载初始化数据
mounted () {
if (screenfull.enabled) {
screenfull.on('change', this.onScreenFullChange)
}
this.initMap()
}
6、activated
keep-alive组件激活时调用(你可以理解为生命周期钩子函数),只要切回到该页面便调用一次
activated () {
this.timer = setInterval(this.getDataList, 3000)
}
7、deactivated
keep-alive组件停用时调用,只要切到别的页面便调用一次
deactivated () {
clearInterval(this.timer)
}
8、beforeCreate
创建前的数据
9、created
创建完成的数据
本文转自 https://blog.csdn.net/qq_38639813/article/details/121011091,如有侵权,请联系删除。