首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue @Watch不会在布尔更改上触发

Vue的@Watch是一个观察属性变化的装饰器,可以用来监听数据的变化并执行相应的操作。然而,在布尔类型的属性变化时,@Watch可能不会触发。

具体原因是,Vue默认对基本数据类型(包括布尔类型)进行的是浅比较。当一个布尔类型的属性被修改时,其实际的值并没有发生变化,只是从true变为了false,或者从false变为了true。这种情况下,Vue无法通过浅比较来检测到属性的变化,因此@Watch不会被触发。

解决这个问题的方法是使用Vue提供的深度观察(deep watch)。通过设置deep: true选项,可以告诉Vue对属性进行深度观察,即使属性的值没有变化,也能够被@Watch捕捉到。

下面是一个使用@Watch进行深度观察的示例代码:

代码语言:txt
复制
import { Vue, Component, Watch } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  myBooleanProperty = false;

  @Watch('myBooleanProperty', { deep: true })
  onMyBooleanPropertyChanged(value: boolean, oldValue: boolean) {
    // 在这里执行属性变化时的操作
  }
}

在上述示例中,@Watch装饰器会在myBooleanProperty属性发生变化时触发onMyBooleanPropertyChanged方法。通过设置deep: true选项,Vue会对myBooleanProperty进行深度观察,确保在布尔更改时也能正确触发@Watch。

Vue官方文档对@Watch的详细说明可以参考:Vue - Watch。对于Vue的其他特性和功能,你可以在腾讯云的云计算产品中找到相关的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue 侦听器 watch 扩展之立即触发回调、深度监听和注销

