随笔- 542 文章- 6 评论- 27 阅读- 29万

vuejs3.0 从入门到精通——计算属性的getter和setter

计算属性的getter和setter

https://cn.vuejs.org/guide/essentials/computed.html#basic-example （我这里没有使用vue官网提供的例子）

计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

vue:

<script lang="ts">
export default{
    data(){
        return {
            message: "12345689",
            num: 0
        };
    },
 
    computed: { 
      //(简写)
      // reverseMSG: function(){
      //   console.log("计算属性，只要依赖不变，那么就不会重新计算，看是不是只执行了一次")
      //   //这里的 this 指向的是 vm 实例
      //   return this.message.split('').reverse().join('')
      // }
 
      //(完整写法)
      //每一个计算属性都一个 getter 和 setter
      reverseMSG:{
        //在设置或更改计算属性的时候会被调用
        //一般来说没有 set 方法，计算属性是只读属性。
        set: function(newValue){
          console.log(newValue)
          this.message=newValue
        },
        get: function(){
          //调用 reverseMSG 计算属性的时候，就会被调用。
          return this.message.split('').reverse().join('')
        },
      },
    },
    methods: {
      reverseMessage: function(){
        console.log("方法会重复执行，计算几次，执行几次")
        return this.message.split('').reverse().join('')
    },
  },
};
</script>
 
<template>
    <div class="about">
      <p>{{message}}</p>
      <p>第一种: js 表达式，总共会计算三次</p>
      <p>{{message.split('').reverse().join('')}}</p>
      <p>{{message.split('').reverse().join('')}}</p>
      <p>{{message.split('').reverse().join('')}}</p>
      <br>
      <p>第二种: 使用计算属性</p>
      <p>{{reverseMSG}}</p>
      <p>{{reverseMSG}}</p>
      <p>{{reverseMSG}}</p>
      <br>
      <p>第三种: 使用 methods 中的方法</p>
      <p>{{reverseMessage()}}</p>
      <p>{{reverseMessage()}}</p>
      <p>{{reverseMessage()}}</p>
      <br>
      <button @click="reverseMSG='hello zuo yang'">改变 reverseMSG </button>
    </div>
  </template>
   
  <style>
  </style>