Vue method与computed的区别

html

<DIV id="vue-app-one">
    <h1>
        {{this.title.split('').reverse().join('')}}
    </h1>
    <h2>
        {{methodsmessage()}}
    </h2>
<h3>
{{conputedmessage}}
</h3>
</DIV>

js

var one = new Vue({
    el:"#vue-app-one",
    data:{
        title:"123a456a789a01b"
    },
    methods:{
        methodsmessage:function(){
            return this.title.split('a').reverse().join('');
        }
    },
    computed:{
        conputedmessage:function(){
            return this.title.split('a').reverse().join('');
        }
    }
});

结果

b10a987a654a321
01b789456123
01bx789x456x123

vue的说明：
   - 1、在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加().
   - 2、两种方式在缓存上也大有不同，利用computed计算属性是将 conputedmessage与message绑定，只有当message发生变化时才会触发conputedmessage，而methods方式是每次进入页面都要执行该方法
   - 3、在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式
   
参数说明:
   - 1、splite('')可以将字符串按某个字符或者其他分割。返回数组。
   - 2、reverse()该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
   - 3、join('')方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ')；结果呈现:第一个结果split('')和join('')什么都不加，则按字分割加入数组。split('a')按照a分割插入数组并删除a,join('x')将数组之间插入x然后排列.