2020/09/18 vue学习笔记——计算属性

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

<div id="app">
	{{ReverseMsg}}
<div>

var vm = new Vue({
	el:"#app",
	data:{
		msg:'Hello'
		},
		computed:{
			ReverseMsg:function(){
				return this.msg.split('').reverse().join('');
			}
			//ReverseMsg中的内容是通过function函数计算所得出
		}
	});

其中ReverseMsg函数中的结果是根据msg的内容来进行计算所得

<div id="app">
	{{ReverseMsg}}
	<input v-model="msg"/>
</div>

var vm = new Vue({
	el:"#app",
	data:{
		msg:'Hello'
		},
		computed:{
			ReverseMsg:function(){
				return this.msg.split('').reverse().join('');
			}
		}
	});

getter与setter函数

var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        computed:{
            ReverseMsg:{
            
                get:function(){//getter函数
                console.log("abc")
            
                },
                
            }
           
        }
    });

    console.log(vm.ReverseMsg);

打印结果：

以下概念摘自vue官网：
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
setter函数用于赋值

    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        computed:{
            ReverseMsg:{
                get:function(){//getter函数
                    return this.msg.split('').reverse().join('');
                },
                set:function(newValue){//setter 函数
                   this.msg=newValue.split('').reverse().join('');
                   //这里是将新设置的值赋值给msg
                }
            }
           
        }
    });
    
    console.log(vm.ReverseMsg);

在页面中执行vm.ReverseMsg="123456789"，默认执行set函数。