vue计算属性和监听属性详解

最新推荐文章于 2025-03-16 08:57:57 发布

是小张呀丶

最新推荐文章于 2025-03-16 08:57:57 发布

阅读量428

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_57761373/article/details/120761215

版权

本文介绍了Vue.js中计算属性`computed`和监听器`watch`的区别与用法。计算属性会在依赖数据变化时自动更新，只在所需数据改变时重新计算。而`watch`则在指定数据变化时执行回调函数，常用于复杂逻辑处理。示例代码展示了如何在 Vue 实例中使用这两个特性来实时更新`fullName`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.计算属性 computed

当依赖的数据发生变化时，计算属性会被重新计算。

有且只有在依赖的数据发生改变时它才会重新求值。（别的数据改变对计算属性没有影响）

```html
    <div id="example">
        <div id="demo">{{ fullName }}</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                firstName: 'Foo',
                lastName: 'Bar'
            },
            computed: {
                // this 指向 vm 实例
                fullName: function () {
                    // 当this.firstName 或 this.lastName 有变化时这个函数会重新执行
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
```

2.侦听器 watch

当监听的数据变化时监听函数被执行

```html
    <div id="example">
        <div id="demo">{{ fullName }}</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            watch: {
                // this 指向 vm 实例
                firstName: function (newVal, oldVal) {
                    // 当this.firstName 有变化时这个函数会重新执行
                    this.fullName = newVal + ' ' + this.lastName
                },
                lastName: function (newVal, oldVal) {
                    // this.lastName 有变化时这个函数会重新执行
                    this.fullName = this.firstName + ' ' + newVal
                }
            }
        })
    </script>
```