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