vue之监视属性

监视属性

  1。当被监视的属性变化时，回调函数自动调用，进行相关操作。
  2。监视的属性必须存在，才能进行监视
  3。监视的两种写法：
      1。new Vue时传入watch配置
      2。通过vm.$watch监视

demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1。天气案例</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
监视属性watch：
  1。当被监视的属性变化时，回调函数自动调用，进行相关操作。
  2。监视的属性必须存在，才能进行监视
  3。监视的两种写法：
      1。new Vue时传入watch配置
      2。通过vm.$watch监视
-->
<div id="root">
  <h2>今天天气很{{info}}</h2>
<!--  <button @click="isHot=!isHot">切换天气</button>-->
  <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
  new Vue({
      el:'#root',
      data:{
          isHot:true
      },
      // 创建时，已经确定下来要监视那个属性。
      // watch:{
      //     isHot:{
      //         //初始化时，让handler调用一下。
      //         immediate:true,
      //         //handler什么时候调用？当isHot发生改变时。
      //         handler(newValue,oldValue){
      //             console.log("isHot被修改了",newValue,oldValue);
      //
      //         }
      //     }
      // },
      methods:{
          // changeWeather(){
          //     this.isHot=!this.isHot;
          // }
      },
      //计算属性
      computed:{
          info(){
              return this.isHot?'炎热':'凉爽';
          }
      }
  })
  //后期发现需要监视这个属性。
  vm.$watch('isHot',{
      immediate:true,
      //handler什么时候调用？当isHot发生改变时。
      handler(newValue, oldValue) {
          console.log("isHot被修改了", newValue, oldValue);

      }
  })
</script>
</body>
</html>

深度监视

深度监视：
  1。vue中的watch默认不监测对象内部值的改变（一层）
  2。配置deep：true可以检测对象内部值改变（多层）

  备注：
  1。Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以
  2。使用watch时根据数据的具体结构，决定是否采用深度监视。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1。天气案例</title>
  <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><br/>
  <h3>a的值是：{{number.a}}</h3>
  <button @click="number.a++">点我a+1</button><br/>
  <h3>a的值是：{{number.b}}</h3>
  <button @click="number.b++">点我a+1</button>
</div>

<script type="text/javascript">
  new Vue({
      el:'#root',
      data:{
          isHot:true,
          number:{
              a:1,
              b:2
          }
      },
      // 创建时，已经确定下来要监视那个属性。
      watch:{
          isHot:{
              //初始化时，让handler调用一下。
              immediate:true,
              //handler什么时候调用？当isHot发生改变时。
              handler(newValue,oldValue){
                  console.log("isHot被修改了",newValue,oldValue);

              }
          },
          'number.a':{
              //初始化时，让handler调用一下。
              immediate:true,
              //handler什么时候调用？当isHot发生改变时。
              handler(newValue,oldValue){
                  console.log("number.a被修改了",newValue,oldValue);
              }
          },
          number:{
              //深度监视：监视多级结构中，多级结构中的某个属性的变化
              deep:true,
              //handler什么时候调用？当isHot发生改变时。
              handler(newValue,oldValue){
                  console.log("number被修改了",newValue,oldValue);
              }
          }
      },
      methods:{
          changeWeather(){
              this.isHot=!this.isHot;
          }
      },
      //计算属性
      computed:{
          info(){
              return this.isHot?'炎热':'凉爽';
          }
      }
  })
</script>
</body>
</html>

监视属性简写：

demo:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1。天气案例</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
  <br/>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        // 创建时，已经确定下来要监视那个属性。
        watch: {
            // //正常写法
            // isHot:{
            //     //初始化时，让handler调用一下。
            //     immediate:true,
            //     deep:true,//深度监视
            //     //handler什么时候调用？当isHot发生改变时。
            //     handler(newValue,oldValue){
            //         console.log("isHot被修改了",newValue,oldValue);
            //
            //     }
            // }
            //简写
            isHot(newValue, oldValue) {
                console.log("isHot被修改了", newValue, oldValue);
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        //计算属性
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }
        }
    })

    // //后期发现需要监视这个属性。完整写法
    // vm.$watch('isHot',{
    //     immediate:true,
    //     deep:true,
    //     //handler什么时候调用？当isHot发生改变时。
    //     handler(newValue, oldValue) {
    //         console.log("isHot被修改了", newValue, oldValue);
    //
    //     }
    // })

    //后期发现需要监视这个属性。完整写法
    vm.$watch('isHot', function (newValue, oldValue) {
        // immediate:true,
        // deep:true,
        //handler什么时候调用？当isHot发生改变时。
        console.log("isHot被修改了", newValue, oldValue);
    })
</script>
</body>
</html>
posted @ 2022-06-06 00:12  King-DA  阅读(86)  评论(0)    收藏  举报