vue3较vue2的特别之处 - watch/watchEffect

haketest lv.1

发布时间：2022-09-30 15:37:57 318

相关标签：

区别：

watch可以查看旧值， watchEffect不可以。
watch只有属性改变才执行， watchEffect初始执行一次，属性改变再执行。
watch要指定属性， watchEffect不需要。
watch不可以停止监听， watchEffect可以。
watch多次触发多次执行(不能节流)， watchEffect可以。

示例：

vue3较vue2的特别之处 - watch/watchEffect_ecmascript

示例代码：

<template>
  <div>count: {{ count }}</div>
  <button @click="clickPlus">加号123</button>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  onBeforeMount,
  onUpdated,
  ref,
  watch,
  watchEffect,
} from "vue";
export default defineComponent({
  setup() {
    console.log('初始化开始');
    
    const count = ref(0);
    const clickPlus = () => {
      count.value++;
    };
    watch(
      () => count.value,
      (newValue, oldValue) => {
        console.log("watch: newValue: " + newValue + ', oldValue: ' + oldValue);
      }
    );
// sotp可以用来停止监听
    const stop = watchEffect(() => {
      console.log("watchEffect: " + count.value);
    });
    onUpdated(() => { console.log('updated'); });
    return {
      count,
      clickPlus,
    };
  },
  data() {return {}},
  methods: {},
});
</script>
<style scoped></style>

文章来源： https://blog.51cto.com/u_11071029/5641170

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。