VU3 生命周期 , foceUpdate用法

  /*
  执行顺序
  setup 
  onMounted111
    onMounted222
      mounted! 
       onUpdated1 
        onUpdated22 
        updated!
  */
  mounted() {
    console.log("mounted!");
  }, 
  //VU3 的setup只能写一个, 后者会覆盖前者,生命周期函数不会覆盖,这也是Composition API 的优势,可按功能模块写,代码可读性强
  setup() {
    console.log("setup");
    onMounted(() => {
      console.log("onMounted111");
    });
    onMounted(() => {
      //VUE3中强制更新
      let { ctx } = getCurrentInstance();
      ctx.$forceUpdate();
      console.log("onMounted222");
    });
    onUpdated(() => {
      console.log("onUpdated1");
    });
    onUpdated(() => {
      console.log("onUpdated22");
    });
  },
  //VUE2的生命周期函数,写两个一样的, 后者会覆盖前者。
  updated() {
    console.log("updated!");
  }, 

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章