在vue.js中mixin和页面执行顺序问题

Z时代
2024-01-10
分类：综合

vue

1. 对于creaetd，mounted 等生命周期函数

mixin中的代码先执行，单文件中的后执行。

// page.vue文件
<template>
  <div id="app">
    <div id="nav">
      <button @click="comFun">page和mixin中相同事件执行</button>
      <br />
      <h3>comData:{{comData}}</h3>
      <br />
      <h3>pgData:{{pgData}}</h3>
      <br />
      <h3>mxData：{{mxData}}</h3>
      <br />
    </div>
  </div>
</template>
<script>
  import mixin from './js/mixin.js';
  export default {
    mixins: [mixin],
    data() {
      return {
        pgData: '这是page中的数据',
        comData: '这是page中相同key的数据'
      }
    },
    methods: {
      comFun() {
        alert('这是page中相同function');
      }
    },
    beforeCreate() {
      console.log('这是page中的beforeCreate');
    },
    created() {
      console.log('这是page中的created');
    },
    beforeMount() {
      console.log('这是page中的beforeMount');
    },
    mounted() {
      console.log('这是page中的mounted');
    }
  }
</script>

mixin.js

// mixin.js
export default {
  data() {
    return {
      mxData: '这是mixin中的数据',
      comData: '这是mixin中相同key的数据'
    }
  },
  methods: {
    comFun() {
      alert('这是mixin中相同function');
    }
  },
  beforeCreate() {
    console.log('这是minx中的beforeCreate');
  },
  created() {
    console.log('这是minx中的created');
  },
  beforeMount() {
    console.log('这是minx中的beforeMount');
  },
  mounted() {
    console.log('这是minx中的mounted');
  }
}

什么周期create与mount的执行顺序

page的beforeCreate --> mixin的beforeCreate --> page的created --> mixin的created --> page的beforeMount --> mixin的beforeMount -->page的mounted -->mixin的mounted