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 = truethis.$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.listthis.totalPage = data.page.totalCount} else {this.dataList = []this.totalPage = 0this.$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

创建完成的数据