关于前端: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.vue
export default {

components: {List},
data() {
    return {
        list: [{
            title:  title ,
            content:  content
        }],
        currentItem:
    }
}

}
3. 款式范畴开发中批改第三方组件款式很常见，然而因为 scoped 属性的款式隔离，可能须要去掉 scoped 或者另起一个款式。这些做法有副作用（组件款式净化，不足优雅），在 css 预处理器中应用款式浸透来失效。咱们能够应用 >>> 或者 /deep/ 来解决这个问题：

<style scoped>
Outer layer >>> .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>
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 是事件对象的一个非凡变量，它在某些场景下为咱们提供了更多的可用参数来实现简单的性能。本机事件：与本机事件中的默认事件对象行为雷同。

<template>

<div>
    <input type="text" @input="inputHandler(hello , $event)" />
</div>

</template>
export default {

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

}
自定义事件：在自定义事件中示意为捕捉从子组件抛出的值。

export default {

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

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

}
7. 程序化事件监听器例如，在页面挂载时定义一个定时器，须要在页面销毁时革除定时器。这仿佛不是问题。但仔细观察，this.timer 的惟一目标是可能在 beforeDestroy 中获取计时器编号，否则是无用的。

export default {

mounted() {this.timer = setInterval(() => {console.log(Date.now())
    }, 1000)
},
beforeDestroy() {clearInterval(this.timer)
}

}
如果可能，最好只拜访生命周期挂钩。这不是一个重大的问题，但能够认为是凌乱。咱们能够通过应用
或
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)
}

}
父组件

<template>

<div>
    <List @listenMounted="listenMounted" />
</div>

</template>
其实有一种简略的办法就是应用 @hook 来监听组件的生命周期，而不须要在组件外部做任何改变。同样，创立、更新等也能够应用这个办法。

<template>

<List @hook:mounted="listenMounted" />

</template>
总结以上就是我明天跟你分享的 8 个对于 Vue 的开发技巧，心愿这些小技巧对你有用。