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

热门相关:无量真仙   仗剑高歌   薄先生,情不由己   寂静王冠   仗剑高歌