B_rabbit_d的博客

MIMO电商平台后台管理系统项目简介基于 Vue3 + Vite2 + Typescript 开发的电子商务平台，组件库使用 element plus；数据为 mock 模拟,登录账号密码随意填写；项目处于快速迭代阶段，请注意分支切换；本项目仅供学习交流使用，不足之处望海涵，欢迎提 issue 交流学习 ━(｀ ∀´)ノ亻!目前已完成模块：登录、首页（管理员/商家）、系统管理系统截图技术栈Vite v2.5.10Vue v3.2.20Typescript v4.1.5Axi

子组件<!-- 子组件 --><template> <!-- teleport 允许我们控制在 DOM 中哪个父节点下呈现 HTML --> <teleport to="body"> <div v-if="modalOpen" class="modal"> <div class="wrapper"> <div class="header"> <b..

在Vue2.X中，我们可以通过 this.$refs.XXX 来获取dom元素，但在Vue3.X中，$refs 被删除，而 setup() 函数的执行时间是在 beforeCreate 之前，这意味着它无法直接获取dom元素，针对这个问题，Vue3.X允许从vue中引入组件生命周期，从而达到获取dom元素的目的，例：<template> <div ref="box">我是div</div></template>import {ref, onMount

VUE2.X双向绑定是通过数据劫持结合发布-订阅者模式实现的，核心是通过 Object.defineProperty() 劫持各个属性值的 getter 和 setter，在数据变动时发布消息给订阅者，从而触发相应的监听回调，而VUE3.X则是通过ES6的 Proxy 对象实现的。什么是 ProxyProxy 意为代理，它是 js 的内置对象，用于拦截和更改对象相关的不同操作行为，不支持 IE 和 Safari <10 的版本。let obj = {name: 'zs', age: 18};

创建项目Vite（推荐使用）Vite 是一款作者意图取代 webpack 的工具，目前仅为 vue3 提供服务，同样支持热更新其工作原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求并做一些预编译，从而省去 webpack 冗长的打包时间$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm run devVue-Cli（使用前请务必升级）$..

VUE3.X——模板指令v-modelprop和event的默认名称更改：value -> modelValue input -> update:modelValue移除 v-bind 的 .sync 修饰符与组件的 model ，并替换为 v-model3.x版本下的 v-model 可以在同一个组件上进行多个绑定添加了创建自定义 v-model 修饰符的功能2.X语法<!-- parent -->this.$emit('update:title

VUE 3.X笔记（递归监听与非递归监听）递归监听Vue3.X是通过ES6的 Proxy 实现数据的双向绑定（即只有包装成 Proxy 的数据才会主动更新视图），即它会把 ref 和 reactive 的所有子节点包装成 Proxy 并进行视图更新，因此，如果数据量过大，递归监听会非常消耗性能，例：<template> <ul> <li>{{ test.a }}</li> <li>{{ test.gf.b }}&l

Vue3.X笔记——Composition API2.X存在的问题Vue3.X兼容2.X的写法，在2.X写法上，我们发现同一功能的业务逻辑非常分散，例如实现删除功能所需的数据放在 data 里，实现该功能的方法可能放在 methods 里，也有可能放在 computed 或 watch 里，在大项目中会造成后期维护困难，例如：<script>export default { name: 'App', data() { return { msg: '模块一'

VUE3.X笔记——reactive 与 refreactivereactive 是 Vue3.X中提供的实现数据响应的方法，Vue2.X实现数据响应的核心是 Object.defineProperty() ，而Vue3.X数据响应是通过ES6的 Proxy 来实现的reactive 的参数必须是对象（json/arr），否则无法被包装成 Proxy，数据不响应如果给 reactive 传递其他对象，直接修改当前对象页面不会更新，想要更新必须重新赋值，例如：setup() {

VUE3.X学习笔记起步起步官网：Vue3官方文档创建项目Vite（推荐使用）Vite 是一款作者意图取代 webpack 的工具，目前仅为 vue3 提供服务，同样支持热更新其工作原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求并做一些预编译，从而省去 webpack 冗长的打包时间$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm