Vue学习笔记16--监视属性watch + 深度监视 + 监视简写

监视属性watch

示例一：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- <h2>今天添加很--{{ishot?'炎热':'凉爽'}}</h2>
    <hr> -->
    实现方式一：
    <button @click="changeWeather">切换天气1</button>
    <h2>今天天气很--{{wetherInfo}}1</h2>
    <hr>
    实现方式二：
    <button @click="isHot=!isHot">切换天气2</button>
    <h2>今天天气很--{{wetherInfo}}2</h2>
  </div>
</body>

</html>
<script type="text/javascript">
  //console.log(vm)
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
    computed: {
      wetherInfo () {
        return this.isHot ? '炎热' : '凉爽'
      }
    },

    methods: {
      changeWeather () {
        this.isHot = !this.isHot
      },


    },
  })
</script>

示例二：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监视属性watch</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    实现方式一：
    <button @click="changeWeather">切换天气1</button>
    <h2>今天天气很--{{wetherInfo}}1</h2>
    <hr>
  </div>
</body>

</html>
<script type="text/javascript">
  //console.log(vm)
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
    computed: {
      wetherInfo () {
        return this.isHot ? '炎热' : '凉爽'
      }
    },

    methods: {
      changeWeather () {
        this.isHot = !this.isHot
      },


    },
    // watch 监视
    watch:
    {
      // 监视普通属性
      isHot: {
        immediate: true,//初始化时让handler调用一下
        handler (newValue, oldValue) {//当属性被更改时，调用
          console.log('isHot 被修改了' + this.isHot)
          console.log(newValue + ' isHot被修改了 ' + oldValue)
        }
      },
      // 监视计算属性
      wetherInfo: {
        immediate: true,//初始化时让handler调用一下
        handler (newValue, oldValue) {//当属性被更改时，调用
          console.log(' wetherInfo 被修改了 ' + this.isHot)
          console.log(newValue + ' wetherInfo 被修改了 ' + oldValue)
        }
      },
    }

  })

  // vm对象监视
  vm.$watch('wetherInfo', {
    immediate: true,//初始化时让handler调用一下
    handler (newValue, oldValue) {//当属性被更改时，调用
      console.log(newValue + ' wetherInfo 被修改了--vm对象监视  ' + oldValue)
    }
  })
</script>

总结：监视属性watch

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

深度监视

Vue的watch默认不监测对象内部值的改变(一层)
配置deep:true可以监视对象内部值的改变(多层)

备注：

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深度监视属性watch</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    实现方式一：
    <button @click="changeWeather">切换天气1</button>
    <h2>今天天气很--{{wetherInfo}}1</h2>
    <hr>
    <h2>x的值是：{{numbers.x}}</h2>
    <button @click="numbers.x++">点我x++</button>
    <hr>
    <h2>y的值是：{{numbers.y}}</h2>
    <button @click="numbers.y++">点我y++</button>

  </div>
</body>

</html>
<script type="text/javascript">
  //console.log(vm)
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
      numbers: {
        x: 1,
        y: 1,
      }
    },
    computed: {
      wetherInfo () {
        return this.isHot ? '炎热' : '凉爽'
      }
    },

    methods: {
      changeWeather () {
        this.isHot = !this.isHot
      },


    },
    // watch 监视
    watch:
    {
      // 监视多级结构中某个属性的变化
      'numbers.x': {
        handler () {//当属性被更改时，调用
          console.log(' numbers.x 被修改了')
        }
      },
      // 监视多级结构中所有属性的变化
      numbers: {
        deep: true,
        handler () {//当属性被更改时，调用
          console.log('numbers 被修改了')
        }
      },

      // 监视普通属性
      isHot: {
        immediate: true,//初始化时让handler调用一下
        handler (newValue, oldValue) {//当属性被更改时，调用
          console.log('isHot 被修改了' + this.isHot)
          console.log(newValue + ' isHot被修改了 ' + oldValue)
        }
      },
      // 监视计算属性
      wetherInfo: {
        immediate: true,//初始化时让handler调用一下
        handler (newValue, oldValue) {//当属性被更改时，调用
          console.log(' wetherInfo 被修改了 ' + this.isHot)
          console.log(newValue + ' wetherInfo 被修改了 ' + oldValue)
        }
      },
    }

  })


</script>

监视简写：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监视属性简写</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>今天天气很--{{wetherInfo}}</h2>
    <button @click="changeWeather">切换天气</button>

  </div>
</body>

</html>
<script type="text/javascript">
  //console.log(vm)
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,

    },
    computed: {
      wetherInfo () {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather () {
        this.isHot = !this.isHot
      },
    },
    // watch 监视
    watch:
    {
      // 监视普通属性  
      /* 正常写法
      isHot: {
        // immediate: true,//初始化时让handler调用一下
        // deep: true,//深度监视
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        handler (newValue, oldValue) {//当属性被更改时，调用
          console.log('isHot 被修改了' + this.isHot)
          console.log(newValue + ' isHot被修改了 ' + oldValue)
        }
      }, */

      // 简写
      isHot (newValue, oldValue) {
        //简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
        // console.log('isHot 被修改了' + this.isHot)
        console.log(newValue + ' isHot被修改了 ' + oldValue)

      },
    }

  })

  // 完整写法  vm对象监视 
  /*   vm.$watch('isHot', {
      immediate: true,//初始化时让handler调用一下
      deep: true,//深度监视
      handler (newValue, oldValue) {//当属性被更改时，调用
        console.log(newValue + ' isHot 被修改了--vm对象监视  ' + oldValue)
      }
    }) */

  // 简写
  // vm.$watch('isHot', function (newValue, oldValue) {
  //   console.log(newValue + ' isHot 被修改了--vm对象监视  ' + oldValue)
  // })

</script>

posted on 2024-02-26 17:26 sunwugang 阅读(72) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告