计算属性和侦听器

最新推荐文章于 2024-03-14 08:30:00 发布

原创最新推荐文章于 2024-03-14 08:30:00 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#计算属性 #侦听器

vue基础学习专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中的计算属性和侦听器。计算属性用于处理复杂的逻辑并提供缓存，避免模板中的冗余计算。当依赖数据变化时，计算属性自动更新。相比之下，侦听器提供数据变化的回调，但通常建议使用计算属性来响应数据变化。此外，还探讨了计算属性的setter和getter，展示了如何实现数据的双向绑定和实时更新。

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

1. 计算属性–computed

官网对于计算属性的解释是用于简化模板中放入冗杂的计算逻辑而设计的，也就是说当要显示的变量要经过逻辑运算后再显示后，不推荐在模板中进行计算，都应当使用计算属性。下面通过一个例子来实现：

<body>
<div id="root">
  姓：<input v-model="firstName">
  名：<input v-model="lastName">
  <div>{{fullName}}</div>
</div>
<script>
  new Vue({
    el:"#root",
    data:{
      firstName:'',
      lastName:'',
    },
    computed:{   /*firstname和lastname没有发生改变时，
    computed不会重新计算，会保留上一次计算的缓存值*/
      fullName:function () {
        return this.firstName+''+this.lastName
      }
    }
  })
</script>
</body>

这里我们实现了数据的双向绑定，将firstName和lastName的变化和data绑定起来，而计算属性fullName又实时地将姓和名拼接起来进行显示：在这里插入图片描述
计算属性还有一个特点是具有缓存的作用，当计算属性所依赖的其他值没有发生改变时，计算属性不会重新计算，而是会返回上一次计算的值，只在相关依赖（归Vue管理的数据，可以响应式变化的）发生改变时它们才会重新求值。这也就是计算属性是“属性”而不是“方法”，方法不会有缓存。这就意味着只要firstName和lastName还没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。

2. 侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听器。但是相对于侦听器，在监听数据的变化时，更推荐使用计算属性而不是watch中的回调，下面是一个例子，我们定义了一个count来监听fullName的变化，发生改变时，count加一：

<body>
<div id="root">
  姓：<input v-model="firstName">
  名：<input v-model="lastName">
  <div>{{fullName}}</div>
  <div>{{count}}</div>
</div>

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

实现的效果如下：
在这里插入图片描述
3. 计算属性的setter和getter
computed中不能只写set。
由具体的例子入手：

<body>
  <div id="app">
    {{fullName}}
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        firstName:"Dell",
        lastName:"Lee"
      },
      computed:{
        fullName: {
          get:function () {   /*当“取”fullname这个属性值时，会执行这个函数*/
            return this.firstName+" "+this.lastName
          },
          set:function (value) {  /*当“设置”fullname这个属性值时，会执行这个函数*/
            var arr=value.split(" ");
            this.firstName=arr[0];
            this.lastName=arr[1];
       /*     console.log(value);*/
          }

        }
      }
    })
  </script>
</body>

页面显示：
在这里插入图片描述
在控制台改变fullName的值后：

同时页面显示的fullName也实时地发生了改变：