Vue技术9.3

<!DOCTYPE html>>
<html>
    <head>
        <title>天气案例_深度监视</title>
        <meta charset="UTF-8" />
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
           深度监视：
            （1）Vue中的watch默认不检测对象内部值的变化（一层）
            （2）配置deep:true可以监测对象内部值变化（多层）
            备注：
            （1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
            （2）使用watch时根据数据的具体结构，决定是否采用深度监视
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>今天天气很{
   
   {info}}</h2>
            <button @click="changeWeather">切换天气</button>
            <hr/>
            <h3>a的值是：{
   
   {numbers.a}}</h3>
            <button @click="numbers.a++">点我让a+1</button>
            <h3>b的值是：{
   
   {numbers.b}}</h3>
            <button @click="numbers.b++">点我让b+1</button>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        
       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:{
      
      
                    //handler什么时候调用？当isHot发生改变时调用。
                    handler(newvalue,oldvalue){
      
      
                        console.log('isHot被修改了',newvalue,oldvalue)
                    }
                },
               /* //监视多级结构中某个属性的变化
                'numbers.a':{
                    handler(){
                        console.log('a被改变了')
                    }
                },*/
                //监视所有属性的变化
                numbers:{
      
      
                    deep:true,
                    handler(){
      
      
                        console.log('numbers被改变了')
                    }
                }
            }
        })
     
   
    </script>
</html>
猜你喜欢
