深圳网站建设公司麦,快消品网站建设,郑州高端网站,教学管理信息服务平台每日小技巧#xff1a;6 个很棒的 Vue 开发技巧#x1f449; ① Watch 妙用 watch的高级使用 一个监听器触发多个方法 watch 监听多个变量#x1f449; ② 自定义事件 $emit() 和 事件参数 $event#x1f449; ③ 监听组件生命周期常规写法hook写法#x1f44… 每日小技巧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 是事件对象的一个特殊变量它在某些场景下为我们提供了更多的可用参数来实现复杂的功能。本机事件与本机事件中的默认事件对象行为相同。
templatedivinput typetext inputinputHandler( 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 )}}
}父组件
templatedivmy-item v-for(item, index) in list custom-eventcustomEvent(index, $event) //div
/template
export default {methods: {customEvent(index, e) {console.log(e) // some value}}
}③ 监听组件生命周期
通常我们使用 $emit 监听组件生命周期父组件接收事件进行通知。
常规写法
子组件
export default {mounted() {this.$emit( listenMounted )}
}父组件
templatedivList listenMountedlistenMounted //div
/template其实有一种简单的方法就是使用hook 来监听组件的生命周期而不需要在组件内部做任何改动。同样创建、更新等也可以使用这个方法。
hook写法
父组件
templatedivList hook:mountedlistenMounted //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技术分享 大文件切片上传 及 断点续传思路
