vue动态监听对象除某个属性之外的所有属性

在Vue应用中,需求是当data对象中除a属性外的任何其他属性值改变时,触发一个搜索条件。为此,使用`Object.keys`遍历data对象,过滤出非a属性并用`$watch`进行深度监听,变化后执行处理函数search。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:data对象,除了a属性,其他属性值发生变化,触发搜索条件。
mounted(){
let handler= ()=>{
//触发变化之后的处理函数
this.search()
}
//监听a属性之外,其他属性的变化
Object.keys(this.data)
.filter((item)=>![‘a’].includes(item))
.forEach(el=>{
this.$watch(vm=>vm.data[el],handler,{
deep:true
})
})
},
data() {
return {
data:{
a:‘aaa’,
b:‘bbb’,
c:‘ccc’
}
};
},

### Vue.js 动态路由详解 #### 创建动态路由匹配模式 在 Vue Router 中,可以使用冒号 `:` 来定义 URL 参数。当访问带有参数的路径时,这些参数会被解析成对象属性的形式传递给组件。 ```javascript const routes = [ { path: '/user/:id', component: User, }, ]; ``` 通过这种方式设置之后,每当用户访问 `/user/john` 或者其他类似的路径时,都会触发这个路由规则,并且会把 `john` 解析为 `params.id` 属性传入对应的页面组件中[^1]。 #### 访问动态参数 为了获取 URL 路径中的动态部分,在目标组件内部可以通过 `$route.params` 对象来读取: ```html <template> <div class="user"> {{ $route.params.id }} </div> </template> <script> export default { name: 'User' } </script> ``` 这段代码展示了如何在一个名为 `User` 的单文件组件里显示由父级路由传递过来的 ID 变量值。 #### 使用通配符创建可选参数 如果希望某些参数成为可选项,则可以在其后面加上问号 `?` 符号表示该段是可有可无的;另外还可以利用星号 `*` 定义任意数量级别的子目录作为捕获范围内的内容。 ```javascript // :lang? 表明这是个可选的语言参数 { path: '/users/:lang?', ... } // *catchAll 匹配任何剩余的部分 { path: '/files/*catchAll', ... } ``` 这种灵活性使得应用程序可以根据不同的需求灵活调整路由结构而不必担心固定写死的情况发生。 #### 设置重定向与别名 对于一些特殊场景下可能存在的旧版链接或者是出于 SEO 方面考虑而设计的新老地址映射关系来说,Vue Router 提供了两种方式来进行处理——redirect 和 alias。 - **Redirect**: 当用户尝试进入某个特定位置时自动跳转至另一处; - **Alias**: 同一资源允许存在多个不同形式但指向相同目的地的有效网址表达方法。 ```javascript { path: '/', redirect: to => { // 方法接收目的路线作为参数 return { path: '/home' }; } }, { path: '/about-me', alias: ['/me'], ... } ``` 上述例子说明了怎样设定根目录下的默认行为以及为个人简介页建立额外的名字空间以便于记忆和传播。 #### 处理重复点击导航条目问题 为了避免因多次快速点击同一菜单项而导致不必要的刷新现象出现,可以在项目初始化阶段加入一个小技巧:监听全局事件总线上的 popstate 消息并阻止默认动作的发生。 ```javascript import Vue from 'vue'; import router from './router'; router.beforeEach((to, from, next) => { const isBackButtonNavigation = window.event && (window.event.type === 'popstate'); if (!isBackButtonNavigation && to.fullPath === from.fullPath) { next(false); } else { next(); } }); ``` 此片段实现了防止浏览器前进后退按钮之外的操作所引起的意外更新效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值