Vue计算属性和侦听属性

最新推荐文章于 2024-05-28 09:22:12 发布

一只小林

最新推荐文章于 2024-05-28 09:22:12 发布

阅读量518

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_54598736/article/details/127266837

版权

本文详细介绍了Vue中的计算属性和侦听属性。计算属性用于自动监听依赖值变化并返回动态内容，具备缓存特性，由get和set组成。相比之下，methods不具备缓存，但可通过闭包实现传参。侦听属性允许执行复杂逻辑，包括深度监听和立即触发。总结来说，计算属性适用于模板渲染，侦听属性适合复杂业务逻辑，且watch能做计算属性所有事情，但反之不成立。

摘要由CSDN通过智能技术生成

Vue计算属性和侦听属性

计算属性

1.介绍

计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点：

数据可以进行逻辑处理，减少模板中计算逻辑。
对计算属性中的数据进行监视
依赖固定的数据类型（响应式数据）

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      //this.fullName = newValue 这种写法会报错
      var names = newValue.split(' ')
      this.firstName = names[0]//对它的依赖进行赋值
      this.lastName = names[names.length - 1]
    }
  }
}

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