Vue框架——计算属性

计算属性

计算属性：当其依赖属性的值发生变化时，这个属性的值就会自动更新，与之相关的DOM部分也会同步更新

为什么需要计算属性

当表达式的计算逻辑比较复杂时，使用计算属性可以使模板内容更加简洁

案例

<div id="app">
    <div>{
    { msg }}div>
    <div>{
    { msg.split('').reverse().join('') }}div>
    
    <div>{
    { reverseStr }}div>
div>

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

当我们需要反转msg字符串时，我们需要做msg.split('').reverse().join('')操作。而定义计算属性之后，只需写计算属性的名称即可（没有括号）

计算属性与方法的区别

• 计算属性是基于它们的依赖属性进行缓存的，只要依赖属性的值不变，计算结果依然被缓存着，当计算属性被使用时，将会提供缓存里的计算结果。对于一些复杂性的计算操作，使用计算属性会节省一定的性能
• 方法不存在缓存