欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何解決watch和methods值執(zhí)行順序問題

 更新時間:2024年08月07日 09:46:51   作者:帥比九日  
這篇文章主要介紹了vue如何解決watch和methods值執(zhí)行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題

  • 父組件:
<GroupTransform
            :is-show.sync="selectPeopleDialogVisible"
            @callback="getSelectedPeople"
        ></GroupTransform>
watch: {
        selectGroupRight: {
            handler(val) {
            },
            deep: true,

        },
    },
methods:{
getSelectedPeople(){},
}
  • 子組件:
confirm() {
            this.$emit('input', this.rightGroups);
            this.$emit('callback');
        },

目的是當(dāng)我們觸發(fā)子組件的confirm時,先更新該組件綁定的v-model的值觸發(fā)watch,然后再觸發(fā)callback事件綁定的方法getSelectedPeople。

但是實際執(zhí)行結(jié)果是先執(zhí)行了getSelectedPeople,然后再進入了watch。

原因

查詢資料后得到以下結(jié)論,具體源碼和機制暫時不明

(1)頁面初始化時: 會執(zhí)行一次computed,watch初始化時不會執(zhí)行,methods只有調(diào)用的時候才會執(zhí)行

(2)渲染完成后:

  • 如果不是由點擊事件造成的數(shù)據(jù)變化,執(zhí)行順序為:watch——beforeUpdate——computed——updated
  • 如果是由點擊事件造成的數(shù)據(jù)變化,執(zhí)行順序為:methods——watch——beforeUpdate——computed——update

繼續(xù)深究:為什么watcher沒有立即執(zhí)行?

在vue的watcher.js文件源碼中,我找到了這么一段

 // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
  ......
 /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

可以看到vue的watcher除了我們常用的deep屬性可以配置,其實還有一個屬性叫做sync,這個屬性影響著我們的watcher什么時候執(zhí)行watcher的回調(diào)。

正常情況下不設(shè)置sync,依賴數(shù)據(jù)變動時會觸發(fā)warcher將其推送進入隊列,等到下一個渲染周期的時候觸發(fā)。

但是$emit觸發(fā)父組件的自定義事件不會等到下一個周期執(zhí)行,而是立即執(zhí)行。

所以代碼的效果就變成了先執(zhí)行callback綁定的父組件getSelectedPeople,再進入watch。

解決方法

如果要程序按照我們最初的想法,先觸發(fā)watch,在執(zhí)行methods中的方法,那么只需要在watch中設(shè)置sync屬性為true即可。

watch: {
        selectGroupRight: {
            handler(val) {},
            deep: true,
            sync: true,
        },
    },

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue?Router中Matcher的初始化流程

    Vue?Router中Matcher的初始化流程

    這篇文章主要介紹了Vue?Router中Matcher的初始化流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 在vue3中安裝使用bootstrap過程

    在vue3中安裝使用bootstrap過程

    這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue-router路由懶加載和權(quán)限控制詳解

    vue-router路由懶加載和權(quán)限控制詳解

    這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料
    2017-12-12
  • 關(guān)于對keep-alive的理解,使用場景以及存在的問題解讀

    關(guān)于對keep-alive的理解,使用場景以及存在的問題解讀

    這篇文章主要介紹了關(guān)于對keep-alive的理解,使用場景以及存在的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • 一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點

    一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點

    過去在Vue2中,我們采用ref來獲取標(biāo)簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作

    vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作

    這篇文章主要介紹了vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • mpvue+vant app搭建微信小程序的方法步驟

    mpvue+vant app搭建微信小程序的方法步驟

    這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 微信小程序Webview與H5通信的思路與實戰(zhàn)記錄

    微信小程序Webview與H5通信的思路與實戰(zhàn)記錄

    這篇文章主要介紹了微信小程序Webview與H5通信的思路與實戰(zhàn)的相關(guān)資料,由于微信小程序與H5之間的通信限制,無法滿足業(yè)務(wù)需求,通過動態(tài)改變url的hash值來傳遞參數(shù),并利用vue-router組件的路由守衛(wèi)來避免頁面刷新,需要的朋友可以參考下
    2025-01-01
  • vue實現(xiàn)循環(huán)滾動圖片

    vue實現(xiàn)循環(huán)滾動圖片

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)循環(huán)滾動圖片,多圖片輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue實現(xiàn)彈幕功能

    vue實現(xiàn)彈幕功能

    這篇文章主要介紹了vue實現(xiàn)彈幕功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10

最新評論