• vue中watch监听事件与计算属性的区别

    监视事件

    • 在里面编写检测对象,

      1.当监视的属性变化时,回调函数自动调用,进行相关的操作

      2.监视的属性必须存在,才能进行监视

      3.监视的两种写法：1.new Vue时传入watch配置2.通过vm.$watch('监视对象'{实现配置})

    • 监听事件的案例

      1. <body>
      2.     <div class="hello">
      3.     <title>天气案例title>
      4.     <h2>{{ info }}h2>
      5.     <button @click="change">点击切换button>
      6.   div>
      7. body>
      8. <script>
      9.     const vm = new Vue ({
      10.         el: '#root',
      11.         data: {
      12.             isHot: true
      13.         },
      14.         //计算属性
      15.     computed: {
      16.     info () {
      17.       return this.isHot ? '炎热' : '凉爽'
      18.      }
      19.   },
      20.   methods: {
      21.     change () {
      22.       this.isHot = !this.isHot
      23.     }
      24.   },
      25.   watch: {
      26.     isHot: {
      27.       // immediate初始化让handler调用一下
      28.          immediate: true,
      29.       // handler当isHot发生改变时，handler发生调用。newVallue为没有调用handler的isHot值, oldVallue为调用handler后的isHot值
      30.       handler (newVallue, oldVallue) {
      31.         console.log('isHot被修改', newVallue, oldVallue)
      32.       }
      33.     }
      34.   }
      35.         
      36.     })
      37. ​
      38. script>

    • 深度监听

    • 1.vue中watch默认不检测对象内部值的改变(一层)

    • 2.配置deep.true可以检测对象内部值的改变(多层)

    • 3.vue自身可以监视对象内部值的改变，但vue提供的watch默认的不可以

      1. <body>
      2.     <h3>{{number.a}}h3>
      3.     <button @click="number.a++">点我让a+1button>
      4.     <h3>{{number.b}}h3>
      5.     <button @click="number.b++">点我让b+1button>
      6. body>
      7. <script>
      8.     const vm = new Vue({
      9.         el:'#root',
      10.         data: {
      11.             number: {
      12.                 a:1,
      13.                 b:1
      14.             }
      15.         },
      16.         watch: {
      17.                 //监听多级结构中某种属性的变化,加单引号才能监听a值，
      18.                 /*'number.a': {
      19.                     handler(){
      20.                         console.log('a被改变了')
      21.                     }
      22.                 }
      23.                 */
      24.                 //由于vue提供的watch无法监听多级结构的所有属性，也就是无法监听number中a和b，故加上深层监听deep
      25.                 number: {
      26.                     deep: true,
      27.                     handler(){
      28.                         console.log('number改变了')
      29.                     }
      30.                 }
      31.             }
      32.     })
      33. ​
      34. script>

    • 监视事件的缩写

    • 缩写的条件仅仅只有handler方法时才可以缩写

      1. <script>
      2.  
      3. //第一种写法
      4. watch:{
      5.     isHot:{
      6.         /*原来的写法
      7.           immediate: true,
      8.           deep: true,
      9.           handler(newValue,oldvalue){
      10.             console.log('isHot被修改了，newValue,oleValue')
      11.           }     
      12.     }*/
      13.     //缩写后
      14.     isHot(newValue,oldvalue){
      15.             console.log('isHot被修改了，newValue,oleValue')
      16.           }     
      17.     }*/
      18. }
      19. //第二次写法的缩写
      20. /*vm.$watch('isHot',{
      21.      immediate: true,
      22.           deep: true,
      23.           handler(newValue,oldvalue){
      24.             console.log('isHot被修改了，newValue,oleValue')
      25.           } 
      26. })*/
      27. //缩写后
      28. vm.$watch('isHot',function(newValue,oldvalue){
      29.     console.log('isHot被修改了，newValue,oleValue')
      30. })
      31.