Vue—计算属性

最新推荐文章于 2022-06-14 17:06:15 发布

weixin_44248221

最新推荐文章于 2022-06-14 17:06:15 发布

阅读量105

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44248221/article/details/125178955

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中计算属性的概念，强调了它在处理复杂逻辑时的作用。计算属性存储在缓存中，仅在相关依赖变更时重新计算。文章通过示例展示了计算属性的getter方法，以及如何使用setter方法。同时，对比了计算属性与methods的区别，指出计算属性基于依赖缓存，而methods每次都会重新执行。最后，通过一个例子演示了setter的使用，并解释了setter触发时如何更新所依赖的属性。

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

#计算属性
可以理解对vue中data的属性的计算，计算属性在处理一些复杂逻辑时是很有用的。

写在vue的computer中

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  //getter的另一种写法（完整写法）
   //reversedMessage: {get() {
      // `this` 指向 vm 实例
  //    return this.message.split('').reverse().join('')
  //  } }
  }
})
</script>

1、getter方法是获取 computer中的属性/数据（上例中的reversedMessage）执行的方法

2、因为computer的数据是存储在缓存中的，
故computer的getter方法只执行一次，一种是初次读取数据时，一种是所依赖（涉及）的数据发生改变时（比如上例的message改变时，reversedMessage的getter方法会被执行）

3、computed 属性默认只有 getter，setter需要自己写，大多情况都只用get，所以当没有setter方法，只有getter方法时。有时可以简写,如上例

<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
	name: 'Google',
	url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      //get():
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      //set(newValue):
      set: function (newValue) {
        var names = newValue.split(' ')//字符串分割为字符数组
        this.name = names[0]//字符数组第一个元素
        this.url = names[names.length - 1]字符数组第最后一个元素
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
//vm.site = '百度 http://www.baidu/.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>

setter 会被调用时，所依赖的属性也会被对应更新，比如上例的name 和 url。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。