09_监视属性-CSDN博客

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123167578

09_监视属性

天气案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>


<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句-->
        <!-- <button @click="isHot=!isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        new Vue({
            el: '#root',
            data: {
                isHot:true           
            },
            computed:{
                info(){
                    return this.isHot? '炎热': '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },

        });

    </script>


</html>

监视属性天气案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<!-- 
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
    (1).new Vue时传入watch配置
    (2).通过vm. $watch监视

 -->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
       <button @click="changeWeather">切换天气</button>
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        const vm=new Vue({
            el: '#root',
            data: {
                isHot:true           
            },
            computed:{
                info(){
                    return this.isHot? '炎热': '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            // watch:{
            //     isHot:{
            //         immediate:true,//初始化时让handler调用一下
            //         //handler什么时候调用?当isHot发生改变时。
            //         handler(newValue,oldValue){
            //             console.log(newValue,oldValue);
            //         }
            //     }
            // }
        });
        vm.$watch('info',{
                immediate:true,
                handler(newValue,oldValue){
                   console.log(newValue,oldValue);
                    }
            })

    </script>


</html>

深度监视

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>


<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
       <button @click="changeWeather">切换天气</button>
       <hr> 
       <h3>a的值是: {{numbers.a}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
       <hr> 
       <h3>b的值是: {{numbers.b}}</h3>
       <button @click="numbers.b++">点我让b+1</button>
    
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        const vm=new Vue({
            el: '#root',
            data: {
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }           
            },
            computed:{
                info(){
                    return this.isHot? '炎热': '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                isHot:{
                    immediate:true,//初始化时让handler调用一下
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue);
                    }
                },
                //   'numbers.a':{
                //     handler(){
                //         console.log('a改变了');
                //     }
                // },
                
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了');
                    }
                }
             }
        });
   
    </script>


</html>

监视简写

没有 immediate和deep 属性只有handler 就可以简写

 watch:{
                /*isHot:{
                    immediate:true,//初始化时让handler调用一下
                    //handler什么时候调用?当isHot发生改变时。
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue);
                    }
                }*/
                isHot(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }

姓名案例监视和计算属性区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<!-- 
computed和lwatch之间的区别:
    1.computed能完成的功能。watch都可以完成。
    2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
两个重要的小原则:
    1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
    2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。
 -->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名:<input type="text" v-model="lastName"> <br><br>
        全名：<span>{{fullName}}</span>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const vm=new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(val){
                setTimeout(() => {
                    console.log(this);
                    this.fullName=val+'-'+this.lastName
                }, 1000);
            },
            lastName(val){
                this.fullName=this.firstName+'-'+val
            }
        }

    });

</script>


</html>