详解 Vue 的 计算属性 computed

computed 方法的介绍：

在初始化及相关的data属性数据发生改变的时候会调用一次哦!

特点：

• 计算属性在使用时不需要加(),直接写名称即可
• 如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值
• 计算属性在第一次使用时的结果会被缓存起来，直到属性中所依赖的data数据发生改变计算属性的结果才会重新求值

computed 中的setter 和 getter 属性：

<div id="app">

    <div>
          message: {{message}}
    </div>
  
    <!-- 计算属性 -->
    <div>
           计算属性： {{updateMessage}}
    </div>
​
</div>
    new Vue({
        el: "#app",
        data: {
            message: '我是Vue3'
        },
        computed: {//计算属性的方法
             updateMessage(): {
                 console.log('计算属性', this.message)
                 return this.message
             }
        },
        methods: {
        
        }
    })

上面的计算属性的方法等价于：

computed: {   
      updateMessage: {
        get: function() {
          console.log('计算属性', this.message)
          return this.message
        }
      }
},