Vue 计算属性

红太狼 2024-04-18 15:24 69阅读 0赞

## 简介 ##

构造器的 computed 选项，用于定义 Vue 实例的计算属性。

虽然模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
      {
       { message.split('').reverse().join('') }}
    </div>

这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

## 基础例子 ##

<div id="example">
      <p>Original message: "{
       { message }}"</p>
      <p>Computed reversed message: "{
       { reversedMessage }}"</p>
    </div>

var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })

结果如下：

Original message: "Hello"
    
    Computed reversed message: "olleH"

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'
    vm.message = 'Goodbye'
    console.log(vm.reversedMessage) // => 'eybdooG'

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

## 计算属性 vs 方法 ##

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

<p>Reversed message: "{
       { reversedMessage() }}"</p>

// 在 Vue 构造器中
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
      now: function () {
        return Date.now()
      }
    }

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

## 计算属性的 setter ##

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter。

getter 会在它的依赖发生变化时，触发；而 setter 会在计算属性自身的值发生变化时，触发。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{
       { site }}</p>
    </div>
    
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: '谷歌',
                url: 'http://www.google.com'
            },
            computed: {
                site: {
                    // getter
                    get: function () {
                        return this.name + ' ' + this.url
                    },
                    // setter
                    set: function (newValue) {  // 计算属性的新值
                        var names = newValue.split(' ')
                        this.name = names[0]
                        this.url = names[names.length - 1]
                    }
                }
            }
        })
        // 调用 setter， vm.name 和 vm.url 也会被对应更新
        vm.site = '百度 www.baidu.com';
        document.write('name: ' + vm.name);
        document.write('<br>');
        document.write('url: ' + vm.url);
    </script>
    </body>
    </html>