日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

1、watchEffect

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

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

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

使用語法：

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

watchEffect 使用實例：

刷新頁面，首次進入的時候，watchEffect 回調函數會自動執(zhí)行。

為什么說 watchEffect 是副作用函數呢？

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

運行下面的實例，發(fā)現：

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

如何清除 watchEffect 的副作用呢？

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

WatchEffectOptions 主要作用是指定調度器，何時運行副作用函數。它是一個可選參數，具體屬性值有：

• flush
• onTrack
• onTrigger

flush 定義組件刷新時機，它有三個值，分別表示意義如下：

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

onTrack 和 onTrigger 用于調試一個偵聽器的行為。

清除副作用函數（onInvalidate）。

watchEffect 的第一個參數回調函數，也有自己的參數 -- onInvalidate。它也是一個函數，用于清除 effect 產生的副作用。

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

oninvalidate 只作用于異步函數，只有兩種情況才會被調用：

• watchEffect 第一個參數 effect 回調函數，當 effect 被重新調用時。
• 當監(jiān)聽器被注銷時。

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

副作用是伴隨組件加載而發(fā)生的，在組件卸載時，就需要清理這些副作用。watchEffect 的返回值依舊是一個函數，調用它的返回函數時就會清除監(jiān)聽，經常在組件被卸載時調用。

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

2、watch

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

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

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

示例如下：

如果 watch 監(jiān)聽一個 ref 定義深層數據，修改值的時候會被監(jiān)聽到嗎？

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

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

watch 函數還有一個 可選的 options 參數，它的配置項有：

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

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

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)聽深層對象開啟和不開啟 deep 效果是一樣的。修改 nav.bar.name 或 nav.menu.name 的時候，都會觸發(fā)函數。如果我們只是想監(jiān)聽其中一個屬性該如何處理呢？

監(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

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

函數形式使用語法：

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

對象形式使用語法：

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 實現購物車價格計算功能，代碼：

網站題目：Vue3新特性Computed、Watch、WatchEffect看完就會
新聞來源：http://m.5511xx.com/article/djceoei.html