全栈之路Vue.js系列（三）之计算属性与监听属性

最新推荐文章于 2025-06-13 18:49:58 发布

原创最新推荐文章于 2025-06-13 18:49:58 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue.js中的计算属性和监听属性。计算属性用于处理复杂逻辑，提供缓存机制，避免重复计算。例如，通过`computed`对象创建`reverseMessage`，实现字符串反转。监听属性则允许我们响应数据变化，执行异步或高开销操作，如在`watch`中监听`kilometers`和`meters`，实时更新两者之间的转换。这两个特性让Vue.js的模板更加简洁，提高了代码维护性。

前言

前面的文章我们已经初步了解了Vue的常用的指令如v-bind, v-on等等，今天我们来了解Vue的计算属性和监听属性，其实这也不是什么新的概念，在一些语言Kotlin中也有类似的属性，但是却十分的有用。

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以对于复杂的逻辑，尽量使用计算属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{reverseMessage}}
    <p>{{message}}</p>
</div>
</body>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "China"
        },
        computed: {
            reverseMessage: function () {
               return  this.message.split('').reverse().join('')
            }
        }
    });
</script>
</html>

我们通过计算属性对message作出了改变，相较于直接调用函数，计算属性是依赖于缓存的，只要message不发生改变，不会重新计算，而是返回之前的值，如果使用函数，每调用一次就会计算一次，如果计算复杂，对性能影响就会比较大。

利用计算属性可以将多个数据整合到一起，更加简便

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   {{fullName}}
</div>
</body>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            firstName: "Eric",
            lastName: "Cantona"
        },
        computed: {
            fullName: function () {
               return  this.firstName + " " + this.lastName
            }
        }

    });
</script>
</html>

监听属性

监听watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model = 'kilometers'>
    <input type="text" v-model = 'meters'>
</div>
</body>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            kilometers: 0,
            meters: 0
        },
        watch: {
            kilometers: function (val) {
                this.kilometers = val;
                this.meters = this.kilometers * 1000
            },
            meters: function (val) {
                this.meters = val;
                this.kilometers = this.meters / 1000
            }
        }

    });
</script>
</html>