vue3.0 watch监听

2021-07-28 22:33:46 阅读：795 来源： 互联网

标签：console sum watch newval oldval vue3.0 ref 监听

vue2.x watch

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref } from "vue";
export default {
  // vue2.x 简易写法
  watch: {
    sum(newval, oldval) {
      console.log(newval, oldval);
    },
  },
  setup() {
    const sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

正常打印，说明vue3中也可以使用vue2.x的写法
在这里插入图片描述
完整写法就是带有配置项的

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref } from "vue";
export default {
  // vue2.x 简易写法
  // watch: {
  //   sum(newval, oldval) {
  //     console.log(newval, oldval);
  //   },
  // },
  watch: {
    sum: {
      immediate:true, // 立即执行一次
      deep:true,// 深度监听
      handler(ewval, oldval) {
        console.log(newval, oldval);
      },
    },
  },
  setup() {
    const sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

vue3.0 watch
vue3中的watch是一个函数，所以需要单独引入

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    // 是一种行为 所以没有返回
    watch(sum, (newval, oldval) => {
      console.log("vue3.0", newval, oldval);  
    });
    return {
      sum,
    };
  },
};
</script>

在这里插入图片描述
以上演示了监听单个ref响应式数据，现在演示监听多个，比较简单的写法就是用两个watch

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
  <hr />
  <h2>招呼：{{ info }}</h2>
  <button @click="info += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    const info = ref("hello");
    // 1.监听ref单个响应式数据
    watch(sum, (newval, oldval) => {
      console.log("求和", newval, oldval);
    });
    // 2.监听多个响应式数据 在vue2.x中watch是个配置项，所以只能写一个watch，vue3.0中是函数，可以写多个
    watch(info, (newval, oldval) => {
      console.log("招呼：", newval, oldval);
    });
    return {
      sum,
      info,
    };
  },
};
</script>

在这里插入图片描述

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
  <hr />
  <h2>招呼：{{ info }}</h2>
  <button @click="info += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    const info = ref("hello");
    // 1.监听ref单个响应式数据
    // watch(sum, (newval, oldval) => {
    //   console.log("求和", newval, oldval);
    // });
    // 2.监听多个响应式数据 在vue2.x中watch是个配置项，所以只能写一个watch，vue3.0中是函数，可以写多个
    watch([sum, info], (newval, oldval) => {
      console.log("新值newval", newval);
      console.log("旧值oldval", oldval);
    });
    return {
      sum,
      info,
    };
  },
};
</script>

在这里插入图片描述
immediate，deep配置如下，

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
  <hr />
  <h2>招呼：{{ info }}</h2>
  <button @click="info += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    const info = ref("hello");
    // 1.监听ref单个响应式数据
    watch(
      // 第一个参数，监视的数据
      sum,
      // 第二个参数，监视的回调
      (newval, oldval) => {
        console.log("求和", newval, oldval);
      },
      // 第三个参数，监视的配置
      { immediate: true}
    );
    // 2.监听多个响应式数据 在vue2.x中watch是个配置项，所以只能写一个watch，vue3.0中是函数，可以写多个
    // watch([sum, info], (newval, oldval) => {
    //   console.log("新值newval", newval);
    //   console.log("旧值oldval", oldval);
    // });
    return {
      sum,
      info,
    };
  },
};
</script>

在这里插入图片描述

标签：console,sum,watch,newval,oldval,vue3.0,ref,监听
来源： https://blog.csdn.net/weixin_45780818/article/details/119190963

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3.0 watch监听