biu biu biu coding

watch

Vue
字数统计: 345阅读时长: 1 min
2019/12/27 Share

watch 新旧值一致

Demo

场景

1
2
3
4
5
6
<template>
  <div class="watch">
    <span>params.name:</span>
    <input type="text" v-model="params.name">
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
data() {
    return {
      params: {}
    };
  },
  watch: {
    params(newVal, oldVal) {
      console.log("普通方式oldVal", oldVal);
      console.log("普通方式newVal", newVal);
    }
  }

如上代码，input输入2，打印结果只打印一次且新旧值相等

watch

官方的解释

注意：在变异(不是替换)对象或者数组时，旧值将与新值相等，因为它们的引用指向同一个对象/数组，Vue不会保留变异之前值的副本

解决方案

  1. 监听到具体项

    1
    2
    3
    4
    5
    6
    watch() {
        "params.name"(newVal, oldVal) {
        console.log("监听到具体项oldVal", oldVal);
        console.log("监听到具体项newVal", newVal);
        }
    }

    input输入2，再输入3，打印结果如下：
    watch

  1. 监听一个计算属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    watch() {
        getParamsName(newVal, oldVal) {
        console.log("监听计算属性oldVal", oldVal);
        console.log("监听计算属性newVal", newVal);
        }
    },
    methods: {
        getParamsName() {
        return this.params.name;
        }
    }

    input输入2，再输入3，打印结果如下：
    watch

    或者你想直接监听一个计算属性，但是返回整体，而不是具体项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    watch() {
        getParamsName(newVal, oldVal) {
        console.log("监听计算属性oldVal", oldVal);
        console.log("监听计算属性newVal", newVal);
        }
    },
    methods: {
        getParamsName() {
        return JSON.parse(JSON.stringify(this.params));
        }
    }

    input输入2，再输入3，打印结果如下：
    watch





原文作者：Febcat

原文链接：https://febcat.github.io/2019/12/27/watch/

发表日期：December 27th 2019, 7:47:33 pm

更新日期：September 19th 2020, 3:36:18 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. watch 新旧值一致
    1. 1.1. 场景
    2. 1.2. 官方的解释
    3. 1.3. 解决方案
Total : 7
2021
2020
2019
git javascript React SSR Vue webpack settings
bugfix web server