Vue-methods方法-computed计算属性-watch侦听器的区别

1. 需求分析

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

2. 用methods（方法）来实现

模板

<div id="app">
    <p>商品数量：<input type="text" class="num" v-model="num1"></p>
    <p><button @click="changeNum">改变数量</button></p>
    <p>显示总价：{{getTotal()}}</p>
    <hr>
    <p>使用总价：{{getTotal()}}</p>
</div>

js代码

<script>
    var vm = new Vue({
        el: '#app',
        // 如果需要数据改变时，触发视图更新，就要把数据注册在data中
        // 响应式数据
        data: {
            price: 200,
            num1: '',
            num2: 3
        },
        methods: {
            // 有返回值的methods中模板中直接调用时，要加()
            getTotal(){
                console.log('计算一次');
                let total;
                total = this.price * this.num2
                return total
            },
            changeNum(){
                this.num2 = this.num1;
            }
        }
    });
</script>

3. 用computed(计算属性)来实现

3.1 认识计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

所以，对于任何复杂逻辑，你都应当使用计算属性。

3.2 实现代码

模板

<div id="app">
    <p>商品数量：<input type="text" class="num" v-model="num1"></p>
    <p><button @click="changeNum">改变数量</button></p>
    <p :title="getTotal">显示总价：{{getTotal + 1}}</p>
    <hr>
    <p>使用总价：{{getTotal}}</p>
</div>

js代码

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price: 200,
            num1: '',
            num2: 3
        },
        // 计算属性是一个有返回值的函数，通过对数据进行处理，返回一个结果 
        // 在模板中，可以把getTotal视为一个data中的数据
        computed:{
            getTotal(){
                console.log('计算一次');
                let total;
                total = this.price * this.num2
                return total
            }
        },
        methods: {
            changeNum(){
                this.num2 = this.num1;
            }
        }
    });
</script>

3.3 计算属性computed和方法methods的区别

1. 如果一个业务流程没有返回值，则用methods实现，有返回值，用computed和methods都可以实现
2. 计算属性和方法都是函数，计算属性一定有返回值，它通过对数据进行处理，返回一个结果
3. 在模板中调用时，计算属性不加(),而methods必须需要加()
4. 计算属性和方法最主要的区别是计算属性有缓存功能。
   方法被调用时每次都要重复执行函数
   计算属性初次调用时执行函数，然后会缓存结果。当再次被调用时，如果依赖的响应式数据没有发生改变，则直接返回之前缓存的结果 。如果依赖发生了改变，则会再次执行函数并缓存结果
5. 计算属性中不能有异步操作

3.4 计算属性的getter和setter

每一个计算属性都包含一个getter和setter

上面的例子都是计算属性的默认用法，只是利用了getter来读取。每调用一次计算属性，就相当于调用一次getter属性；当计算属性的值发生变化时，会默认调用setter属性，进行相应的操作例如:

<div id="app">
    {{fullName}}
</div>

var vm = new Vue({
    el: "#app",
    data: {
        firstName: "尼古拉斯",
        lastName: "赵四",
    },
    computed: {
        fullName: {
            get: function () {
                return this.firstName + "·" + this.lastName
            },
            set:function (value) {
                var arr = value.split(" ");
                this.firstName = arr[0];
                this.lastName = arr[1];
            }
        }
    }
})

当我们在控制台执行 app.firstName='弗拉基米尔’时，setter就会被调用。

绝大多数情况下，我们只会用默认的 getter 方法来读取一个计算属性，在业务中很少用到setter,

所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter，setter都声明。

4. 用watch(侦听器)来实现

4.1 代码实现

模板

<div id="app">
    <p>商品数量：<input type="text" class="num" v-model="num1"></p>
    <p><button @click="changeNum">改变数量</button></p>
    <p>显示总价：{{getTotal}}</p>
    <hr>
    <p>使用总价：{{getTotal}}</p>
</div>

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
            }
        }
    });

4.2 侦听器的配置

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

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

侦听的数据为对象时，如果对象地址发生变化，会触发侦听，但如果是对象属性值发生变化，不会触发

如果需要侦听对象属性值的变化，需要添加deep:true

watch: {
    person: {
        handler: function(){
            console.log('watch');
        },
        //深度侦听
        deep: true
    }
}

4.3 watch和computed的区别

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

computed不能有异步操作，而watch中可以有异步操作

4.4 watch和methods的区别

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