前端技术社区总目录（订阅之前必须查看该博客）效果预览1：安装依赖npmivue-codemirrornpmi@codemirror/theme-one-darknpmi@codemirror/lang-javascript2：编写代码

前端技术社区总目录（订阅之前请先查看该博客）示例效果Vue3子组件和父组件执行顺序（1）父组件–setup(vue3中替换了beforeCreate,created)（2）父组件–onBeforeMount（3）子组件–setup(vue3中替换了beforeCreate,created)（4）子组件–onBeforeMount（5）子组件–onMounted（6）父组件–onMounted父组件

前端技术社区总目录（订阅之前请先查看该博客）v-if和v-for哪个优先级更高（1）实践中不应该把v-for和v-if放一起，可以包一层template（2）在vue2中，v-for的优先级是高于v-if（3）在vue3中，v-for的优先级是低于v-if组件代码<divv-for=

前端技术社区总目录（订阅之前请先查看该博客）示例效果默认插槽（匿名插槽）插槽slot通常用于两个父子组件之间，最常见的应用就是我们使用一些UI组件库中的弹窗组件时，弹窗组件的内容是可以让我们自定义的，这就是使用了插槽的原理。（1）slot是Vue中的内置标签。（2）slot相当于给子组件挖出了一个槽，可以用来填充内容。（3）父组件中调用子组件时，子组件标签之间的内容元素就是要放置的内容，它会把sl

前端技术社区总目录（订阅之前请先查看该博客）示例效果Pinia简介Pinia是Vue的存储库，它允许您跨组件/页面共享状态。Pinia与Vuex比较（1）Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。（2）pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直

前端技术社区总目录（订阅之前请先查看该博客）示例效果依赖注入Provide/Inject在父子组件传递数据时，通常使用的是props和emit，父传子时，使用的是props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。像这种情况，可以使用provide和inject解决这种问题，不论组件嵌套多深，父组件都可以为所有子组

效果预览一：简介更改element-plus组件样式的几种方式（如：el-table）(1):deep方式：使用该方法，需在根节点内，否则无效。外层html元素建议加class过滤筛选，防止影响其他样式。也可使用“>>>”符号样式区域会生成[data-v-xxxxxxxx]哈希值(2)代码动态修改：使用document动态修改其style样式二：相关代码

前端技术社区总目录（订阅之前请先查看该博客）示例效果EventBus的简介EventBus又称为事件总线。是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都通知到其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”。其具体的思路就是实例化一个空白的Vue，并通过其提供的$on、$once、$emit方法来进行通信。而在Vue3中，上述三个API已经被移除了，

前端技术社区总目录（订阅之前请先查看该博客）效果浏览代码如下：<div:style="

前端技术社区总目录（订阅之前请先查看该博客）效果浏览代码如下<div:class="{'acti

（vue3.x+vite）组件注册并调用1：创建组件目录package，并创建相关工程结构2：编写组件内容（index.vue）3：添加注册组件方法（index.js）4：添加路由

（vue3.x+vite）封装组件一：umd调用方式1：引入umd.js2：编写代码调用（1）umd方式，根据“5

下载脚手架(根据提示进行操作)npminit@vitejs/appvite内部支持less，scss，stylus预处理，不过需要进行本地的下载npminstall-Dsass(less|stylus)在脚手架中起别名(使用别名后，当前方法不会有提示，对IDE不友好)在vite.config.js配置文件中进行操作使用绝对路径image.pngimage.png在页面中引入组件的时候，直接使用im

shims-vue.d.ts不要最外层使用import的语法importdayjsfrom"dayjs";declaremodule'*.vue'{import{DefineComponent}from'vue';constcomponent:DefineComponent;exportdefaultcomponent;}declaremodule'@vue/runtime-core'{expor