VUE框架计算属性和监视属性的差异对比和使用上的选择------VUE框架-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>数字大小比较</h1>
        <h1><input type="number" place-holder="数字1" v-model:value="number1"/></h1>
        <h1><input type="number" place-holder="数字2" v-model:value="number2"/></h1>
        <h1>比较大小:{{comp}}</h1>
        <h1>计算属性的比较大小:{{cu}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                number1 : 0,
                number2 : 0,
                comp : ""
            },
            computed : {
                cu : {
                    get()
                    {
                        let number = this.number1 - this.number2;
                        if(number > 0)
                        {
                            return "" + this.number1 + ">" + this.number2;
                        }
                        else if(number < 0)
                        {
                            return "" + this.number1 + "<" + this.number2;
                        }
                        else if(number == 0)
                        {
                            return "" + this.number1 + "=" + this.number2;
                        }
                        // 这里是JS引擎去调用了我们的箭头函数,所有的this都变成了window对象
                        // 同时我们的返回值也变成了JS引擎,及window对象,而需要这个返回值的是我们的VM对象即VUE实例
                        // setTimeout(() =>{
                        //     if(number > 0)
                        //     {
                        //         return "" + this.number1 + ">" + this.number2;
                        //     }
                        //     else if(number < 0)
                        //     {
                        //         return "" + this.number1 + "<" + this.number2;
                        //     }
                        //     else if(number == 0)
                        //     {
                        //         return "" + this.number1 + "=" + this.number2;
                        //     }
                        // },3000);
                        // 如果watch和computed都能完成某个功能,优先使用computed
                        // 有一种情况必须使用watch,需要异步的时候必须使用watch
                        // 计算属性的方式实现比较数字大小
                    }
                }
            },
            watch : {
                number1 : {
                    immediate : true,
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        let number = newValue - this.number2;
                        // 如果我们采用了异步的方法,computed就完成不了,就必须使用我们的watch来实现
                        // 虽然这个是箭头函数,但是这个this仍旧是vue实例对象
                        // 调用这个箭头函数的也是js引擎
                        // 因为箭头函数没有this,只能向上一级找
                        // 上一级是vue,刚好找到vue对象
                        setTimeout(() => {
                            if(number > 0)
                            {
                                this.comp = "" + newValue + ">" + this.number2;
                            }
                            else if(number < 0)
                            {
                                this.comp = "" + newValue + "<" + this.number2;
                            }
                            else if(number == 0)
                            {
                                this.comp = "" + newValue + "=" + this.number2;
                            }
                        },3000);
                    }
                },
                // 什么时候用箭头函数,什么时候用普通函数
                // VUE管理的就用普通函数
                // 非vue管理的统一用箭头函数
                number2 : {
                    immediate : true,
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        let number = newValue - this.number1;
                        // 不用箭头函数,改为普通函数的function,这个this对象反而变成了window
                        // 虽然这个函数是普通函数,但是调用这个函数的对象仍旧是window帮我们完成的
                        setTimeout(function(){
                            if(number > 0)
                            {
                                this.comp = "" + this.number1 + "<" + newValue;
                            }
                            else if(number < 0)
                            {
                                this.comp = "" + this.number1 + ">" + newValue;
                            }
                            else if(number == 0)
                            {
                                this.comp = "" + this.number1 + "=" + newValue;
                            }
                        },3000);
                    }
                }
            }
        });
    </script>
</body>
</html>