VUE计算属性

计算属性

computed

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

也就是说，某些时候页面中的模板变量如果需要复杂的运算处理，应该使用计算属性，而不是直接在模板位置进行计算。

var vm = new Vue({
    el: "#container",
    data: {
        String1:"这是一个字符串",
    },
    methods: {
        MreverseString(){
            return this.String1.split("").reverse().join("")
        } // 定义一个函数进行字符串逆置
    },
    computed: {
        CreverseString(){
            return this.String1.split("").reverse().join("")
        } // 定义一个计算属性进行字符串逆置
    }
})

<div id="container">
    <p>这是一个字符串:{{ String1 }} </p>
    <p>他的逆置:{{ String1.split("").reverse().join("") }} </p>
    <p>他的逆置:{{ CreverseString }} </p>
    <!-- 计算属性直接写入函数名 -->
    <p>他的逆置:{{ MreverseString() }} </p>
    <!-- 普通methods函数调用需加括号 -->
</div>

虽然计算属性和函数都可以达成同样的目的，但是computed会缓存结果，计算属性如果发现依赖的属性message未发生改变，再次访问计算属性不会重复运算函数，而是直接利用已有结果；如果依赖数据发生改动，计算属性函数才会重新运算。

在函数及计算属性中添加日志输出即可看到这个效果：

methods: {
    MreverseString() {
        console.log("MreverseString被运算了")
        return this.String1.split("").reverse().join("")
    }
},
computed: {
	CreverseString() {
		console.log("CreverseString被运算了")
		return this.String1.split("").reverse().join("")
	}
}

在终端下进行计算属性以及函数的访问即可看到效果。

计算属性SetAttr

默认的计算属性只有获取getattr的方式，我们可以手动为他添加一个setter

computed:{
    CreverseString: {
        get: function(){
            return this.String1.split("").reverse().join("")
        }
        set: function(val){
            this.String1 = val.split("").reverse().join("")
            // 如果当前的逆置之后字符串为val，那么原本的字符串需要再颠倒一次
        }
    }
}