Vue页面的构成

Vue页面代码简化如下：

<template>
  <div>
  </div>
</template>
<script>
import * as service from "@/modules/oms/api/oms/eventForm";
import changeOrder from "@/modules/oms/utils/changeOrder.js"; 
import warningMessage from "@/modules/oms/views/components/warningMessage";

export default {
  name: "Event",
  components: {
    warningMessage
  },
  mixins: [changeOrder],
  data() {
    return {
      enumOptions: {},
      ruleForm:{}
    };
  },
  computed: {
    showOptionsEnum() {
      // if the optionsEnum has data
      return Object.keys(this.enumOptions).length > 0;
    }
  },
  watch: {
    "ruleForm.eventPriority": function(val, oldVal) {
      this.calculateDeadTime();
    }
  },
  mounted() {
    this.init();
    //页面刷新调用
    window.onbeforeunload = function() {
      return true;
    };
  },
  destroyed() {
    window.onbeforeunload = null;
  },
  created() {
    
  },
  methods: {
    async init() {
      this.queryEventInGroup();
      this.queryParams();
    },
    getMsg(data){
      this.ruleForm.message = data
    },
    queryEventInGroup(){

    },
    queryParams(){

    },
    calculateDeadTime(val) {
        
    }
  }
};
</script>
<style lang="scss">
</style>

我们对其进行分析。

1.页面分为template、script、style，<template>里放置html代码，<script>里放置脚本，<style>放置css（可为less或scss）。

2.import从api文件夹下导入接口请求方法集合即service，导入组件。

3.export导出name、components、mixins（混入）、data、computed（计算属性）、watch（监视属性，可用于监视下拉框值变化）、methods。

4.export导出Vue生命周期方法，执行顺序为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、 beforeDestory、destroyed。

5.一般是在mounted中调用init方法，对页面进行数据拉取。init可设置为async，即异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

6.在页面刷新时，页面不会进行destroyed，所以用onbeforeunload函数（刷新或关闭页面调用），若页面刷新则返回true，若关闭页面则不返回。