vue之computed和methods差别

例一

        const app = Vue.createApp({
            data(){
                return{
                    message:'hello world',
                    count:3,
                    price:6,
                }
            },
            computed:{
                total(){
                    return Date.now()
                }
            },
            methods:{
                methodstotal(){
                    return Date.now()
                }
            },
            template:`
              <div>{{ message }}  {{ methodstotal() }}</div>
            `
        }).mount('#root');

当在浏览器控制台输入 app.$data.message = ‘nihao’ 发现
如果用computed计算属性来获取时间戳，时间戳不会改变
用methods方法来获取时间戳，时间戳改变

例二

        const app = Vue.createApp({
            data(){
                return{
                    message:'hello world',
                    count:3,
                    price:6,
                }
            },
            computed:{
                total(){
                    return Date.now() + this.count
                }
            },
            methods:{
                methodstotal(){
                    return Date.now()
                }
            },
            template:`
              <div>{{ message }}  {{ total }}</div>
            `
        }).mount('#root');

当在浏览器控制台输入 app.$data.message = ‘nihao’ 发现
如果用computed计算属性来获取时间戳，时间戳不会改变
用methods方法来获取时间戳，时间戳改变

当在浏览器控制台输入 app.$data.count = ‘100’ 发现时间戳改变了

结论：computed计算属性依赖的内容发生改变时，才会重新执行计算
methods方法只要页面重新渲染，才会重新计算