（5）Vue-监视属性watch_const a = new vue({ data: { value: [1,2,3] }, watc-优快云博客

本文链接：https://blog.youkuaiyun.com/lihuihui01/article/details/122906434

1.监视属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>


<div id="demo">
  <h1>今天天气{{show}}</h1>
  <button @click="changeWeather">点我</button>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el:'#demo',
    data:{
      name:true
    },
    computed:{
      show(){
        return this.name ? '热' : '冷'
      }
    },
    methods:{
      changeWeather(){
        this.name = !this.name
      }
    },
      // watch:{
      //   name:{
      //       handler(newValue,oldValue){
      //           console.log(newValue,oldValue)
      //       }
      //   }
      // }
  })
  vm.$watch('name',{
      handler(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
  })

  //简写
  // vm.$watch('name',function (newValue,oldValue){
  //     console.log(newValue,oldValue)
  //
  // }
  // )
</script>

</body>
</html>

2.监视属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="demo">
  <h1>{{name}}</h1>
    <button @click="changeWeather">点我</button>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el:'#demo',
    data:{
      name:true,
      num:{
          a:1,
          b:2
      }
    },methods:{
          changeWeather(){
              this.name = !this.name
          }
      },
      watch:{
          name(newValue,oldValue){
              console.log(newValue,oldValue)
          }
        }

  })

</script>

</body>
</html>

3.深度监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="demo">
  <h1>{{num.a}}</h1>
    <button @click="num.a++">点我</button>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el:'#demo',
    data:{
      name:true,
      num:{
          a:1,
          b:2
      }
    },
      watch:{
        'num':{
            //watch可以检测num里的变化
            deep:true,
            handler(){
                console.log('num变化了')
            }
        }
      }
  })

</script>

</body>
</html>