hualinux 进阶 vue 1.7：vue命令（三）计算属性computed和侦听属性watch

最新推荐文章于 2022-07-21 11:39:44 发布

原创最新推荐文章于 2022-07-21 11:39:44 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#hualinux vue #vue计算属性和侦听属性

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章

订阅专栏

本文介绍了Vue.js中的计算属性computed和侦听属性watch。计算属性用于根据现有数据创建新的数据，其结果会被缓存，只有依赖变化时才更新。watch则用于监听数据变化并执行相应操作，例如统计输入姓名的次数。通过示例代码，详细解释了如何使用这两个特性。

继续vue命令，计算属性computed和侦听属性watch

参考：Vue中的计算属性和侦听器

一、计算属性

1.1 `computed前言`

我们先看例子，在文本中输入姓名，在最下方显示姓名，代码如下：

<body>
    <div id="root">
       姓：<input v-model="firstName"/><br>
       名：<input v-model="lastName"/><br>
       <div>你输入的姓名为：{{firstName}}{{lastName}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: ''
            }
        })
    </script>
</body>

PS：使用标签，引入vue.js部分我没有写

运行并输入李白，效果如下：

但是我们想不用{{firstName}}{{lastName}}这种，而是使用fullName

<div id="root">
   姓：<input v-model="firstName"/><br>
   名：<input v-model="lastName"/><br>
   <div>你输入的姓名为：{{fullName}}</div>
</div>

这个fullName是通过计firstName和lastName计算而成的一个新变量。

1.2 computed说明

我们可以在Vue使用computed参数来弄

类型：{ [key: string]: Function | { get: Function, set: Function } }
详细：

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
  aDouble: vm => vm.a * 2
}

计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

上面的例子可以修改为：

<body>
    <div id="root">
       姓：<input v-model="firstName"/><br>
       名：<input v-model="lastName"/><br>
       <div>你输入的姓名为：{{fullName}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: ''
            },
            computed: {
                fullName: function () {
                    return this.firstName+''+this.lastName
                }
            }
        })
    </script>
</body>

1.3 `computed好处`

二、侦听属性

侦听器听某个数据的变化，一旦这个数据发生变化，我就可以在侦听器里写自己的业务逻辑。

2.1 watch方法侦听属性

侦听属性可以使用Vue的watch方法

类型：{ [key: string]: string | Function | Object | Array }
详细：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

2.2 例子

我们可以统计一下输入的姓名和变化次数

<body>
    <div id="root">
       姓：<input v-model="firstName"/><br>
       名：<input v-model="lastName"/><br>
       <div>你输入的姓名为：{{fullName}}</div>
       <div>{{mycount}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: '',
                mycount: 0
            },
            computed: {
                fullName: function () {
                    return this.firstName+' '+this.lastName
                }
            },
            watch: {
                fullName: function (){
                    this.mycount++
                }
            }
        })
    </script>
</body>

运行效果：