每日小技巧: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 } = this
return {
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'}
)
往期内容 💨
🔥 < CSDN周赛解析:第 27 期 >
🔥 < 每日算法 - JavaScript解析:二叉树灯饰【初识动态规划 - dp, 具体理解配合代码看最合适,代码均有注释】 >
🔥 < 每日算法 - Javascript解析:经典弹珠游戏 >
🔥 < JavaScript技术分享: 大文件切片上传 及 断点续传思路 >