Vue 侦听器（watch）_如果需要针对某个对象中的属性开启侦听,需要在侦听器中配置( )选项。-CSDN博客

本文链接：https://blog.csdn.net/cn33333/article/details/127120332

作用

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法

watch: {

//参数一：改变后的值。

//参数二：改变前的值。

// 要侦听的数据(newValue, oldValue) {

}

简单监听

<body>
    <div id="app">

        <!-- 点击按钮改变天气 -->
        <h1>今天天气,{{info}}</h1>
        <button @click="change">切换天气</button>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isHot: true,
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                },
            },
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }
            },
            watch: {

                info(newvalue, oldValue) {
                    console.log(newvalue, oldValue) //  炎热 凉爽
                },

            }
        })
    </script>
</body>

深度侦听：

1.deep（深度侦听）：默认情况下，侦听器无法侦听对象的属性值的变化，如果想实现这个效果，则需要添加deep配置为true

2. handler（固定方法触发）：因为你要添加deep的配置，所以，侦听器的形式要变更为对象形式，只有对象才能添加其它的配置, 同时侦听函数必须为handler

3. immediate（立即侦听）：如果需要默认一进页面就触发一次，添加immediate配置选项为true

语法：

watch:{
	handler(newv){
		// 处理
	},
	deep:true,
	immediate:true
}

<body>
    <div id="baat">
     
        <h3>a的值是:{{ numbers.a}}</h3>
        <button @click="numbers.a++">+1</button>
        <h3>b的值是:{{ numbers.b}}</h3>
        <button @click="numbers.b++">+1</button>
    </div>
    <script type="text/javascript">
  

        const vm = new Vue({
            el: '#baat',
            data: {

                numbers: {
                    a: 1,
                    b: 1
                }
            },
          
            // (1)事件监听
            watch: {
                //监视多级中所有属性的的变化   深度监视
                numbers: {
                    // 深度监视开启
                    deep: true,
                    handler(newvalue, oldValue) {
                        console.log("a或b发生改变")
                    }
                }
            }

        });

    </script>
</body>

监听对象单个属性的变化

监听对象单个属性的变化

data: {
        // 用户的信息对象
        info: {
          name: 'a',
          add: {
            city: '南昌'
          }
        }
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.name'(newVal) {
          console.log(newVal)
        }
      }

监听复杂数据类型

【对数组进行侦听】

数组是引用类型,存在比较复杂的侦听规则。

从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址

为此，Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

1.Vue不能检测以下数组的变动:

a.当你利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = newValue b.当你修改数组的长度时，例如:vm.items.length = newLength

2.使用标准方法修改数组可以被侦听到

https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5% '

push()尾部添加

pop()尾部删除

unshift()头部添加

shift()头部删除

splice()删除、添加、替换

sort()排序

reverse()逆序

(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

<body>
    <div id="app">
       
        <ul>
            <li v-for="item in infot">{{item}}</li>
        </ul>
        <button @click="infot.push('小妮')">点击添加</button>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isHot: true,
                infot: ["小白", "小花", "小小"]
            },
            watch: {
           //复杂数据类型，这连个参数没有意义，因为地址没变。
           //所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也只有一个。
                // infot(newvalue, oldValue) {
                //     console.log(newvalue, oldValue)
                //         //['小白', '小花', '小小', '小妮', __ob__: Observer] 
                //        //  ['小白', '小花', '小小', '小妮', __ob__: Observer]
                // }

                infot(val) {
                    console.log(val)
                     //['小白', '小花', '小小', '小妮', __ob__: Observer]
                }
            }
        })
    </script>
</body>


<!-- 
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue b.当你修改数组的长度时，例如:vm.items.length = newLength 

在数组中使用侦听器总结:
 1.彻底替换为一个新数组,那么可以被侦听到。
 2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
3.如果直接修改数组的元素,那么无法被侦听到。
(解决方法:使用$set()方法修改元素的值。Vue3语法。)
 不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
-->