优秀的工程师如何把vue技巧玩得很6

点击上方“程序员黑叔”&＃xff0c;选择“置顶或者星标”

你的关注意义重大&＃xff01;

作者 / WahFung

         阅读本文需要 3分钟

一般在组件内使用路由参数&＃xff0c;大多数人会这样做&＃xff1a;

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


在组件中使用 $route 会使之与其对应路由形成高度耦合&＃xff0c;从而使组件只能在某些特定的 URL 上使用&＃xff0c;限制了其灵活性。

正确的做法是通过 props 解耦

const router &＃61; new VueRouter({routes: [{path: &＃39;/user/:id&＃39;,component: User,props: true}]
})


将路由的 props 属性设置为 true 后&＃xff0c;组件内可通过 props 接收到 params 参数

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


另外你还可以通过函数模式来返回 props

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


文档&＃xff1a;https://router.vuejs.org/zh/guide/essentials/passing-props.html

函数式组件是无状态&＃xff0c;它无法实例化&＃xff0c;没有任何的生命周期和方法。创建函数式组件也很简单&＃xff0c;只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件&＃xff0c;因其轻量&＃xff0c;渲染性能也会有所提高。

组件需要的一切都是通过 context 参数传递。它是一个上下文对象&＃xff0c;具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。

函数式组件

父组件使用

import List from &＃39;&＃64;/components/List.vue&＃39;
export default {components: {List},data() {return {list: [{title: &＃39;title&＃39;,content: &＃39;content&＃39;}],currentItem: &＃39;&＃39;}}
}


文档&＃xff1a;https://cn.vuejs.org/v2/guide/render-function.html#函数式组件

在开发中修改第三方组件样式是很常见&＃xff0c;但由于 scoped 属性的样式隔离&＃xff0c;可能需要去除scoped 或是另起一个 style 。这些做法都会带来副作用&＃xff08;组件样式污染、不够优雅&＃xff09;&＃xff0c;样式穿透在css预处理器中使用才生效。

我们可以使用 >>> 或 /deep/ 解决这一问题:


watch高阶使用

立即执行

watch 是在监听属性改变时才会触发&＃xff0c;有些时候&＃xff0c;我们希望在组件创建后 watch 能够立即执行

可能想到的的方法就是在 create 生命周期中调用一次&＃xff0c;但这样的写法不优雅&＃xff0c;或许我们可以使用这样的方法

export default {data() {return {name: &＃39;Joe&＃39;}},watch: {name: {handler: &＃39;sayName&＃39;,immediate: true}},methods: {sayName() {console.log(this.name)}}
}


深度监听

在监听对象时&＃xff0c;对象内部的属性被改变时无法触发 watch &＃xff0c;我们可以为其设置深度监听

export default {data: {studen: {name: &＃39;Joe&＃39;,skill: {run: {speed: &＃39;fast&＃39;}}}},watch: {studen: {handler: &＃39;sayName&＃39;,deep: true}},methods: {sayName() {console.log(this.studen)}}
}


触发监听执行多个方法

使用数组可以设置多项&＃xff0c;形式包括字符串、函数、对象

export default {data: {name: &＃39;Joe&＃39;},watch: {name: [&＃39;sayName1&＃39;,function(newVal, oldVal) {this.sayName2()},{handler: &＃39;sayName3&＃39;,immaediate: true}]},methods: {sayName1() {console.log(&＃39;sayName1&＃61;&＃61;>&＃39;, this.name)},sayName2() {console.log(&＃39;sayName2&＃61;&＃61;>&＃39;, this.name)},sayName3() {console.log(&＃39;sayName3&＃61;&＃61;>&＃39;, this.name)}}
}


文档&＃xff1a;https://cn.vuejs.org/v2/api/#watch

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象&＃xff0c;再监听这个对象来实现“监听多个变量”

export default {data() {return {msg1: &＃39;apple&＃39;,msg2: &＃39;banana&＃39;}},compouted: {msgObj() {const { msg1, msg2 } &＃61; thisreturn {msg1,msg2}}},watch: {msgObj: {handler(newVal, oldVal) {if (newVal.msg1 !&＃61; oldVal.msg1) {console.log(&＃39;msg1 is change&＃39;)}if (newVal.msg2 !&＃61; oldVal.msg2) {console.log(&＃39;msg2 is change&＃39;)}},deep: true}}
}事件参数$event

$event 是事件对象的特殊变量&＃xff0c;在一些场景能给我们实现复杂功能提供更多可用的参数

原生事件

在原生事件中表现和默认的事件对象相同

export default {methods: {inputHandler(msg, e) {console.log(e.target.value)}}
}


自定义事件

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

my-item.vue :

export default {methods: {customEvent() {this.$emit(&＃39;custom-event&＃39;, &＃39;some value&＃39;)}}
}



App.vue

