07~vue中计算属性computed的getter和setter

计算属性的getter和setter

getter

每一个计算属性中都有一个getter和setter

当调用计算属性的时候, 就会默认自动调用getter这个方法

setter

当在设置或者更改计算属性的时候调用setter方法
这个方法有个默认参数newValue,这个newValue名称可以自己定义,
计算属性一般是没有setter方法,计算属性是只读属性,一般不会更改这个计算属性

demo

<script>
export default {
  data () {
    return {
      message: 'helloworld'
    }
  },
  methods: {
  },
  /**
   * 计算属性
   * 计算属性默认只有getter, 不过在需要时我们也可以提供一个setter
   */
  computed: {
    /**
     * 计算属性的简写
     */
    reverseMsg: function () {
      console.log('计算属性调用,简写')
      return this.message.split('').reverse().join('')
    },
    /**
     * 计算属性的完整写法
     * 每一个计算属性中都有一个getter和setter
     * 
     * 当调用reverseMessage 这个计算属性的时候, 就会自动调用getter这个方法
     * 
     * 当在设置或者更改计算属性的时候调用setter方法, 
     * 这个方法有个默认参数newValue,这个newValue名称可以自己定义,
     * 计算属性一般是没有setter方法,计算属性是只读属性,一般不会更改这个计算属性
     */
    reverseMessage:{
      get:function(){
        console.log('计算属性调用,自动调用getter方法')
        return this.message.split('').reverse().join('')
      },
      set:function(newValue)
      {
        // newValue, 计算属性更改后的新值
        console.log('当在设置或者更改计算属性的时候调用,newValue的值为',newValue)
        // 把新值赋给 message
        this.message = newValue
      }
    }
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <p>{{ message }}</p>
    <p>计算属性的简写:  {{ reverseMsg }}</p>
    <p>计算属性的完整写法:  {{ reverseMessage }}</p>
    <p><button @click="reverseMessage='你好呀, 小虾米'">改变计算属性的值</button></p>
  </div>
</template>

<style></style>