计算属性
<script>export default{ data(){ return{ test57: '57-6666', test56: 56 } }, computed:{ //计算属性 ，只有依赖值不变就不会从新计算。 reverseMsg:function (){ console.log("计算属性") return this.test57.split('').reverse().join('') } }, methods:{ reverseMessage:function (){ console.log("methods") return this.test57.split('').reverse().join('') } },};</script><template> <div> <p>{{test57}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>----下方为计算属性---</p><!-- 连（）都不须要加--> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>----下方为methods----</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> </div></template><style> #d1{ color: red; } #d2{ color: blue; } .d1{ font-size: 50px; }</style>
computed只执行1次（只有依赖值不变，就不会从新计算而冲缓存中获取）
methods执行3次
计算属性批改原始值
<script>export default{ data(){ return{ test57: '57-6666', test56: 56 } }, computed:{ //计算属性 ，只有依赖值不变就不会从新计算。 reverseMsg:function (){ console.log("计算属性") return this.test57.split('').reverse().join('') } }, methods:{ reverseMessage:function (){ console.log("methods") return this.test57.split('').reverse().join('') } },};</script><template> <div> <p>{{test57}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>----下方为计算属性---</p><!-- 连（）都不须要加--> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>----下方为methods----</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <button @click="test57='hellokugou'">扭转test57</button> </div></template><style> #d1{ color: red; } #d2{ color: blue; } .d1{ font-size: 50px; }</style>
computed 会比 methods 进步了性能
计算属性 Setter
<script>export default{ data(){ return{ test57: '57-6666', test56: 56 } }, computed:{ //计算属性 ，只有依赖值不变就不会从新计算。 // reverseMsg:function (){ // console.log("计算属性") // return this.test57.split('').reverse().join('') // } reverseMsg:{ //每一个计算属性中都一个getter，setter,下面为简写，上面为完整版,计算属性为只读属性。 set:function (newValue){ //设置或更改计算属性时使,个别没有set办法 console.log(newValue) }, get:function (){ return this.test57.split('').reverse().join('') } } }, methods:{ reverseMessage:function (){ console.log("methods") return this.test57.split('').reverse().join('') } },};</script><template> <div> <p>{{test57}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>----下方为计算属性---</p><!-- 连（）都不须要加--> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>----下方为methods----</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <button @click="test57='hellokugou'">扭转test57</button> <button @click="reverseMsg='hellokugou'">扭转reverseMessage</button> </div></template><style> #d1{ color: red; } #d2{ color: blue; } .d1{ font-size: 50px; }</style>
给setter 赋值
<script>export default{ data(){ return{ test57: '57-6666', test56: 56 } }, computed:{ //计算属性 ，只有依赖值不变就不会从新计算。 // reverseMsg:function (){ // console.log("计算属性") // return this.test57.split('').reverse().join('') // } reverseMsg:{ //每一个计算属性中都一个getter，setter,下面为简写，上面为完整版,计算属性为只读属性。 set:function (newValue){ //设置或更改计算属性时使,个别没有set办法 console.log(newValue); this.test57=newValue }, get:function (){ return this.test57.split('').reverse().join('') } } }, methods:{ reverseMessage:function (){ console.log("methods") return this.test57.split('').reverse().join('') } },};</script><template> <div> <p>{{test57}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>{{test57.split('').reverse().join('')}}</p> <p>----下方为计算属性---</p><!-- 连（）都不须要加--> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>{{reverseMsg}}</p> <p>----下方为methods----</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <p>{{reverseMessage()}}</p> <button @click="test57='hellokugou'">扭转test57</button> <button @click="reverseMsg='你好酷狗'">扭转reverseMessage</button> </div></template><style> #d1{ color: red; } #d2{ color: blue; } .d1{ font-size: 50px; }</style>