Vue之computed与watch的使用-蒲公英云

Vue之computed与watch的使用

电玩女神 2021-11-29 17:06 419阅读 0赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="ex-computed">
        <p>Original message: "{
     { message}}"</p>
        <p>Computed reversed message: "{
     { reversedMessage }}"</p>
    </div>
    <div id="ex-watch">
        我是练习watch的div
        <input type="number" v-model="num" />
        <p v-if='isOK'>两次差值已大于3，所以你看见我了～</p>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        /* 计算属性computed的用途：
        模板内的表达式是便利的，但是为了方便维护，复杂的逻辑就不应该
        直接放在表达式里，而应当使用计算属性。
        */
        /* computed vs 方法：
        下面的例子也可以定义方法，然后在表达式中调用方法来达到同样的效果。
        不同的是：computed是基于它们的响应式依赖进行缓存的，在下面的例子中，
        只要message没有发生改变那么多次访问reversedMessage会立即返回之前
        计算的结果，使用缓存可以提高系统的性能，减少重复开销。
        */
        var vm = new Vue({
            el: '#ex-computed',
            data: {
                message: 'Hello'
            },
            computed: {
                // 默认情况下只提供了计算属性的getter
                reversedMessage: function() {
                    // this执行该vm实例
                    return this.message.split('').reverse()
                        .join('')
                }
            }
        });
        /* computed VS watch:
        Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性（watch）
        ，watch侦听属性应该用于要从旧状态到新状态这变化过程中获取到信息或进行操作的行为，
        而不应该滥用，因为在大多数情况下，使用computed或许更加合适。下面这个例子是合理使用watch的一个例子：
        */
        var vm2 = new Vue({
            el: "#ex-watch",
            data: {
                num: 1,
                isOK: false
            },
            watch: {
                num: function(newNum, oldNum) {
                    console.log(newNum);
                    if (newNum - oldNum > 3) {
                        this.isOK = true;
                    } else {
                        this.isOK = false;
                    }
                }
            }
        })
    </script>
</body>
</html>