在日常开发过程中,建议童鞋们收藏一些开发的小技巧,这样便于我们在开发项目的时候能够用到,可以节约时间成本。
今天小编给大家分享一些平时收藏的Vue开发小技巧,往下看吧!
状态共享
随着组件的细化,就会遇到多组件状态共享的状况,Vuex固然能够解决这类问题,不过就像Vuex官方文档所说的,若是应用不够大,为避免代码繁琐冗余,最好不要使用它,今天咱们介绍的是vue.js 2.6新增长的Observable API ,经过使用这个api咱们能够应对一些简单的跨组件数据状态共享的状况。
以下这个例子,咱们将在组件外建立一个store,而后在App.vue组件里面使用store.js提供的store和mutation方法,同理其它组件也能够这样使用,从而实现多个组件共享数据状态。
首先建立一个store.js,包含一个store和一个mutations,分别用来指向数据和处理方法。
import Vue from"vue";export const store = Vue.observable({ count: 0 });export const mutations = { setCount(count) { store.count = count; } };
而后在App.vue里面引入这个store.js,在组件里面使用引入的数据和方法。
长列表性能优化
咱们应该都知道vue会经过object.defineProperty对数据进行劫持,来实现视图响应数据的变化,然而有些时候咱们的组件就是纯粹的数据展现,不会有任何改变,咱们就不须要vue来劫持咱们的数据,在大量数据展现的状况下,这可以很明显的减小组件初始化的时间,那如何禁止vue劫持咱们的数据呢?能够经过object.freeze方法来冻结一个对象,一旦被冻结的对象就不再能被修改了。
export default { data: () => ({ users: {} }), async created() { const users = await axios.get("/api/users"); this.users = Object.freeze(users); } };
另外须要说明的是,这里只是冻结了users的值,引用不会被冻结,当咱们须要reactive数据的时候,咱们能够从新给users赋值。
export default { data: () => ({ users: {} }), async created() { const users = await axios.get("/api/users"); this.users = Object.freeze(users); }, methods:{ // 改變值不會觸發視圖響應this.data.users[0] = newValue // 改變引用依然會觸發視圖響應this.data.users = newArray } };
去除多余的样式
随着项目愈来愈大,书写的不注意,不天然的就会产生一些多余的css,小项目还好,一旦项目大了之后,多余的css会愈来愈多,致使包愈来愈大,从而影响项目运行性能,因此有必要在正式环境去除掉这些多余的css,这里推荐一个库purgecss,支持CLI、JavascriptApi、Webpack等多种方式使用,经过这个库,咱们能够很容易的去除掉多余的css。
<h1>Hello Vanilla!</h1><div> We use Parcel to bundle this sandbox, you can find more info about Parcel <ahref="https://parceljs.org"target="_blank"rel="noopener noreferrer">here</a>. </div> body { font-family: sans-serif; } a { color: red; } ul { li { list-style: none; } } import Purgecss from"purgecss"; const purgecss = new Purgecss({ content: ["**/*.html"], css: ["**/*.css"] }); const purgec***esult = purgecss.purge();
监听组件的生命周期
好比有父组件Parent和子组件Child,若是父组件监听到子组件挂载mounted就作一些逻辑处理,常规的写法可能以下:
// Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); }
这里提供一种特别简单的方式,子组件不须要任何处理,只须要在父组件引用的时候经过@hook来监听便可,代码重写以下:
<Child @hook:mounted="doSomething"/> <Child @hook:updated="doSomething"/>
固然这里不只仅是能够监听mounted,其它的生命周期事件,例如:created,updated等均可以,是否是特别方便~
再好比平时的绑定卸载事件:
window.addEventListener('resize',this.handleResize) this.$on('hook:destroyed',() => { window.removeventListener('resize',this.handleResize) })
Watch的初始当即执行
当 watch 一个变量的时候,初始化时并不会执行,以下面的例子,你须要在created的时候手动调用一次。
created() { this.fetchUserList(); }, watch: { searchText: 'fetchUserList', }
上面这样的作法可使用,但很麻烦,咱们能够添加immediate属性,这样初始化的时候就会自动触发(不用再写created去调用了),而后上面的代码就能简化为:
watch: { searchText: { handler: 'fetchUserList', immediate: true } }
路由参数解耦
一般在组件内使用路由参数,大多数人会这样做:
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 }) }] })
函数式组件
函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 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++) } } }
手动挂载组件
在一些需求中,手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件,最理想的用法是通过命令式调用,就像 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 })
总结
好啦,本次分享的Vue开发小技巧就这么多了,后面还会继续分享,请关注Web前端之家哟!如果您有想知道的问题,都可以留言或者加Q群讨论。
网友评论文明上网理性发言 已有1人参与
发表评论:
评论列表