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 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，如有侵权



















，请联系删除



















。