vue 組件數(shù)據(jù)加載解析順序的詳細代碼

更新時間：2024年03月01日 09:39:23 作者：英俊瀟灑美少年

Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來通過本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧

組件數(shù)據(jù)加載解析順序

實例初始化完成、props 解析 -> beforeCreate -> 響應式數(shù)據(jù)、計算屬性、方法和偵聽器設置完成 -> created -> 判斷是否有渲染模版 -> beforeMount -> 組件掛載 -> mounted

created之前，響應式數(shù)據(jù)、計算屬性、方法和偵聽器設置完成，但是方法、計算屬性并不會執(zhí)行，沒有immediate: true的偵聽器也不會執(zhí)行；
只有用到計算屬性時，才會去執(zhí)行計算屬性的方法
組件內外部使用push，$set，不修改原數(shù)組對象，會使得watch中的newValue等于oldValue，JSON.stringify(newValue) === JSON.stringify(oldValue)
watch加了immediate: true，先執(zhí)行響應式數(shù)據(jù)初始化，立即觸發(fā)watch后，走到created生命周期。
偵聽器依次設置時，immediate: true的立即執(zhí)行，執(zhí)行后再繼續(xù)設置其他的偵聽器，也就是說，當immediate立即執(zhí)行的監(jiān)聽，當某些數(shù)據(jù)變更后，如果偵聽器還沒有設置，就不會執(zhí)行
沒有immediate: true,的watch，觸發(fā)時機是晚于created、mounted的，當數(shù)據(jù)再次發(fā)生變化后，beforeUpdate之前執(zhí)行；
watch加了immediate: true，可以監(jiān)聽到響應式數(shù)據(jù)初始化后的變化。
不要在選項 property 或回調上使用箭頭函數(shù)，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因為箭頭函數(shù)并沒有 this，this 會作為變量一直向上級詞法作用域查找，直至找到為止，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

import Vue from "vue";
new Vue({
  el: "#app",
  template: `<div>
    <div>{{computedCount}}</div>
  </div>`,
  data() {
    return {
      count: 1,
    }
  },
  watch: {
    count: {
      handler() {
        console.log('watch');
      },
      immediate: true,
    }
  },
  computed: {
    computedCount() {
      console.log('computed');
      return this.count + 1;
    }
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
});
watch -> created -> computed -> mounted
new Vue({
  el: "#app",
  template: `<div>
    <div></div>
  </div>`,
  data() {
    return {
      count: 1,
    }
  },
  watch: {
    count: {
      handler() {
        console.log('watch');
      },
      immediate: true,
    }
  },
  computed: {
    computedCount() {
      console.log('computed');
      return this.count + 1;
    }
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
});
watch -> created -> mounted
new Vue({
  el: "#app",
  template: `<div>
    <div></div>
  </div>`,
  data() {
    return {
      count: 1,
    }
  },
  watch: {
    count: {
      handler() {
        console.log('watch');
      },
      immediate: true,
    }
  },
  computed: {
    computedCount() {
      console.log('computed');
      return this.count + 1;
    }
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
    this.computedCount
  },
});
watch -> created -> mounted -> computed

到此這篇關于vue 組件數(shù)據(jù)加載解析順序的文章就介紹到這了,更多相關vue 組件數(shù)據(jù)加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: