Vue系列：Vue开发技巧不多不少刚好10个
摘要
今天分享下 ——
Vue开发技巧 的一些基本知识，欢迎关注！
相关阅读：
- Vue系列：实例理解Vuex
- 相关文档：router.vuejs.org/zh/guide/es…
分享
一、路由参数解耦
一般在组件内使用路由参数，大多数人会这样做：
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
正确的做法是通过 props 解耦
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: true
}]
})
将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
另外你还可以通过函数模式来返回 props
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
文档：router.vuejs.org/zh/guide/es…
二、函数式组件
函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。
组件需要的一切都是通过 context 参数传递。它是一个上下文对象，具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。
函数式组件
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{
{
item.title}}</p>
<p>{
{
item.content}}</p>
</div>
</div>
</template>
父组件使用
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>
import List from '@/components/List.vue'
export default {
components: {
List
},
data() {
return {
list: [{
title: 'title',
content: 'content'
}],
currentItem: ''
}
}
}
三、样式穿透
在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在 css 预处理器中使用才生效。
我们可以使用 >>> 或 /deep/ 解决这一问题:
<style scoped>
外层 >>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
四、watch高阶使用
立即执行
watch 是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行
可能想到的的方法就是在 create 生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法
export default {
data() {
return {
name: 'Joe'
}
},
watch: {
name: {
handler: 'sayName',
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
深度监听
在监听对象时，对象内部的属性被改变时无法触发 watch ，我们可以为其设置深度监听
export default {
data: {
studen: {
name: 'Joe',
skill: {
run: {
speed: 'fast'
}
}
}
},
watch: {
studen: {
handler: 'sayName',
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
触发监听执行多个方法
使用数组可以设置多项，形式包括字符串、函数、对象
export default {
data: {
name: 'Joe'
},
watch: {
name: [
'sayName1',
function(newVal, oldVal) {
this.sayName2()
},
{
handler: 'sayName3',
immaediate: true
}
]
},
methods: {
sayName1() {
console.log('sayName1==>', this.name)
},
sayName2() {
console.log('sayName2==>', 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
}
}
}
六、事件参数$event
$event是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数
原生事件
在原生事件中表现和默认的事件对象相同
<template>
<div>
<input type="text" @input="inputHandler('hello', $event)" />
</div>
</template>
export default {
methods: {
inputHandler(msg, e) {
console.log(e.target.value)
}
}
}
自定义事件
在自定义事件中表现为捕获从子组件抛出的值
my-item.vue :
export default {
methods: {
customEvent() {
this.$emit('custom-event', 'some value')
}
}
}
App.vue
<template>
<div>
<my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
</my-list>
</div>
</template>
export default {
methods: {
customEvent(index, e) {
console.log(e) // 'some value'
}
}
}
七、自定义组件双向绑定
组件 model 选项:
允许一个自定义组件在使用
v-model时定制prop和event。默认情况下，一个组件上的v-model会把value用作prop且把input用作event，但是一些输入类型比如单选框和复选框按钮可能想使用value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。
input 默认作为双向绑定的更新事件，通过 $emit 可以更新绑定的值
<my-switch v-model="val"></my-switch>
export default {
props: {
value: {
type: Boolean,
default: false
}
},
methods: {
switchChange(val) {
this.$emit('input', val)
}
}
}
修改组件的 model选项，自定义绑定的变量和事件
<my-switch v-model="num" value="some value"></my-switch>
export default {
model: {
prop: 'num',
event: 'update'
},
props: {
value: {
type: String,
default: ''
},
num: {
type: Number,
default: 0
}
},
methods: {
numChange() {
this.$emit('update', this.num++)
}
}
}
八、监听组件生命周期
通常我们监听组件生命周期会使用 $emit ，父组件接收事件来进行通知
子组件
export default {
mounted() {
this.$emit('listenMounted')
}
}
父组件
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>
其实还有一种简洁的方法，使用 @hook 即可监听组件生命周期，组件内无需做任何改变。同样的， created 、 updated 等也可以使用此方法。
<template>
<List @hook:mounted="listenMounted" />
</template>
九、程序化的事件侦听器
比如，在页面挂载时定义计时器，需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号，除此之外没有任何用处。
export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题：
export default {
mounted() {
this.creatInterval('hello')
this.creatInterval('world')
},
creatInterval(msg) {
let timer = setInterval(() => {
console.log(msg)
}, 1000)
this.$once('hook:beforeDestroy', function() {
clearInterval(timer)
})
}
}
使用这个方法后，即使我们同时创建多个计时器，也不影响效果。因为它们会在页面销毁后程序化的自主清除。
十、手动挂载组件
在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过命令式调用，就像 elementUI 的 this.$message。而不是在模板中通过状态切换，这种实现真的很糟糕。
先来个最简单的例子：
import Vue from 'vue'
import Message from './Message.vue'
// 构造子类
let MessageConstructor = Vue.extend(Message)
// 实例化组件
let messageInstance = new MessageConstructor()
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)
下面实现一个简易的 message 弹窗组件
Message/index.vue
<template>
<div class="wrap">
<div class="message" :class="item.type" v-for="item in notices" :key="item._name">
<div class="content">{
{
item.content}}</div>
</div>
</div>
</template>
// 默认选项
const DefaultOptions = {
duration: 1500,
type: 'info',
content: '这是一条提示信息！',
}
let mid = 0
export default {
data() {
return {
notices: []
}
},
methods: {
add(notice = {
}) {
// name标识 用于移除弹窗
let _name = this.getName()
// 合并选项
notice = Object.assign({
_name
}, DefaultOptions, notice)
this.notices.push(notice)
setTimeout(() => {
this.removeNotice(_name)
}, notice.duration)
},
getName() {
return 'msg_' + (mid++)
},
removeNotice(_name) {
let index = this.notices.findIndex(item => item._name === _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 'vue'
import Index from './index.vue'
let messageInstance = null
let MessageConstructor = Vue.extend(Index)
let init = () => {
messageInstance = new MessageConstructor()
messageInstance.$mount()
document.body.appendChild(messageInstance.$el)
}
let caller = (options) => {
if (!messageInstance) {
init(options)
}
messageInstance.add(options)
}
export default {
// 返回 install 函数 用于 Vue.use 注册
install(vue) {
vue.prototype.$message = caller
}
}
main.js
import Message from '@/components/Message/index.js'
Vue.use(Message)
使用
this.$message({
type: 'success',
content: '成功信息提示',
duration: 3000
})
最后
-
更多参考精彩博文请看这里：《陈永佳的博客》
-
喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！