在vue.js中mixin和頁面執行順序問題

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('這是mixin中的beforeCreate');

    },

    created() {

        console.log('這是mixin中的created');

    },

    beforeMount() {

        console.log('這是mixin中的beforeMount');

    },

    mounted() {

        console.log('這是mixin中的mounted');

    }

}

生命周期create與mount的執行順序

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

 

 

2. 對於同名的變量和方法，只執行page中的代碼。