Vue computed 与 methods 的区别

Vue computed 与 methods 的区别

Vue实列中的数据选项
computed 计算属性只有在依赖的数据发生变化的时候才会被重新的计算。
methods 只要有数据变化，页面有重新渲染，methods 里的所有函数都会被调用。

代码说明如下：

   <div id='root'>
        <button @click='a++'>a++</button>
        <button @click='b++'>b++</button>
        <!-- 方法的正确使用方式 -->
        <button @click='test'>方法的正确使用方式</button>
<!-- 计算属性 com1的依赖于数据 a ，com2 依赖与数据 b  -->
        <p >{{com1}}</p>
        <p >{{com2}}</p>
        <p >{{meth1()}}</p>
        <p >{{meth2()}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#root',
            data:{
                 a:1,
                 b:2,
            },
            computed:{
                com1(){ 
                    console.log(' 计算属性 1 被执行 ');
                   return this.a
                },
                com2(){ 
                    console.log('计算属性 2 被执行');
                   return this.b
                },

            },
            methods:{
                meth1(){ 
                    console.log(' 方法 1 被执行 ');
                   return this.a
                },
                meth2(){ 
                    console.log('方法 2 被执行');
                   return this.b
                },
                test(){
                    console.log('方法的正确打开方式');
                }

            }
        })

一开始 页面渲染

当 a++ 标签发生点击事件后， 计算属性只有相关依赖发生改变的才被执行，而方法里所有函数都被调用一次