vue中的watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的No认知时，也需要执行函数。

        首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 

        键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 

        值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是原始值。 

        值也可以是函数名：不过这个函数名要用单引号来包裹。 

        值是包括选项的对象：选项包括有三个，如下

        第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

        第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

        第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

        可以只监听对象的其中一个属性值，如下

watch: {
    'person.name': {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        deep: true,
        immediate: true
    }
}

        vue的watch中不要使用箭头函数，即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象

        方式有

watch: { // 简单监听
    pageSize(newVal, oldVal) {
      console.log(newVal, oldVal) 
    },
    person: { // 对对象进行深度监听
      handler(nv) {
        console.log(nv)
      },
      immediate: true,
      deep: true
    },
    'person.name': { // 对对象的某一个属性进行深度监听
      handler(nv) {
        console.log(nv)
      },
      immediate: true,
      deep: true
    }
 
}

        watch和computed的区别

        1、computed的get必须有返回值（return），而watchreturn可有可无

        2、computed支持缓存，只有依赖的数据发生改变，才会重新进行计算，而watch不支持缓存，数据发生改变，会直接触发相应的操作

        3、computed可以自定义名称，而watch只能监听和data里面名称相同的属性

        4、computed适用于复杂的运算，而watch适合一些消耗性功能，比如Ajax

        5、computed不支持异步，当computed内有雨布操作是无效，无法监听数据的变化，而watch支持异步

        6、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值，而watch监听的函数接受两个参数，第一个是最新的值，第二个是输入之前的值

        7、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，多对一或者一对一，一般用computed，当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch

        通过以上内容我们知道了vue中watch值第一次绑定就执行监听函数的方法。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！