首页
学习
活动
专区
工具
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

24730
  • 详细介绍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.3K20

    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操作数据,因为即便操作数据,也不会再触发更新流程了。 我会在这里分享更多有用的干货知识,点击下边的框框关注哦!

    49510

    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 属性。

    29930

    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) // 防抖: 延迟执行 → 干啥事先等一等,延迟一会,一段时间内没有再次触发

    22030

    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

    懂个锤子Vue

    通过修改上述代码验证:Vue实例和容器遵循一一对应,先入为主原则,未匹配的则不翻译Vue模板;Vue响应式编程:data中的数据发生改变,那么页面中用到该数据的地方也会自动更新 这里就不介绍原理后面出一个文章上图可以看到...:Vue实例数据: "实例.属性名" = "值"相比于原生的JS,Vue响应式更加方便操作DOM,使开发者专注于业务核心逻辑;Vue开发者工具:Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具...,特别是在处理 class 和 style 时:这些增强功能使得根据数据动态设置元素的类和样式变得非常简单和直观;对 class 的增强:对象语法: 当class动态绑定的是对象时,键就是类名,值就是布尔值...⏬@keyup.enter 当用户按下回车键时触发;@keyup.tab: 当用户按下Tab键时触发;@keyup.esc: 当用户按下Esc键时触发; keyup...中,watch 是一个非常有用的选项,它允许你监听Vue实例上的数据变动:当你需要在数据变化时执行一些操作,比如异步请求、深度响应、或是复杂的逻辑,watch 就显得尤为重要;<div id="root

    8910
    领券