一、立即触发回调 watch 最初绑定时是不会执行的,需要等监听的内容改变时才执行监听计算 那我们想要一开始绑定的时候就执行该怎么办呢?...中默认写的就是这个 handler,Vue 会去处理这个逻辑,最终编译出来其实就是这个 handler 2、immediate 属性 指定 immediate: true 将立即以表达式的当前值触发回调...,即在 wacth 中声明了 firstName 之后就会立即执行里面的 handler 方法,如果为 false 就跟原来的效果一样,不会在绑定的时候就执行 二、深度监听 受 JavaScript 的限制...> new Vue({ el: '#root', data: { obj: { a: 123 } }, watch: { obj: {...} } } 设置 deep 为 true 后,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,这样就可以监听到属性 a 了 但这样性能消耗会非常大,只要修改 obj 中任一属性都会触发这个监听器里的

2.6K10

掌握这些容易被忽略的Vue细节,轻松排查问题,省时省力!

当attribute 为布尔型时, 行为略有不同。...console.log(someObject) } ) 直接给 watch() 传入一个响应式对象,会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发。...返回响应式对象的 getter 函数,只有在返回不同的对象时,才会触发回调,你也可以给上面这个例子显式地加上 deep 选项,强制转成深层侦听器: watch( () => state.someObject...回调的触发时机 默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。...如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 选项: watch(source, callback, { flush: 'post' }) watchEffect

26330
  • 详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景

    图片监听属性的基本概念监听属性的定义在Vue3中,我们可以通过watch函数来创建监听属性。watch函数接受两个参数:要监听的数据和回调函数,在数据发生变化时会自动触发回调函数。...from 'vue'export default { setup() { const state = reactive({ count: 0 }) watch(...监听属性的使用监听基本数据类型在Vue3中,我们可以监听基本数据类型(如字符串、数字、布尔值等)的变化。...return { username, isUsernameInvalid } }}在上述代码中,我们使用ref函数创建了一个响应式的字符串变量username和布尔值变量...然后,我们定义了一个loadData函数,该函数会触发异步请求并将返回的数据赋值给data。通过watch函数,我们监听data的变化,并在数据变化时执行副作用处理,例如打印数据到控制台。

    3.7K20

    vue教程:Vue.js中 watch 的高级用法

    方法其实默认就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。...而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。...由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。...: true, deep: true } deep的意思就是让监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的...$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了,所以平时我们建议大家平时写watch都写到Vue的实例方法中去,避免维护上的麻烦。

    1.8K20

    Vue.js中 watch 的使用方法

    Vue.js中 watch 的高级用法 假设有如下代码: FullName: {{fullName}} FirstName: <input type="text"...而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。...由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。...: true } } deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler...const app = new Vue({ template: '{{text}}', data: { text: 0 }, watch: { text

    1.8K20

    vue --- watch 高级用法

    方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。...而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。...由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。..., deep: true } } deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的...const app = new Vue({ template: '{{text}}', data: { text: 0 }, watch

    1.2K20

    Vue.js中watch的高级用法

    Vue.js 的学习中,看到这篇文章,转载记录一下用作备忘。...而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。...由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。...deep: true } } 复制代码deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的...const app = new Vue({ template: '{{text}}', data: { text: 0 }, watch

    2.1K30

    Vue2.0原理篇

    插值语法 指令语法 总结 js表达式 js语句 Vue中的MVVM模型 总结 Vue响应式数据原理 总结 计算属性computed 什么是计算属性 原理 侦听属性watch 什么是侦听器 什么是深度侦听...computed与watch区别 样式绑定 class样式 style内联样式 条件渲染 Vue核心—Differ算法 Vue核心—虚拟DOM Vue工作流程 列表渲染/key的选择 index作...知道这个东西就行不多解释,面试的时候用getter/setter会专业 总结: Vue会为data中的每一个属性都添加一个get()和set()方法 data中数据的变化,实际是调用了set(...语法: watch:{ 侦听的数据(参数1,参数2){ //参数1接收新值,参数2接收旧值 -- 对数据进行操作 -- } } 什么是深度侦听 Vue中的watch默认只能侦听data中第一层对象的变化...未配置input的value值,则v-model收集的是checked(勾选 or 未勾选,是布尔值) 2.

    4.2K10

    Vue3 快速入门及巩固基础

    : 布尔型属性 布尔型属性根据 true/false 值来决定属性是否应该存在于该元素上 当 isDisabled 的值为真值或空字符串时,元素会包含 disabled...侦听器的使用 在有些情况下,我们需要在状态变化后执行一些操作,例如: 更改 DOM,或根据异步操作的结果去修改另一处的状态 在选项式 API 中,我们可以使用 watch() 选项监听响应式数据,发生变化时触发一个函数...: {        // 当msg发生变化时,触发这个函数        // newVal,oldVal 修改前和修改后的值        msg(newVal, oldVal) {            ...当条件为假值时,v-if 并不会在 dom 渲染保留元素,而 v-show 会渲染元素,只是设置 css 属性了 display: none; <!...选项式 API 又称为 声明式渲染 选项式 API 就是 Vue2 中的编写风格,使用 data,methods,computed,watch 等选项的 API 风格。 什么是组合式 API ?

    3.8K30

    Vue专题 05_详解vue生命周期的每个节点

    编译的DOM结构,但此时Vue已经不会在帮你管理这个DOM了)其实此时已经调用了addN()方法,但是由于你处在的时间点很尴尬,你是已经在它进入销毁流程的时候里的销毁之前去调用,你在这里对数据进行的所有操作都不会再更新了...事实是只要进入了beforeDestroy你仍可以访问到数据和方法,但是修改数据无法再更新了,更新数据唯独放在beforeDestroy和destroy时,不会再触发更新了,一般在此时做一下关闭定时器、...} }); 销毁vm之后,监视属性watch不再工作: 只剩下了原生的事件可以工作,watch被销毁了 5.总结 一共有8个生命周期钩子(4对) 类比张三的一生...vm,都会调用beforeDestroy这个生命周期钩子,所以我们在beforeDestroy里面关掉定时器保险。...3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。 我会在这里分享更多有用的干货知识,点击下边的框框关注哦!

    50610

    vue课程学习笔记归纳

    监视属性watch: 当被监视的属性变化时, 回调函数自动调用, 进行相关操作 监视的属性必须存在,才能进行监视!! 监视的两种写法: (1).new Vue时传入watch配置 (2).通过vm....$watch监视 深度监视: (1).Vue中的watch默认不监测对象内部值的改变(一层)。 (2).配置deep:true可以监测对象内部值改变(多层)。...备注: (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以! (2).使用watch时根据数据的具体结构,决定是否采用深度监视。为了效率更高,简单结构无需开深度监视。...computed和watch之间的区别: computed能完成的功能,watch都可以完成。 watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。...一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。

    2.3K40

    Vue】使用 Vue2 开发一个项目列表展示应用

    生命周期 Vue 的要给组件会经历 创建 -> 编译 -> 挂载 -> 卸载 -> 销毁 等一系列事件,这些事件发生的前后都会触发一个相关的钩子(hook)函数...子组件向父组件通信 如果子组件需要把信息传递给父组件,可以使用自定义事件: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 下面是一个示例: comp.vue...它的原理就是使用一个空的 Vue 实例作为中央事件总线,通过自定义事件的监听和触发,来完成通信功能 下面我们来看一个具体的实例: 首先定义一个空的 Vue 实例,作为事件总线 import Vue from...delete(value) 删除某个值,返回一个布尔值,表示删除是否成功。 has(value) 返回一个布尔值,表示该值是否为Set的成员。 clear() 清除所有成员,没有返回值。...has(key) 返回一个布尔值,表示某个键是否在当前 Map 对象之中。 delete(key) 删除某个键,返回true。如果删除失败,返回false。

    1.2K10

    Vue核心与实践(二)

    所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码 2.按键修饰符 @keyup.enter —>当点击enter键的时候才触发 代码演示:

    VUE一些积累 原

    方法中的 this 自动绑定为 Vue 实例。 3#watch:是一种通用的方式来观察和响应 Vue 实例上的数据变动。一个对象,键是需要观察的表达式,值是对应回调函数。...Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。...通俗来讲: computed是在HTML DOM加载后马上执行的, 如赋值;而methods则必须要有一定的触发条件才能执行,如点击事件; watch呢?...所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。 下面的例子可以做为说明。...computed 属性 vs watched 属性:Vue 确实提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。

    30230

    Vuewatch 和 watchEffect 的区别

    watch 和 watcheffect 都是 vue 中用于监视响应式数据的 api,它们的区别在于:watch 用于监视特定响应式属性并执行回调函数。...watcheffect 用于通用的响应式数据监视,但回调函数中不能更新响应式数据。...Vuewatch 和 watchEffect 的区别 开门见山回答: watch 和 watchEffect 都是 Vue 中用于监视响应式数据的 API,但它们在行为和用法上有所不同。...默认情况下,在组件挂载和每次数据更新时都被触发 (immediate 为 false)。 可以通过设置 immediate 选项为 true,在组件挂载时立即触发回调。...用法: 总结: watch 用于监视特定响应式属性并执行回调函数,而 watchEffect 用于通用的响应式数据监视,但回调函数中不能更新响应式数据。

    9110

    Vue】day02-Vue基础入门

    所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码 2.按键修饰符 @keyup.enter —>当点击enter键的时候才触发 代码演示:  <div...1.语法: :class = "对象/数组">这是一个div 2.对象语法 当class动态绑定的是对象时,键就是类名,值就是布尔值,如果值是true,就有这个类,否则没有这个类... 适用场景:一个类名,来回切换 3.数组语法 当class动态绑定的是数组时 → 数组中所有的类...data: {   words: '苹果',   obj: {     words: '苹果'   } }, watch: { // 该方法会在数据变化时,触发执行   数据属性名 (newValue...newValue) { // console.log('变化了', newValue) // 防抖: 延迟执行 → 干啥事先等一等,延迟一会,一段时间内没有再次触发

    23130

    TDesign 更新周报(2022年9月第2周)

    insekkei (#1503) Bug FixesTabs: 修复替换 classPrefix 时组件渲染异常的问题 @uyarn (#1494)Upload: 修复在 wujie 环境中,部分按钮会触发两次的问题...已经存在的 beforeUpload 用于判定单个文件的是否继续上传 @chaishi (#1461)新增事件 onValidate,文件校验不通过时触发,可能情况有:自定义全文件校验不通过、文件数量校验不通过...、文件数量校验不通过、文件名重复(允许重复文件名场景下不会触发)等 @chaishi (#1461)新增事件 onOneFileSuccess ,多文件上传场景下,在单个文件上传成功后触发 @chaishi... (#1461)新增事件 onOneFileFail ,多文件上传场景下,在单个文件上传失败后触发 @chaishi (#1461)新增 formatRequest 用于新增或修改上传请求参数(现有的 ...onChange 事件问题(可能存在 breaking change) @chaishi (#1461)Popup: 修复 ref 透传丢失属性问题 @HQ-Lin (#1468)Select: 修复布尔值选中没有显示对应的文字问题

    1.6K30
    领券