标签：Vue watch site newVal oldVal num 监听

watch属性监听Vue实例中的所有变量和计算结果

监听data中的自定义变量

watch: {
  num(newVal, oldVal) {
    // newVal 变量num改变后的值
    // newVal 变量num改变前的值
    // 当变量num发生改变，执行当前回调
  },
},
data() {
  return {
    num: 1,
  };
}

监听computed计算属性的计算结果

watch: {
  site(newVal, oldVal) {
    // newVal 计算属性site计算后的值
    // newVal 计算属性site计算前的值
    // 当计算属性site的计算结果发生改变，执行当前回调
  },
},
computed: {
  site: {
    get() {
      return this.num;
    },
  },
},

watch监听属性辅助选项

选项：deep

watch: {
  obj: {
    handler(newVal, oldVal) {
      console.log("newVal ===>>>", newVal);
      console.log("oldVal ===>>>", oldVal);
    },
    deep: true,
  },
},
data() {
  return {
    obj: {
      name: "张三",
      sex: "18",
    },
  };
}

deep选项为true时， 可进行指针的深度监听，不只是对象，数组也是同样会被深度监听

选项：immediate

watch: {
  obj: {
    handler(newVal, oldVal) {
      console.log("newVal ===>>>", newVal);
      console.log("oldVal ===>>>", oldVal);
    },
    deep: true,
    immediate: true,
  },
}

immediate选项为true时，当前监听回调函数会在Vue实例加载时立即触发回调

标签：Vue,watch,site,newVal,oldVal,num,监听
来源： https://www.cnblogs.com/Function-cnblogs/p/14679404.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。