03 Vue变量监听：watch、computed

小半 • 2022年5月19日上午12:29 • 后端开发 • 阅读 224

1、watch监听单个变量

watch用于监听单个变量或者对象，用法为：

watch:{

var_1:function(new_value, old_value) { // todo }

}

demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 监听单个变量和多个变量</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div>{{num1}}</div>
        <button @click="count_num()">改变num1的值，查看控制台观察watch是否监听到了变量的变化</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num1:100
            },
            methods:{
                count_num:function(){
                    this.num1 += 100;
                }
            },
            watch:{
                num1: function (new_value, old_value) {
                    console.log('new_value='+new_value);
                    console.log('old_value='+old_value);
                }
            }
        })
    </script>
</body>
</html>

保存上述代码到watch-test.html文件，然后在浏览器中打开，点击页面按钮改变num1的值，查看控制台的输出信息即可看到watch监听到了num1的变化：

2、computed监听多个变量

computed用于监听多个变量或者对象，只要是包裹在computed函数体内的任意一个变量或者对象发生改变，都会监听到；

用法为：

            computed:{
                res: function () {
                    return "监听结果：num1="+this.num1+", num2="+this.num2;
                }
            }

demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 监听单个变量和多个变量</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div>{{num1}}</div>
        <div>{{num2}}</div>
        <div>computed-result-{{res}}</div>
        <button @click="count_num1()">改变num1的值，看computed监听结果</button><br/>
        <button @click="count_num2()">改变num2的值，看computed监听结果</button><br/>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num1:100,
                num2:1000,
            },
            methods:{
                count_num1:function(){
                    this.num1 += 100;
                },
                count_num2:function(){
                    this.num2 += 1000;
                }
            },
            computed:{
                res: function () {
                    return "监听结果：num1="+this.num1+", num2="+this.num2;
                }
            }
        })
    </script>
</body>
</html>

将上述代码保存为computed-test.html然后在浏览器打开，点击按钮即可测试computed监听多个变量/对象：