watch如何监听对象和数组以及页面首次加载的时候做监听 当一条数据影响多条数据的时候就需要用watch 搜索数据

watch监听对象（深度监听：handler+deep）

watch:{
  	obj:{
             handler(newVal){
            console.log(newVal)
             },
                deep:true,
     	 },
       }

watch监听数组
第一种：数据修改
点击时第0项的数据发生改变，值为1000，但是页面没有更新，watch也没有监听到数组的变化

<button @click="add()">tianjia</button>
 data:{
        arr:[10,20,30],
    },
 methods:{
add(){
    this.arr[0]=100;
    console.log(this.arr)
}
    }, 
     watch:{
        arr(newVal){
                console.log(newVal)
           }   
    }

第二种：清空数组里面的数据，但是watch依旧没有监听到数组的 变化 所以特殊情况下watch是监听不到数组的变化的

  methods: {
            handleAdd(){
                 this.arr.length = 0;
                console.log(this.arr);

            }
        },
         watch:{
        arr(newVal){
                console.log(newVal)
           }   
    }

解决办法

    **1、如果想要检测到数组的变化则需要用splice  或者 $set**
  
   第一种:数据修改
  methods: {
            handleAdd(){
                this.arr.splice(0,10,100)
            }
        },
        第二种:数据清空
          methods: {
            handleAdd(){
                this.arr.splice(0,10)
            }
        },
        第三种:this.$set（targe，targe name/index，value）
          methods: {
            handleAdd(){
                this.$set(this.arr,0,100) 
            }
        },
        
           watch:{
        arr(newVal){
                console.log(newVal)
           }   
    }

删除
this.$delete(this.arr,index)


data和methods的属性和方法都会通过属性代理的方式挂载在vm的实例身上
watch还可以监听 页面首次加载

watch:{
           obj:{
               handler(newVal){
                    console.log(newVal)
               },
               deep:true,
               **immediate:true**
           },
        }