Vue 监视对象答案

【问题标题】：Vue watch on objectsVue 监视对象
【发布时间】：2022-07-16 05:17:35
【问题描述】：

我正在使用 Vue2，但在比较对象时遇到了问题。但是当比较 "newVal" 和 "oldVal" 值时总是相同的。

子组件：

name: "List",
    components: {
        Pagination, UserDetails
    },
    props: {
        filters: Object
    },
    watch: {
        filters: {
            handler(val, oldVal) {
                console.log(JSON.stringify(val));
                console.log(JSON.stringify(oldVal));
            },
            deep: true,
        }
    },

父组件：

<template>
    <div>
        <b-form inline>
            <label class="sr-only" for="inline-form-input-name">Name</label>
            <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                v-model="filters.username"
                placeholder="Name"
            ></b-form-input>

            <label class="sr-only" for="inline-form-input-username">Email</label>
            <b-input-group class="mb-2 mr-sm-2 mb-sm-0">
                <b-form-input
                    id="inline-form-input-username"
                    v-model="filters.email"
                    placeholder="Email"></b-form-input>
            </b-input-group>
            <b-button variant="danger">Clear</b-button>
        </b-form>
        <List :filters="filters"/>
    </div>
</template>

<script>

import List from "./List";

export default {
    name: "AdminUserList",
    components: {
        List,
    },
    data() {
        return {
            filters: {
                username: '',
                email: ''
            },
        }
    },
}
</script>

<style lang="scss">

</style>

结果：

{"用户名":"d","email":""}

【问题讨论】：

标签： vue.js

【解决方案1】：

从官方文档中你会发现：

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。 Vue 不会保留 pre-mutate 值的副本。

vue js watcher DOC

您可以做的一件事是直接观察对象的属性，例如：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      filters: {
        name: '',
        email: '',
      },
    };
  },
  watch: {
    'filters.name' (newVal, oldVal) {
      console.log(`new name: ${newVal}`, `, old name: ${oldVal}`);
    },
    'filters.email' (newVal, oldVal) {
      console.log(`new email: ${newVal}`, `, old email: ${oldVal}`);
    },
  },
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="px-5">
        <v-text-field v-model="filters.name" outlined label="name"></v-text-field>
      </v-row>
      <v-row class="px-5">
        <v-text-field v-model="filters.email" outlined label="email"></v-text-field>
      </v-row>
    </v-container>
  </v-app>
</div>

【讨论】：

【解决方案2】：

尝试相应地调整观察者

watch: {
    filters: {
        handler: function(val, oldVal) {
            console.log(JSON.stringify(val));
            console.log(JSON.stringify(oldVal));
        },
        deep: true,
    }
},

我刚刚关注了来自official website的文档

【讨论】：

和我的一样。
技术上是这样，但 VueJS 有时对你如何指定函数非常敏感。所以我提到的这个轻微的修改可能会奏效。试一试，如果有帮助，请告诉我。不同的是我指定了函数关键字
效果是一样的。两个值相同。