快捷導(dǎo)航

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

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

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

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

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

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

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

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

您可能感興趣的文章: