Vue使用
Vue使用的实战总结
liguoyuan819
这个作者很懒,什么都没留下…
展开
-
vite 创建Vue3项目搭建基本框架
Vue3现在已经开始变为Vue的默认版本,总结一下Vite+Vue3+Typescript搭建项目流程。原创 2022-07-27 09:48:00 · 889 阅读 · 0 评论 -
vue的异步数据更新机制与$nextTick
vue异步更新domvue的响应式更新dom是异步执行的,不是数据发生变化之后dom立即发生变化,而是按照一定的逻辑更新dom。具体是vue在检测到数据变化时,vue将开启一个队列,,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这在缓冲中去除重复数据造成的额外的dom操作和计算是非常必要的。在下一个nextTick中,vue执行的是已经去重的实际工作。理解:vue执行dom更新时异步的,这个异步任务可以当成是一个promise的微任务原创 2022-05-30 14:26:41 · 1586 阅读 · 0 评论 -
vite+vue3中使用mock模拟数据
1.安装mockjs和vite-plugin-mocknpm i mockjs vite-plugin-mock --save-dev2.在vite.config.ts文件中配置vite-plugin-mock使用方式import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { viteMockServe } from 'vite-plugin-mock'// https://vitej原创 2022-05-14 15:25:25 · 5818 阅读 · 2 评论 -
Vue3中使用reactive时,后端有返回数据但dom没有更新
问题:在Vue3的setup中使用reactive更新数据,但是dom没有更新问题:代码:<template> <div class="aside"> <div class="collpase-btn" @click="collpaseMenu"> <el-icon><fold /></el-icon> </div> <el-me原创 2022-05-09 15:02:06 · 4613 阅读 · 0 评论 -
Vue中插槽的使用
Vue中的插槽分为匿名插槽、具名插槽、作用域插槽,总结其用法1、默认插槽默认插槽不需要为插槽指定名称,默认会有一个default名称,这种插槽适用于只插入一个内容的时候。在HTML标签中slot:default可以省略写法:slot在HTML标签上时直接写:slot:default当在template标签上时写成v-slot:default 或者#default(此时不可省略)在同一个地方不能出现相同的插槽名,否则编译报错也可以为<slot></slot>..原创 2022-04-18 15:56:19 · 652 阅读 · 0 评论 -
Vuex在Vue3中的使用
在Vue3中使用Vuex的时候,发现与Vue2中的使用方式有所不同,故总结一下1.使用createStore创建sotre文件import { createStore } from 'vuex'export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }, getters:{ }})2.在main.ts原创 2022-04-03 15:45:01 · 1118 阅读 · 0 评论