日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

1、watchEffect

watchEffect 偵聽器是一個(gè)副作用函數(shù)，不需要指定監(jiān)聽的某個(gè)屬性，監(jiān)視的回調(diào)中用到哪個(gè)屬性，就會(huì)監(jiān)聽哪個(gè)屬性，一旦運(yùn)行就會(huì)立即執(zhí)行。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、新巴爾虎左ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的新巴爾虎左網(wǎng)站制作公司

watchEffect 與 computed 類似，computed 注重計(jì)算出來的結(jié)果，所以必須要返回值，而它注重的是過程，所以不用寫返回值。

使用語法：

watchEffect(() => {
  //需要監(jiān)聽的屬性
}, WatchEffectOptions)
// WatchEffectOptions 更多的配置項(xiàng)

watchEffect 使用實(shí)例：

刷新頁面，首次進(jìn)入的時(shí)候，watchEffect 回調(diào)函數(shù)會(huì)自動(dòng)執(zhí)行。

為什么說 watchEffect 是副作用函數(shù)呢？

副作用函數(shù)就是指會(huì)產(chǎn)生副作用的函數(shù)，也就是說函數(shù)在執(zhí)行的時(shí)候會(huì)直接或間接影響其他函數(shù)的執(zhí)行。watchEffect 副作用就是 DOM 掛載或更新之前就會(huì)觸發(fā)。

運(yùn)行下面的實(shí)例，發(fā)現(xiàn)：

第一次獲取到的元素是 null，執(zhí)行第二次監(jiān)聽的時(shí)候才會(huì)獲取到元素。

如何清除 watchEffect 的副作用呢？

上述的問題可以通過 flush:post 可以避免副作用，在 DOM 更新后運(yùn)行副作用，確保模板引用與 DOM 保持同步，并引入正確元素。

WatchEffectOptions 主要作用是指定調(diào)度器，何時(shí)運(yùn)行副作用函數(shù)。它是一個(gè)可選參數(shù)，具體屬性值有：

• flush
• onTrack
• onTrigger

flush 定義組件刷新時(shí)機(jī)，它有三個(gè)值，分別表示意義如下：

	pre	sync	post
更新時(shí)機(jī)	組件更新前執(zhí)行	強(qiáng)制效果始終同步觸發(fā)	組件更新后執(zhí)行

onTrack 和 onTrigger 用于調(diào)試一個(gè)偵聽器的行為。

清除副作用函數(shù)（onInvalidate）。

watchEffect 的第一個(gè)參數(shù)回調(diào)函數(shù)，也有自己的參數(shù) -- onInvalidate。它也是一個(gè)函數(shù)，用于清除 effect 產(chǎn)生的副作用。

watchEffect(
  (oninvalidate) => {
    console.log('監(jiān)聽參數(shù)',)
    oninvalidate(() => {
      console.log('before')
    })
  }
)

oninvalidate 只作用于異步函數(shù)，只有兩種情況才會(huì)被調(diào)用：

• watchEffect 第一個(gè)參數(shù) effect 回調(diào)函數(shù)，當(dāng) effect 被重新調(diào)用時(shí)。
• 當(dāng)監(jiān)聽器被注銷時(shí)。

如何停止監(jiān)聽？

副作用是伴隨組件加載而發(fā)生的，在組件卸載時(shí)，就需要清理這些副作用。watchEffect 的返回值依舊是一個(gè)函數(shù)，調(diào)用它的返回函數(shù)時(shí)就會(huì)清除監(jiān)聽，經(jīng)常在組件被卸載時(shí)調(diào)用。

setup() {
  const stop = watchEffect(() => {
    /* ... */
  });
 
  // 調(diào)用之后，清除監(jiān)聽
  stop();
}

2、watch

監(jiān)聽某個(gè)特定屬性，并能夠返回改變前后的值。使用語法：

watch(
  name,//需要監(jiān)聽的源
  (newVal, oldVal) => {}, //返回改變前后的值
  options //可選配置項(xiàng)
)

在頁面剛進(jìn)入的時(shí)候并不會(huì)立即執(zhí)行，只有監(jiān)聽的源數(shù)據(jù)改變時(shí)才會(huì)執(zhí)行?？梢员O(jiān)聽的源數(shù)據(jù)可以是一個(gè)也可以是多個(gè)。

示例如下：

如果 watch 監(jiān)聽一個(gè) ref 定義深層數(shù)據(jù)，修改值的時(shí)候會(huì)被監(jiān)聽到嗎？

let nav: any = ref({
  bar: {
    name: 'menu',
  },
})
watch(
  nav,
  (newV, oldV) => {
    console.log('newV', newV)
  }
)

當(dāng)我們修改 nav.bar.name 的屬性值的時(shí)候，發(fā)現(xiàn)監(jiān)聽內(nèi)的回調(diào)函數(shù)并沒有執(zhí)行。此時(shí)如何解決該問題呢？

watch 函數(shù)還有一個(gè) 可選的 options 參數(shù)，它的配置項(xiàng)有：

• deep 表示是否深度監(jiān)聽，是 boolean 值 ，默認(rèn)是 false 。
• immediate 是否立即執(zhí)行。

解決 watch 無法深層監(jiān)聽 ref 方法1：添加 deep 配置項(xiàng)

let nav: any = ref({
  bar: {
    name: 'menu',
  },
})
watch(nav, (newV, oldV) => {
    console.log('newV', newV)
  },
  {
    deep:true
  }
)

解決 watch 無法深層監(jiān)聽 ref 方法2：ref 替換成 reactive

let nav: any = reactive({
  bar: {
    name: '11',
  },
  menu: {
    name: '22',
  },
})
watch(nav, (newV, oldV) => {
  console.log('newV', newV.bar.name)
  console.log('newV', newV.menu.name)
})

使用 reactive 監(jiān)聽深層對(duì)象開啟和不開啟 deep 效果是一樣的。修改 nav.bar.name 或 nav.menu.name 的時(shí)候，都會(huì)觸發(fā)函數(shù)。如果我們只是想監(jiān)聽其中一個(gè)屬性該如何處理呢？

監(jiān)聽 reactive 單一值

let nav: any = reactive({
  bar: {
    name: '1',
  },
  menu: {
    name: '2',
  },
})
watch(
  () => nav.bar.name,
  (newV, oldV) => {
    console.log('newV', newV)
  },
)

3、computed

計(jì)算屬性就是當(dāng)依賴的屬性值發(fā)生改變的時(shí)候，才會(huì)觸發(fā)它的更改，如果依賴的值不發(fā)生改變，使用的是緩存中的值。

函數(shù)形式使用語法：

import { computed, ref } from "vue"
let num: number = ref(0)
const res: number = computed((): number => {
  return num.value * 10
})

對(duì)象形式使用語法：

import { computed, ref } from "vue"
let num: number = ref(0)
const res: number = computed({
  get: (): number => {
    return num.value * 10
  },
  set: (val: number): number => {
    num.value = val / 10
  },
})

使用 computed 實(shí)現(xiàn)購物車價(jià)格計(jì)算功能，代碼：

名稱欄目：Vue3新特性Computed、Watch、WatchEffect看完就會(huì)
瀏覽路徑：http://www.dlmjj.cn/article/djceoei.html