vue2中computed与watch的使用

最新推荐文章于 2024-08-30 20:29:15 发布

Coco涛涛

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量115

点赞数

分类专栏： vue学习记录+面试题文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/Jason_yuxuan/article/details/130166404

版权

vue学习记录+面试题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章详细对比了Vue.js中的计算属性(computed)和数据监听(watch)。计算属性用于基于响应式数据生成衍生值，支持get和set方法。而watch主要用于监听数据变化，执行复杂逻辑，特别是在需要异步操作或深度监听时。watch在处理引用类型时，需注意无法直接获取旧值。

摘要由CSDN通过智能技术生成

computed和watch
我们先看下它们的主要作用和区别：请看下方的导图记录：

watch
computed:

<template>
  <div class="">
    <p>num:{{ num }}</p>
    <p>double1:{{ double1 }}</p>
    <input type="text" v-model="double2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 2,
    };
  },
  computed: {
    // 计算属性的两种写法
    double1() {
      return this.num * 2;
    },
    double2: {
      get() {
        return this.num * 3;
      },
      set(val) {
        console.log("1111", val);
        this.num = val;
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>

watch:

<template>
  <div class="">
    <input type="text" v-model="name" />
    <input type="text" v-model="info.city" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "coco",
      info: {
        city: "上海",
      },
    };
  },
  watch: {
    name(oldVal, val) {
      // 基本类型可以拿到oldval和val
      console.log("watch name", oldVal, val);
      //   异步操作
      setTimeout(() => {
        console.log("这里是异步的操作", oldVal, val);
      }, 1000);
    },
    info: {
      handler(oldVal, val) {
        // 引用类型，是拿不到oldVal的；因为引用类型是放在堆里的，引用指针是相同的，此时已经指向了新的val
        console.log("watch info", oldVal, val);
      },
      deep: true, //深度监听
      immediate: true, //进入组件的第一次就监听一次
    },
  },
};
</script>

<style lang="scss" scoped></style>