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，如有侵权，请联系删除。