Vue method与computed的区别（最清晰的讲解）

Vue method与computed的区别（最清晰的讲解）

2018年11月08日 11:02:59 Kilven_ck 阅读数 641

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wobaiwodedukuku/article/details/83857003

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然后排列.