vue使用watch监听注意事项

在使用深度监听时遇到拿不到this的情况!!!

使用方式

例如监听路由

 watch: {
    
    
     $route(now, old) {
    
    
         //now表示现在的路由，
         //old表示改变前的路由
     },
 },

深度监听

当监听多层级时需使用到，例如对象
数据结构: lessonSetting:{ count:1, title:{ one:‘测试·’ } },

lessonSetting:{
    
    
     handler:(newVal,oldVal)=>{
    
    
         
         console.log(this)
     },
     deep:true
 }

使用这种写法加上deep:true即可

tip:这样居然拿不到this

解决拿不到this

网上都说将普通函数加上.bind(this)或者使用监听函数，但我这里还是无法拿到this,这样就不能在里边调用别的方法咯

- 为了避免这个问题，建议在回调函数中不要依赖于 this，而是使用其他变量来保存组件实例的引用。例如，在组件创建时可以将 this 存储在一个变量中：

export default {
    
    
  created() {
    
    
    const self = this;
    this.$watch('lessonSetting', function(newVal, oldVal) {
    
    
      console.log(self); // 输出组件实例
    }, {
    
     deep: true });
  }
}

在上面的代码中，我们将组件实例的引用存储在 self 变量中，并在监听器回调函数中使用它来访问组件实例。这样就可以确保能够正确地访问组件实例的属性和方法了

业务场景

• 常见的购物车可监听商品的数量改变动态修改总价
• 模型配置监听配置被修改发请求进行修改
• 常用于修改了哪个属性需要做对应操作的情况