vue中methods、watch、computed使用小结

methods和computed(计算属性)之间的差异：
* 计算属性—当计算属性依赖的内容发生变更时，才会重新执行计算
* methods方法—只要页面重新渲染，就会重新计算
computed和watch(侦听器)的差异：
*涉及到异步操作时需要使用侦听器
* computed适合同步操作
建议：
* computed和methods都能实现的功能，建议使用computed,因为有缓存
* computed和watch都能实现的功能，建议使用computed,因为更加简洁

const app = Vue.createApp({
        template:`
            <div>{{message}}</div>
            <div>计算属性---{{total1}}</div>
            <div>methods---{{getTotal()}}</div>
            <div>侦听器watch---{{total3}}</div>
            <div>计算属性--无法进行异步操作---{{total4}}</div>
        `,
        data(){
            return{
               message:'数据修改',
                // total1:0,
                price: 5,
                count:10,
                total2:0,
                total3:0
            }
        },
        watch:{
            /* 侦听器
               可以监听变量的改变，做一些异步操作
             */
            price(next,prev){
                setInterval(()=>{
                    this.total3= this.count*this.price
                },2000)
            }
        },
        computed: {
            total1(){
                // return this.price * this.count
                return Date.now() +'计算属性---'+ (this.price * this.count)
            },
            total4(){
                let t = 0
                setInterval(()=>{
                   t = this.price*this.count
                },3000)
                //异步操作无法成功，结果仍为0
                return t
            }
        },
        methods:{
            getTotal(){
                // return this.count*this.price
                return Date.now()+'方法---'+(this.price * this.count)
            }
        }
    })
    const vm = app.mount('#root')