当前位置：首页 > news >正文

＜每日小技巧：N个很棒的 Vue 开发技巧, 持续记录ing ＞

news 2025/6/22 21:10:04

在这里插入图片描述

每日小技巧：6 个很棒的 Vue 开发技巧

👉 ① Watch 妙用
- > `watch`的高级使用
- > 一个监听器触发多个方法
- > `watch` 监听多个变量
👉 ② 自定义事件 `$emit()` 和事件参数 `$event`
👉 ③ 监听组件生命周期
- 常规写法
- @hook写法
👉 ④ 路由使用技巧
- > 路由参数解耦
- > 无刷新修改当前路由Url及参数
往期内容 💨

👉 ① Watch 妙用

> `watch`的高级使用

watch 在监听某个指定对象发生变化时触发，但是有时我们希望 watch 对应的监听函数能够在生命周期中，被主动调用此函数，执行函数内对应的逻辑操作。

handler - function : 监听对象改变触发的对象；
immediate - Boolean : 是否在生命周期挂载时，自执行一遍；
deep - Boolean : 是否深度监测；

export default {data() {return {name:  Joe}},watch: {name: {handler:  sayName ,immediate: true}},methods: {sayName(newVal， oldVal) {console.log(this.name, newVal)...// 对应的操作逻辑，只需在特定需要使用此函数的情况下，这样子写会好用一点。// 代码整洁}}
}

> 一个监听器触发多个方法

当特定开发需求，需要触发监听器执行多个方法时，可以使用数组，您可以设置多个形式，包括字符串、函数、对象。

export default {data: {name:  Joe},watch: {name: [// 调用定义的函数sayName1 ,// (newVal, oldVal) => {...},{handler:  sayName3 ,immaediate: true}]},methods: {sayName1() {console.log( sayName1==> , this.name)},sayName3() {console.log( sayName3==> , this.name)}}
}

> `watch` 监听多个变量

watch 本身不能监听多个变量。但是，我们可以通过返回具有计算属性的对象。通过计算属性的特性，去监听计算属性返回的值。从而实现“监听多个变量”。

export default {data() {return {msg1:  apple ,msg2:  banana}},compouted: {msgObj() {const { msg1, msg2 } = thisreturn {msg1,msg2}}},watch: {msgObj: {handler(newVal, oldVal) {if (newVal.msg1 != oldVal.msg1) {console.log( msg1 is change )}if (newVal.msg2 != oldVal.msg2) {console.log( msg2 is change )}},deep: true}}
}

👉 ② 自定义事件 `$emit()` 和事件参数 `$event`

$event 是事件对象的一个特殊变量，它在某些场景下为我们提供了更多的可用参数来实现复杂的功能。本机事件：与本机事件中的默认事件对象行为相同。

<template><div><input type="text" @input="inputHandler( hello , $event)" /></div>
</template>
export default {methods: {inputHandler(msg, e) {console.log(msg, e.target.value) // hello, input输入的内容}}
}

自定义事件：在自定义事件中表示为捕获从子组件抛出的值。

子组件

export default {methods: {customEvent() {// 子组件中向上传递事件this.$emit( custom-event ,  some value )}}
}

父组件

<template><div><my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)" /></div>
</template>
export default {methods: {customEvent(index, e) {console.log(e) //  some value}}
}

👉 ③ 监听组件生命周期

通常我们使用 $emit 监听组件生命周期，父组件接收事件进行通知。

常规写法

子组件

export default {mounted() {this.$emit( listenMounted )}
}

父组件

<template><div><List @listenMounted="listenMounted" /></div>
</template>

其实有一种简单的方法就是使用@hook 来监听组件的生命周期，而不需要在组件内部做任何改动。同样，创建、更新等也可以使用这个方法。

@hook写法

父组件

<template><div><List @hook:mounted="listenMounted" /></div>
</template>

👉 ④ 路由使用技巧

> 路由参数解耦

正常写法


export default {methods: {getParamsId() {return this.$route.params.id}}
}

在组件中使用 $route 会导致与其相应路由的高度耦合，通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦，将路由的 props 属性设置为 true 后，组件内部可以通过 props 接收 params 参数。

export default {props: [ id ],methods: {getParamsId() {return this.id}}
}

还可以通过功能模式返回道具。

const router = new VueRouter({routes: [{path:  /user/:id ,component: User,props: (route) => ({id: route.query.id})}]
})

> 无刷新修改当前路由Url及参数

引入webpack-merge

import merge from 'webpack-merge'；修改原有参数        
this.$router.push({query:merge(this.$route.query,{'maxPrice':'630'})
})新增一个参数：
this.$router.push({query:merge(this.$route.query,{'addParams':'我是新增的一个参数，哈哈哈哈'})
})替换所有参数：
this.$router.push({query:merge({},{'maxPrice':'630'}
)