组件的生命周期是指：组件从 创建 → 运行（渲染）→ 销毁 的整个过程 完整的生命周期：
父子组件： props（父传子） $emit/$on（子传父） $on已被Vue3废弃 $parent/$children $children已被Vue3废弃 ref 隔代组件： 透传：$attrs/$listeners $listners已被Vue3废弃 Vuex provide+inject组合api（Vue3） eventBus（Vue3不推荐使用）
vue两种快速创建工程化SPA（单页面应用）项目的方法： vite：仅支持vue3；运行速度快；不是基于webpack打包 vue-cli：vue2、vue3都支持；运行速度较慢；基于webpack打包 用vite创建项目：npm init vite-app 项目名 进入项目文件：cd 项目文件 安装所有依赖包：npm install 启动项目：npm run dev 项
1.onBeforeRouteUpdate路由守卫 import { useRouter, onBeforeRouteUpdate } from 'vue-router' let route = useRouter() onBeforeRouteUpdate(to=>{ console.log('to :>> ', to); }) 2.watch监听 import { useRouter, onBeforeRouteUpd
按照vite的文档： https://vitejs.cn/guide/#scaffolding-your-first-vite-project npm init vite@latest 这里选择vue 这里还是选择vue，ts语法还不太熟练，就先不选了 最后 安装即可。 目的：熟悉vue3写法
背景 有的情况我们需要根据echarts展示的数据查看对应的明细，查看明细的方式可能是向后端发送网络请求或者是后端早已经把数据全部发送给前端、由前端自己去做筛选，那么我们可以根据echarts提供的事件去处理逻辑 步骤 vue3中引入echarts import { createApp } from "vue"; import Ap
问题： 使用reactive定义的数组响应式失效： 原因： 直接把一个新的数组赋值给addressList,导致reactive声明的响应式对象由addressList代理 被新的数组所替代,因为在操作代理对象的时候需要有代理对象作为前提,所以失去了响应式 在vue3中不管是对象还是数组都不能直接将整个数据进
# 使用方法 将异步组件包装在<template #default>标记中 在我们的Async组件的旁边添加一个兄弟姐妹，标签为<template #fallback> 用来显示异步加载时的提示动画等 将两个组件都包装在<suspense>组件中
vue3-admin-template 项目地址：vue3-admin-template 能拿来直接开发项目，不需要考虑格式化配置、打包编译优化等等，难道它不香吗？~~ 此项目是集成vue3 + vite + Element-Plus + Pinia + vue-router的后台管理系统的模板工程。 即开即用，提供初创团队或新项目专注于快速启动和开发交易
复习作用域插槽 父组件可以给子组件（具有插槽的组件）传递值，并且这个值可以随意使用： MyComponent.vue： <script> import { ref } from 'vue'; let greetingMessage = ref("Hello Vue!"); let num = ref(1); </script> <template> <div class="my-component"
1 父组件传递给子组件 父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值。 <template> <div class="layout"> <Menu v-bind:data="data" title="我是标题"></Menu> // 传递字符串的时候可以不需要v-bind，传递非字符串类型需要加v-bind
Vue3 之组件 v-model 在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件： 父组件 <template> <!-- 父组件--> <p> 在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:model
前言 vue3发布以来经历两年风头正盛，现在大有和react 平分秋色的势头，我们知道他是基于proxy 实现响应式的能力， 解决了vue2所遗留下来的一些问题，同时也正由于proxy的特性，也提高了运行时的性能 凡事有利有弊， proxy虽然无敌，但是他也有本身的局限，从而产生一些我认为的弊端（其实就是不
vue3 hooks使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，就算没用过也一定了解过，也就是混入，通过 mixin 混入来分发 vue 组件中的可复用功能。一个混入对象可以包含任意组
Vue3 Pinia使用 在学习 Vue2 的宝子们一定都知道，在 vue2 版本中，如果想要使用状态管理器，那么一定是集成 Vuex，首先说明一点，Vuex 在 vue3 项目中依旧是可以正常使用的，是 vue 项目的正规军。但是，今天我们学习一下小菠萝，Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3
初始创建vue项目时，开启了eslint，没想到编码不规范造成了编译不成功，又想关掉。看了很多资料都是vue2的，在vue3中应该打开eslintrc.js修改配置，如下： 将里面的 'plugin:vue/vue3-essential', 注释掉，就可。
使用element-plus时，遇到icon图标与文字不对齐的情况，可以使用flex布局使其对齐，设置相同字体尺寸使其美观。 为方便使用，可以封装一下 新建一个vue文件IconText.vue <script setup> import { computed } from '@vue/reactivity' defineProps(['icon', 'text']) </script> <template>
provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。 VUE provide 和 inject 使用场景 当我们需要从父组件向子组件传递数据时，我们使用 props。 而一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。 若仍然将 prop 沿着组件链逐级传递下
如果你的vue2代码之前是使用vue-class-component 类组件模式写的。选择可以使用 https://github.com/facing-dev/vue-facing-decorator 来进行低成本的升级，但是升级难度还是蛮大的。 如果你之前的vue2 版本使用的是 @vue/composition-api，那么 Vue Demi 以后可以无缝升级vue3.
之前a-hooks：https://ahooks.js.org/，比react-use 精简好用。但是没有vue版本的。 网上有个人实现的:https://github.com/dewfall123/ahooks-vue 但是vue，还是选择vue-use好点。 VueUse 是一个基于 Composition API 的实用函数集, 与 Composition API 的配合相得益彰 VueUse 的作
随着VsCode开源免费，丰富的插件，也是深受前端开发人员爱戴，在我们使用VsCode开发vue2的时候经常会下载一个插件vetur ，帮我们提供良好的代码智能提示 在当vue3.2发布完之后 vetur 并不能给我们提供良好的代码提示，所以volar顺应而生 Volar 与vetur相同，volar是一个针对vue的vscode插件，不
项目一：Vue3-TypeScript 电商后台管理 一、技术栈涉及 Vue3 TypeScript axios vue-router element-plus node.js 二、项目概述 界面展示 登陆页面 商品管理 用户列表 员工信息编辑 职位编辑 修改权限界面（隐藏路由） 本地接口数据 功能 * 实现登陆路由拦截，获取token后才能实
生命周期： 整体变化不大，只是大部分生命周期钩子前+"on"，功能是类似的。需要注意的是，Vue3在组合式API中使用生命周期钩子时需要先引入，Vue2在选项API中是可以直接使用的。 //Vue3 <script setup> import {{生命周期钩子}} from 'vue' 生命周期钩子(() => {}) //可以将不同
父组件： <template> <Headler title="我是父组件传递的值" :list="list"></Headler> <div class="content"> <Menu></Menu> <Content></Content> </div> </template> <scr
首先下载安装vuex ,命令：npm i vuex接着在src文件夹下创建store文件夹，在store文件夹下继续创建index.js，该文件用于创建Vuex中最为核心的storeVue2中的使用：在index.js中加入以下代码 import Vue from 'vue' import Vuex from 'vuex' // 引入Vuex Vue.use(Vuex) // 应用Vuex插件 con
