Vue watch的用法

Vue.js 有一个方法 watch,观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。

1.简单用法

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name(newVal, oldVal) {
      //...
    },
  },
}
</script>

当监听的参数发生变化就会执行函数,也可以在所监听的数据后面直接加字符串形式的方法名:

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name: 'nameChange',
  },
  methods: {
    nameChange() {
      //...
    },
  },
}
</script>

2.初始化执行

上面的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        // ...
      },
      immediate: true,
    },
  },
}
</script>

3.深度监听

如果需要监听比较复杂数据类型(对象)的变化时,普通的watch方法无法是监听到对象内部属性的变化,只有data中的数据才可以够监听到变化,这时就需要deep属性对对象进行深度的监听。

<template>
  <div>
    <a-input v-model="cat.name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cat: { name: 'mimi', age: 2 },
    }
  },
  watch: {
    cat: {
      handler(val) {
        // ...
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>

设置deep: true 则可以监听到cat.name的变化,此时会给cat的所有属性都加上这个监听器,如果对象属性较多时,则每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

watch: {
  'cat.name': {
    handler(val) {
      // ...
    },
    immediate: true,
    deep: true,
  },
},

也可以借助于computed计算属性来完成:

<template>
  <div>
    <a-input v-model="cat.name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cat: { name: 'mimi', age: 2 },
    }
  },
  computed: {
    newName() {
      return this.cat.name
    },
  },
  watch: {
    newName(val) {
      //...
    },
  },
}
</script>
### Vue.js 中 Watch 的使用指南与示例代码 在 Vue.js 中,`watch` 提供了一种机制来监听特定数据的变化,并在这些数据发生变化时执行相应的逻辑。这种特性非常适合用来处理依赖于其他数据的状态更新场景。 --- #### 1. **基础用法** `watch` 主要用于观察 `data` 或者 `computed` 属性的变化。每当被监听的属性值发生改变时,就会触发对应的回调函数。 ##### 示例代码 ```javascript new Vue({ el: '#app', data: { message: 'Hello!' }, watch: { message(newVal, oldVal) { console.log(`message 已经从 "${oldVal}" 改变为 "${newVal}"`); } } }); ``` - **解释**: 上述代码中,当 `message` 发生变化时,控制台会打印出新旧值的信息[^4]。 --- #### 2. **深度监听(Deep Watching)** 默认情况下,`watch` 不会深入监测对象内部属性的变化。如果需要监听嵌套对象内的属性变化,则需设置 `deep: true`。 ##### 示例代码 ```javascript new Vue({ el: '#app', data: { user: { name: 'Alice', age: 25 } }, watch: { user: { handler(newVal, oldVal) { console.log('用户信息已更新:', newVal); }, deep: true // 深度监听 } } }); ``` - **解释**: 此处配置了对 `user` 对象深度监听,因此无论 `name` 还是 `age` 发生变化,都会触发回调函数。 --- #### 3. **立即执行回调(Immediate Execution)** 有时候我们希望在组件初始化阶段就运行一次监听器中的逻辑,而不仅仅是在首次变化之后才触发。这时可以借助 `immediate: true` 来实现这一需求。 ##### 示例代码 ```javascript new Vue({ el: '#app', data: { counter: 0 }, watch: { counter: { handler(newValue) { console.log(`当前计数为:${newValue}`); }, immediate: true // 初始化时立即执行一次 } } }); ``` - **解释**: 即使 `counter` 初始值未变,在组件挂载完成后仍会立刻调用一次回调函数[^4]。 --- #### 4. **监听多个属性或计算属性** 除了直接监听单一的数据字段外,还可以通过监听计算属性的方式间接达到同时监控多个变量的目的。 ##### 示例代码 ```javascript new Vue({ el: '#app', data: { width: 800, height: 600 }, computed: { aspectRatio() { return `${this.width}:${this.height}`; } }, watch: { aspectRatio(newAspectRatio) { console.log(`宽高比例已经更改为 ${newAspectRatio}`); } } }); ``` - **解释**: 计算属性 `aspectRatio` 结合了 `width` 和 `height` 的值,任何一项改动都将重新计算并触发关联的监听器[^4]。 --- #### 5. **实际应用案例 —— 动态分页查询** 假设有这样一个场景:根据用户的筛选条件动态请求后台接口获取列表数据。 ##### 示例代码 ```javascript new Vue({ el: '#app', data: { currentPage: 1, pageSize: 10, searchKeyword: '' }, methods: { fetchData(page, size, keyword) { console.log(`正在加载第 ${page} 页,每页大小为 ${size},关键词为 "${keyword}"`); } }, watch: { currentPage(val) { this.fetchData(val, this.pageSize, this.searchKeyword); }, pageSize(val) { this.currentPage = 1; // 页面切换回首页 this.fetchData(this.currentPage, val, this.searchKeyword); }, searchKeyword(val) { this.currentPage = 1; this.fetchData(this.currentPage, this.pageSize, val); } } }); ``` - **解释**: 当任一筛选条件 (`currentPage`, `pageSize`, `searchKeyword`) 变化时,均会触发对应的方法去刷新数据源。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值