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>
npm run dev:
再看看 console: