vuejs的computed(计算属性) 和 methods (方法)异同

1.html

<div id="demo">
    <h1>{{msg}}</h1>
    <div class="run1">{{methodsRun}}</div>
    <div class="run2">{{methodsRun()}}</div>
    <div class="run3">{{computedsRun}}</div>
</div>

2.js

let vm = new Vue({
    el: '#demo',
    data: {
        msg: 'my name is '
    },
    methods: {
        methodsRun() {
            return this.msg + '计算方法(methods)'
        }
    },
    computed: {
        computedsRun() {
            return this.msg + '计算属性(computed)'
        }
    }
})

3.异同

    (1)同：表现结果相同；

    (2)异：

        ①methods是函数方法,调用时必"methodsRun()" 必须有括号。而computed是计算属性,调用时 "computedsRun"必须无括号;
        ②methods调用几次就会执行几次不会缓存。而computed只会在msg发生变化时才会重新执行。