分享 8 个实用的 Vue 开发技巧，建议收藏！ - 网站源码_资源分享

那时给我们撷取8个新颖的Vue合作开发基本功，让你的组织工作显得更高效率~

1.路由器模块解耦

一般来说在模块中采用路由器模块，绝大多数人能做下列事。

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 } }}

您还能透过功能模式返回道具。

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

2.功能模块

功能模块是无状态的，它不能被实例化，也没有任何生命周期或方法。创建功能模块也很简单，只需在模板中添加功能声明即可。

它一般适用于只依赖于外部数据变化的模块，并且由于其轻量级而提高了渲染性能。

模块需要的一切都透过上下文模块传递。它是一个上下文对象，具体特性见文档。这里的 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.vueexport default { components: { List }, data() { return { list: [{ title: title , content: content }], currentItem: } }}

3.样式范围

合作开发中修改第三方模块样式很常见，但是由于scoped特性的样式隔离，可能需要去掉scoped或者另起一个样式。这些作法有副作用（模块样式污染，缺乏优雅），在css预处理器中采用样式渗透来生效。

我们能采用 >>> 或者 /deep/ 为丛藓科扭口藓决这个问题：

4.watch的高级采用

watch 在监听器特性发生变化时触发，有时我们希望 watch 在模块创建后立即执行。

可能想到的方式是在创建生命周期中调用它一次，但这不是一种优雅的编写方式，所以也许我们能采用这样的东西。

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

Deep Listening

监听一个对象时，当对象外部的特性发生变化时，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) } }}

5.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 } }}

6.事件模块$event

$event 是事件对象的一个特殊变量，它在这类场景下为我们提供了更多的可用模块来实现复杂的功能。

本机事件：与本机事件中的默认事件对象行为相同。

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

自定义事件：在自定义事件中表示为捕获从子模块抛出的值。

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

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

7.程序化事件监听器

例如，在页面挂载时定义一个定时器，需要在页面销毁时清除定时

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) }) }}

采用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。

8.监听模块生命周期

一般来说我们采用 $emit 监听模块生命周期，父模块转交事件进行通知。

子模块

export default { mounted() { this.$emit( listenMounted ) }}

父模块

其实有一种简单的方法就是采用@hook 来监听模块的生命周期，而不需要在模块内部做任何改动。同样，创建、更新等也能采用这个方法。

以上就是我那时撷取的8个关于Vue的合作开发基本功，希望这些小基本功对你有用。