【vue2】watch的immediate

data() {
  return {
	message: 'hello',
  }
},
watch: {  
  // 使用handler和immediate  
  message: {  
    handler(newValue, oldValue) {  
      console.log(`Message changed from ${oldValue} to ${newValue}`);  
    },  
    immediate: true, // 立即执行,此时newvalue和oldvalue都是message的初始值"hello"
  }  
}  

immediate为true表示将在组件实例化时立即执行handler函数中的内容,为false表示只有在数据属性第一次发生变化时执行

组件实例化和vue实例化是两个概念

### Vue 3 中 `watch` 属性 `immediate` 在 Vue 3 中,`watch` 属性中的 `immediate` 参数用于控制回调函数何时执行。默认情况下,`watch` 函数会在每次数据更新时调用回调函数。然而,通过设置 `immediate` 为 `true`,你可以指定回调函数只在初始数据加载完毕后的第一次渲染阶段执行。 #### 示例: 假设我们有一个名为 `state` 的对象,其中包含了我们需要监控的状态属性 `name`。 ```javascript const state = { name: 'Alice' }; // 使用 watch 监听并立即执行回调 watch({ name: function(newName, newNameOld) { console.log(`Initial name was ${newNameOld} and now it's ${newName}`); }, immediate: true }); ``` 在这段代码中: 1. 我们定义了一个 `state` 对象,包含属性 `name`。 2. 我们创建了一个 `watch` 函数,关注 `name` 属性的变化。 3. 设置了 `immediate: true` 表示我们在 `name` 初始赋值时就应该执行回调函数。 运行上述代码时,你会看到控制台输出: ``` Initial name was undefined and now it's Alice ``` 这是因为 `immediate: true` 引导了在 `name` 初始化赋值时执行了回调函数,打印出了初始化前后的状态变化信息。 #### 注意点: - `immediate` 应仅在确实需要在初始化完成后立即执行某些特定逻辑的情况下启用。过度使用可能导致不必要的性能损耗。 - 如果 `immediate` 设置为 `false`(默认情况),则回调函数将在每次 `name` 更新时执行。 --- ##
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值