黄子涵

计算属性和侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

基础例子
<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础例子</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <div id="hzh">
        <h1>原来的hzh1：{{hzh1}}</h1>
        <h1>原来的hzh2：{{hzh2}}</h1>
        <h1>反转后的hzh1：{{reHzh1}}</h1>
        <h1>反转后的hzh2：{{reHzh2}}</h1>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                hzh1: "黄子涵是帅哥！",
                hzh2: "黄子涵真聪明！",
            },
            computed: {
                reHzh1: function() {
                    return this.hzh1.split('').reverse('').join('')
                },
                reHzh2: function() {
                    return this.hzh2.split('').reverse('').join('')
                },
            }
        })
    </script>
</body>
 
</html>

image

image

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reHzh* 的值始终取决于 vm.hzh* 的值。

你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reHzh* 依赖于 vm.hzh*，因此当 vm.hzh* 发生改变时，所有依赖 vm.reHzh* 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础例子</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <div id="hzh">
        <h1>原来的hzh1：{{hzh1}}</h1>
        <h1>原来的hzh2：{{hzh2}}</h1>
        <h1>反转后的hzh1：{{reHzh1()}}</h1>
        <h1>反转后的hzh2：{{reHzh2()}}</h1>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                hzh1: "黄子涵是帅哥！",
                hzh2: "黄子涵真聪明！",
            },
            methods: {
                reHzh1: function() {
                    return this.hzh1.split('').reverse('').join('')
                },
                reHzh2: function() {
                    return this.hzh2.split('').reverse('').join('')
                },
            }
        })
    </script>
</body>
 
</html>

image

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性缓存 vs 方法</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <div id="hzh">
        <h1>原来的hzh1：{{hzh1}}</h1>
        <h1>原来的hzh2：{{hzh2}}</h1>
        <h1>反转后的hzh1：{{reHzh1()}}</h1>
        <h1>反转后的hzh2：{{reHzh2}}</h1>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                hzh1: "黄子涵是帅哥！",
                hzh2: "黄子涵真聪明！",
            },
            methods: {
                reHzh1: function() {
                    return this.hzh1.split('').reverse('').join('')
                }
            },
            computed: {
                reHzh2: function() {
                    return this.hzh2.split('').reverse('').join('')
                }
            }
        })
    </script>
</body>
 
</html>

image

【评】这个你会看到在Vue实例中有computed的缓存，而没有看到methods的缓存，也就是我们更新data对象的数据，会重新调用一次方法，而computed直接使用在Vue实例中的缓存。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性缓存 vs 方法</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <div id="hzh">
        <h1>{{now}}</h1>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#hzh',
            computed: {
                now: function() {
                    return Date.now()
                }
            }
        })
    </script>
</body>
 
</html>

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch —— 特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性 vs 侦听属性</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <h1 id="hzh">{{ fullName }}</h1>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                firstName: '黄',
                lastName: '子涵',
                fullName: '黄子涵'
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + '' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + '' + val
                }
            },
        })
    </script>
</body>
</html>

image

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性 vs 侦听属性</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <h1 id="hzh">{{ fullName }}</h1>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                firstName: '黄',
                lastName: '子涵',
            },
            computed: {
                fullName: function () {
                    return this.firstName + '' + this.lastName
                }
            }
        })
    </script>
</body>
 
</html>

image

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性 vs 侦听属性</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <h1 id="hzh">{{ fullName }}</h1>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                firstName: '黄',
                lastName: '子涵',
            },
            computed: {
                fullName: {
                    // getter
                    get: function () {
                        return this.firstName + '' + this.lastName
                    },
                    // setter
                    set: function (newValue) {
                        var names = newValue.split('');
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        })
    </script>
</body>
 
</html>

image

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
    <script src="./vue.js"></script>
</head>
 
<body>
    <div id="watch-example">
        <p>
            问你一个是非题：
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
    </div>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
        var watchExampleVM = new Vue({
            el: '#watch-example',
            data: {
                question: '',
                answer: '我不能给你一个答案，除非你问一个问题！'
            },
            watch: {
                // 如果 `question` 发生改变，这个函数就会运行
                question: function (newQuestion, OldQuestion) {
                    this.answer = '等待你停止输入...'
                    this.debouncedGetAnswer()
                }
            },
            created: function () {
                // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
                // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                // 请参考：https://lodash.com/docs#debounce
                this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
            },
            methods: {
                getAnswer: function () {
                    if (this.question.indexOf('？') === -1) {
                        this.answer = '问题通常包含问号。；-）'
                        return
                    }
                    this.answer = '思考中...'
                    var vm = this
                    axios.get('https://yesno.wtf/api')
                       .then(function(response) {
                           vm.answer = _.capitalize(response.data.answer)
                       })
                       .catch(function (error) {
                           vm.answer = '错误！无法访问API。' + error
                       })
                }
            },
        })
    </script>
</body>
 
</html>

image

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。

posted @   黄子涵  阅读(64)  评论(0)  编辑  收藏  举报
相关博文：
·  5.8 属性的访问
·  4.1.1 MVVM 模式
·  VUE教程-基础-计算属性和侦听器
·  Vue—计算属性和侦听器
·  vue学习——计算属性和侦听器
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手