Vue开发小技巧

最新推荐文章于 2022-02-26 13:03:22 发布

攻城狮Lee丶

最新推荐文章于 2022-02-26 13:03:22 发布

阅读量2.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JavaScript武器库 Vue.js

本文链接：https://blog.csdn.net/zhuoganliwanjin/article/details/102546639

Vue.js 同时被 2 个专栏收录

39 篇文章 ¥19.90 ¥99.00

订阅专栏

JavaScript武器库

75 篇文章

订阅专栏

本文总结了36个Vue.js开发中的实用技巧，包括require.context()的使用，watch的深入理解，组件间14种通信方式如props、$emit、Vuex等，以及Vue的高级特性如render函数、异步组件、动态组件和递归组件。此外，还涵盖了Vue的路由管理、调试技巧、vue-loader配置优化和Vue 3.x的相关信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;
所以应该趁还没出来加紧打好 Vue2.x 的基础;
Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;
后续 Vue 3.x 出来后持续更新.

1.require.context()

1.场景:如页面需要导入多个组件,原始写法:

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}

2.这样就写了大量重复的代码,利用 require.context 可以写成

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).def

了解本专栏