如何观察Vue中的嵌套变化

后端之巅
112 阅读3分钟

DZone>Web Dev Zone>如何关注Vue中的嵌套变化

如何关注Vue中的嵌套变化

让我们来看看如何观察Vue中的嵌套变化。

Johnny Simpson user avatar作者

约翰尼-辛普森

CORE -

5月。11, 22 - Web Dev Zone -教程

喜欢 (1)

评论

保存

鸣叫

264次浏览

加入DZone社区，获得完整的会员体验。

免费加入

Vue是一种反应式语言，这意味着当数据发生变化时，我们可以自动在HTML中表现出来。为了帮助我们做到这一点，我们可以在vue中使用观察器来观察数据的变化，然后对HTML做一些处理，或者向用户发送一个消息。

这对简单的数据集来说很有效，但如果我们开始有比一层更深的数据，就很难正确观察它的变化了。

观察Vue中的嵌套数据变化

为了了解这个问题，我们需要了解Vue中的观察者是如何工作的。Vue只观察浅层的变化例如，下面，我们观察count ，并且console.log 这些变化。

Vue.js组件

<script>
export default {
    data() {
        return {
            count: 1
        }
    },
    watch: {
        count(data) {
            console.log(data);
        }
    }
}
</script>

<template>
    <h1>{{ count }}</h1>
    <button @click="++this.count">
        Click Me
    </button>
</template>

每次用户点击按钮时，我们++this.count ，我们的观察器观察count 中的任何变化。然后console 记录数据，这样我们就可以看到新的计数值。这意味着任何时候点击按钮，计数的值都会显示在控制台日志上。

然而，浅层变化意味着Vue只检查该属性值的变化。如果我们有超过一层的数据，Vue将不会检查更新。例如，更新下面的count.number 不会触发我们对count 的观察器，因为Vue根本不检查比count 更深的任何变化。

Vue.js组件

data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        // This doesn't get triggered when count.number!
        count(data) {
            console.log(data);
        }
    }
}

相反，我们需要特别提到哪个元素在变化。我们可以通过改变我们的观察者来观察count.number ，继续观察上面count.number 的变化。

Vue.js组件

data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        // This gets triggered when count.number changes!
        "count.number" : function(data) {
            console.log(data);
        }
    }
}

使用上述方法，我们可以很容易地检查属性中的属性变化，这样我们就可以启动相应的观察器，但这可能会变得很混乱。如果我们想简单地观察任何count 变化，我们需要使用deep 属性。

使用深层属性

deep属性可以被添加到任何观察器中，它迫使Vue观察特定数据属性的任何变化。这意味着我们必须以一种不同的方式编写我们的watcher 。

Vue.js组件

data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        count: {
            handler(data) {
                console.log(data);
            },
            deep: true
        }
    }
}

现在只要count 内的任何属性发生变化，count 观察器就会启动。当我们console.log(data) 这个时候，整个count 对象将被控制台记录下来，即{ number: 1, type: 'number' } 。

这比针对属性中的特定属性要容易得多，但代价也很高。因为Vue每次都要浏览每个属性，这对非常大的对象来说会造成严重的性能问题。因此，只有当你有一个小尺寸的已知对象时才使用这个方法。对于其他情况，坚持以特定的属性为目标，比如count.number 。

属性（编程）

经Johnny Simpson, DZone MVB许可发表于DZone。点击这里查看原文。

DZone贡献者所表达的观点属于他们自己。

在DZone上受欢迎

评论

网络开发 合作伙伴资源

avatar
文章
阅读
粉丝