对 Vue 常用命令与方法的解析与优化
路由参数解耦props 函数式组件template 样式穿透 >>> /deep/ watch 高阶使用
事件参数 $event 监听组件生命周期 @hook:mounted 手动挂载组件
路由参数解耦
可配合官方文档阅读:点我
一般在 vue 组件内,我们会按以下方法获取路由参数:
1 | export default { |
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
正确的做法应该是在定义路由器时通过 props 解耦
1 | const router = new VueRouter({ |
将路由的 props 属性设置为 true 后,组件内可通过 props 接收到 params 参数
1 | export default { |
另外,还可以在定义路由器时通过函数模式来返回 props
1 | const router = new VueRouter({ |
函数式组件
可配合官方文档阅读:点我
函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。
组件需要的一切都是通过 context 参数传递。它是一个上下文对象,具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。
函数式组件
1 | <template functional> |
父组件使用
1 | <template> |
样式穿透
在开发当中,我们经常需要修改第三方组件样式,但是由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style
这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在 css 预处理器中使用才生效。
我们可以使用 >>> 或 /deep/ 解决这一问题:
1 | <style scoped> |
或者
1 | <style scoped> |
watch 高阶使用
可配合官方文档阅读:点我
立即执行
watch 是在监听属性改变时才会触发,有些时候我们希望在组件创建后 watch 能够立即执行
可能想到,可以在 create 生命周期中调用一次,但这样的写法并不优雅,我们可以使用以下方法,设置 immediate 属性为 true
1 | export default { |
深度监听
在监听对象时,对对象内部属性无法进行深度监听,可以通过设置 deep 属性为 true 完成
1 | export default { |
触发监听执行多个方法
在监听的属性设置中使用数组可以设置多项,形式包括字符串,函数,对象,也可对不同的方法设置 immaediate,deep 属性
1 | export default { |
watch 监听多个变量
watch 本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象,再监听这个对象来实现“监听多个变量”
1 | export default { |
事件参数$event
可配合官方文档阅读:点我
$event 是事件对象的特殊变量,在一些场景能给我们实现复杂功能提供更多可用的参数
原生事件
在原生事件中表现和默认的事件对象相同
1 | <template> |
自定义事件
在自定义事件中$event 表现为捕获从子组件抛出的值
子组件,发布广播事件
1 | export default { |
父组件,接收广播的事件信息
1 | <template> |
监听组件生命周期
有时我们会通过 $emit 监听组件生命周期,在父组件接收事件来进行处理,如下:
子组件
1 | export default { |
父组件
1 | <template> |
其实,我们可以在父组件接收事件时使用 @hook 监听子组件生命周期,子组件内无需做任何改变,如下:
父组件
1 | <template> |
手动挂载组件
可配合官方文档阅读:点我
在一些场景中,手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件,最理想地是能够通过命令式调用,就像 elementUI 的 this.$message 。而不是在模板中通过状态切换,这种实现十分不推荐
先看个简单地例子,通过原生 js 操作 dom 实现:
1 | import Vue from "vue"; |
下面,实现一个简易地 message 弹窗组件
Message/index.vue :
1 | <template> |
Message/index.js :
1 | import Vue from "vue"; |
main.js :
1 | import Message from "@/components/Message/index.js"; |
使用方法:
1 | this.$message({ |
结语
以上是对 Vue 一些常用命令的解析与优化,使用优化方法有利于提高项目性能,也使得代码更优雅
如果有帮助,建议打个赏哦亲~~