查看原文
其他

8 个很棒的 Vue 开发技巧

前端大全 2023-03-21

英文:

https://levelup.gitconnected.com/8-awesome-vue-development-tips-661b7631aa47

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 ,
                immaediatetrue
            }
        ]
    },
    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的开发技巧,希望这些小技巧对你有用。

- EOF -


加主页君微信,不仅前端技能+1

主页君日常还会在个人微信分享前端开发学习资源技术文章精选,不定期分享一些有意思的活动岗位内推以及如何用技术做业余项目

加个微信,打开一扇窗



推荐阅读  点击标题可跳转

1、60 个 Vue 常见问题汇总及解决方案

2、我相信这是 Vue3 复用代码的正确姿势!

3、如何突破技术瓶颈(适合P6以下)


觉得本文对你有帮助?请分享给更多人

推荐关注「前端大全」,提升前端技能

点赞和在看就是最大的支持❤️

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存