export default {methods: {customEvent(index, e) {console.log(e) // &＃39;some value&＃39;}}
}

文档&＃xff1a;https://cn.vuejs.org/v2/guide/events.html#内联处理器中的方法

https://cn.vuejs.org/v2/guide/components.html#使用事件抛出一个值

组件 model 选项:

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下&＃xff0c;一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event&＃xff0c;但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

input 默认作为双向绑定的更新事件&＃xff0c;通过 $emit 可以更新绑定的值

export default {props: {value: {type: Boolean,default: false}},methods: {switchChange(val) {this.$emit(&＃39;input&＃39;, val)}}
}


修改组件的 model 选项&＃xff0c;自定义绑定的变量和事件

export default {model: {prop: &＃39;num&＃39;,event: &＃39;update&＃39;},props: {value: {type: String,default: &＃39;&＃39;},num: {type: Number,default: 0}},methods: {numChange() {this.$emit(&＃39;update&＃39;, this.num&＃43;&＃43;)}}
}

文档&＃xff1a;https://cn.vuejs.org/v2/api/#model

通常我们监听组件生命周期会使用 $emit &＃xff0c;父组件接收事件来进行通知

子组件

export default {mounted() {this.$emit(&＃39;listenMounted&＃39;)}
}


父组件

其实还有一种简洁的方法&＃xff0c;使用 &＃64;hook 即可监听组件生命周期&＃xff0c;组件内无需做任何改变。同样的&＃xff0c; created 、 updated 等也可以使用此方法。


程序化的事件侦听器

比如&＃xff0c;在页面挂载时定义计时器&＃xff0c;需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号&＃xff0c;除此之外没有任何用处。

export default {mounted() {this.timer &＃61; setInterval(() &＃61;> {console.log(Date.now())}, 1000)},beforeDestroy() {clearInterval(this.timer)}
}


如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题&＃xff0c;但是它可以被视为杂物。

我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题&＃xff1a;

export default {mounted() {this.creatInterval(&＃39;hello&＃39;)this.creatInterval(&＃39;world&＃39;)},creatInterval(msg) {let timer &＃61; setInterval(() &＃61;> {console.log(msg)}, 1000)this.$once(&＃39;hook:beforeDestroy&＃39;, function() {clearInterval(timer)})}
}


使用这个方法后&＃xff0c;即使我们同时创建多个计时器&＃xff0c;也不影响效果。因为它们会在页面销毁后程序化的自主清除。

文档&＃xff1a;https://cn.vuejs.org/v2/guide/components-edge-cases.html#程序化的事件侦听器

在一些需求中&＃xff0c;手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件&＃xff0c;最理想的用法是通过命令式调用&＃xff0c;就像 elementUI 的 this.$message 。而不是在模板中通过状态切换&＃xff0c;这种实现真的很糟糕。

先来个最简单的例子&＃xff1a;

import Vue from &＃39;vue&＃39;
import Message from &＃39;./Message.vue&＃39;// 构造子类
let MessageConstructor &＃61; Vue.extend(Message)
// 实例化组件
let messageInstance &＃61; new MessageConstructor()
// $mount可以传入选择器字符串&＃xff0c;表示挂载到该选择器
// 如果不传入选择器&＃xff0c;将渲染为文档之外的的元素&＃xff0c;你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)


下面实现一个简易的 message 弹窗组件

Message/index.vue

// 默认选项
const DefaultOptions &＃61; {duration: 1500,type: &＃39;info&＃39;,content: &＃39;这是一条提示信息&＃xff01;&＃39;,
}
let mid &＃61; 0
export default {data() {return {notices: []}},methods: {add(notice &＃61; {}) {// name标识 用于移除弹窗let _name &＃61; this.getName()// 合并选项notice &＃61; Object.assign({_name}, DefaultOptions, notice)this.notices.push(notice)setTimeout(() &＃61;> {this.removeNotice(_name)}, notice.duration)},getName() {return &＃39;msg_&＃39; &＃43; (mid&＃43;&＃43;)},removeNotice(_name) {let index &＃61; this.notices.findIndex(item &＃61;> item._name &＃61;&＃61;&＃61; _name)this.notices.splice(index, 1)}}
}


.wrap {position: fixed;top: 50px;left: 50%;display: flex;flex-direction: column;align-items: center;transform: translateX(-50%);
}.message {--borderWidth: 3px;min-width: 240px;max-width: 500px;margin-bottom: 10px;border-radius: 3px;box-shadow: 0 0 8px #ddd;overflow: hidden;
}.content {padding: 8px;line-height: 1.3;
}.message.info {border-left: var(--borderWidth) solid #909399;background: #F4F4F5;
}.message.success {border-left: var(--borderWidth) solid #67C23A;background: #F0F9EB;
}.message.error {border-left: var(--borderWidth) solid #F56C6C;background: #FEF0F0;
}.message.warning {border-left: var(--borderWidth) solid #E6A23C;background: #FDF6EC;
}


Message/index.js

import Vue from &＃39;vue&＃39;
import Index from &＃39;./index.vue&＃39;let messageInstance &＃61; null
let MessageConstructor &＃61; Vue.extend(Index)let init &＃61; () &＃61;> {messageInstance &＃61; new MessageConstructor()messageInstance.$mount()document.body.appendChild(messageInstance.$el)
}let caller &＃61; (options) &＃61;> {if (!messageInstance) {init(options)}messageInstance.add(options)
}export default {// 返回 install 函数 用于 Vue.use 注册install(vue) {vue.prototype.$message &＃61; caller}
}


main.js

import Message from &＃39;&＃64;/components/Message/index.js&＃39;Vue.use(Message)


使用

this.$message({type: &＃39;success&＃39;,content: &＃39;成功信息提示&＃39;,duration: 3000
})


文档&＃xff1a;https://cn.vuejs.org/v2/api/#vm-mount

亲&＃xff0c;点这涨工资