watch监听（普通和深度监听）

原创已于 2025-05-27 15:07:53 修改 · 843 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-06-19 09:21:26 首次发布

博客提及JavaScript开发中的深度监听，可对对象里的数组或更里层元素进行监听，属于前端开发技术范畴。

普通

data(){
user: "", // 定义要监听的对象
}

watch: {
// 普通监听值有变化就打印 newVal, oldVal新旧值参数
user(newVal, oldVal){
  console.log("user###", this.user);   
}}

深度监听：监听对象里面的数组或者其他（再里面一层的）

    user: {
      handler() {
        // console.log("user###", this.user);
        // 获取选择后勾选的数量
        this.ScanSum = 0;
          for (let i = 0; i < this.user.borrowToolList.length; i++) {
            if (this.user.borrowToolList[i].checkState == true) {
              this.ScanSum += 1;
            }
          }
      },
      immediate: true,  优先级 设置了true 会比create还快，一进去可能出现数据直接空了
      deep: true, //开启深度监听
    },