本篇文章整理分享8 个很棒的 Vue 开发技巧，包括路由参数解耦、功能组件、样式范围、watch的高级使用、watch监听多个变量等，希望对大家有所帮助！
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 参数。【相关推荐：vuejs视频教程、web前端开发】
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 是一个包含所有绑定属性的对象。
{{item.title}}
{{item.content}}
登录后复制父组件使用
登录后复制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.程序化事件监听器
例如，在页面挂载时定义一个定时器，需要在页面销毁时清除定时器。这似乎不是问题。但仔细观察，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 ) }}登录后复制父组件
登录后复制其实有一种简单的方法就是使用@hook 来监听组件的生命周期，而不需要在组件内部做任何改动。同样，创建、更新等也可以使用这个方法。
登录后复制（学习视频分享：vuejs入门教程、编程基础视频）
以上就是【整理分享】8 个实用Vue开发技巧的详细内容，更多请关注php中文网其它相关文章！
