方法-计算属性-侦听器的区别

需求分析
2初始化时计算并显示总价
3单击按钮，获取新的数据，并重新计算总价
3分别用methods(方法),computed(计算属性),watch(侦听器)来实现以上需求

用methods（方法）来实现
模板

    
商品数量：
    
改变数量
    
显示总价：{{getTotal()}}
    

    
使用总价：{{getTotal()}}

js代码

总结： 计算属性computed和方法methods的区别
1.如果一个业务流程没有返回值，则用methods实现，有返回值，用computed和methods都可以实现

2.计算属性和方法都是函数，计算属性一定有返回值，它通过对数据进行处理，返回一个结果

3.在模板中调用时，计算属性不加(),而methods必须需要加()

4.计算属性和方法最主要的区别是计算属性有缓存功能。
方法被调用时每次都要重复执行函数
计算属性初次调用时执行函数，然后会缓存结果。当再次被调用时，如果依赖的响应式数据没有发生改变，则直接返回之前缓存的结果 。如果依赖发生了改变，则会再次执行函数并缓存结果

用watch(侦听器)来实现
模板

    
商品数量：
    
改变数量
    
显示总价：{{getTotal}}
    

    
使用总价：{{getTotal}}

js代码

script>
    var vm = new Vue({
        el: '#app',
        data: {
            price: 200,
            num1: '',
            num2: 3,
            getTotal: 0
        },
        methods: {
            changeNum() {
                this.num2 = this.num1;
            }
        },
        // 侦听器默认在页面初始化时不执行，只有侦听数据发生变化才会执行
        watch: {
            // 侦听响应式数据num2的更新，只要num2数据更新，就触发该侦听器(函数)
            num2(){
                console.log('侦听num2一次');
                this.getTotal = this.price * this.num2
            },
            price(){
                console.log('侦听price一次');
                this.getTotal = this.price * this.num2
            }
        }
    });

侦听器的配置
侦听器默认在页面初始化时不执行，只有侦听数据发生变化才会执行,如果需要初始化时立即执行，要配置immediate选项

watch: {
    // 侦听响应式数据num2的更新，只要num2数据更新，就触发该侦听器(函数)
    num2: {
        handler() {
            console.log('侦听num2一次');
            this.getTotal = this.price * this.num2
        },
        //初始化时即自动执行一次
        immediate: true
    }
}

watch和computed的区别
computed一定有返回值，而watch不需要返回值
computed是依赖的数据发生改变时重新调用, watch是监听的响应式数据发生改变时重新调用

watch和methods的区别
methods是每次调用都会执行函数
watch不需要调用,并且只有监听数据发生改变时才会重新调用