10个Vue开发技巧助你成为前端大神

可莉
• 阅读 527

10个Vue开发技巧助你成为前端大神

路由参数解耦

一般在组件内使用路由参数,大多数人会这样做:

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

         }) 

     }] 

 })

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

函数式组件

函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 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: '' 

             } 

         } 

}

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

样式穿透

在开发中修改第三方组件样式是很常见,但由于 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)

        }

    }

}

文档:https://cn.vuejs.org/v2/api/#watch

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 选项,自定义绑定的变量和事件

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

})

618年中大促来啦!

最高立减2800元+零基础新班开班!

▼▼

10个Vue开发技巧助你成为前端大神

10个Vue开发技巧助你成为前端大神

本文分享自微信公众号 - 前端研究所(WEBqdyjs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这