Vue3.0
关注
分享
扫一扫
Vue3.0
静尾
前端开发工程师
展开
-
Object.assign()解决vue2中对象新增属性不是响应式问题的原理
将源对象和要加入属性的对象合并为一个新的对象赋值给要响应式的对象（源对象），vue会将源对象重新触发一遍Object.defineProperty依赖收集。原创 2022-12-07 10:11:43 · 2226 阅读 · 0 评论 -
Element-plus Notification 自定义动态图标
自定义动态图标原创 2022-07-29 09:39:35 · 2811 阅读 · 1 评论 -
Element-plus Upload组件 文件同表单一起上传的处理
vite + vue3 + ts原创 2022-07-27 17:52:10 · 6860 阅读 · 7 评论 -
Element-plus中el-image组件图片预览功能顺序校正
我想实现点击哪个图片就预览哪个图片，而不是官方示例中通过指定哪一张图片为第一张。通常我们的图片数据是一个数组，然后通过来循环渲染，那么我们就可以利用来为每一项的属性动态赋值。这样就可以实现每个的属性值刚好是它的“位置”值。...原创 2022-07-12 16:13:02 · 3276 阅读 · 2 评论 -
Vue性能优化方案——个人经验总结
Vue性能优化方案——个人经验总结谨慎使用深度监听善于使用\props与emit验证减小项目体积provide和inject善用异步加载“慎用”Vuex功能重用仅传递必要的数据设计模块分类SSR/SSGv-for优化善用v-once列表虚拟化非反应性减少组件谨慎使用深度监听这在用于大型数据结构时性能消耗较大，仅在必要时使用。export default { watch: { someObject: { handler(newValue, oldValue) { },原创 2022-05-08 17:08:18 · 2834 阅读 · 0 评论 -
Vue3的性能提升主要是通过哪几方面体现的？
javascript -> typescriptVue3相较于Vue2，其使用TypeScript完全重写了vue源码，ts的优势不用多说，它带来的类型检查的能力不论是对于vue内部还是项目本身，都很大程度上的减少了代码错误出现频率，进而提升了整体的项目质量与性能。Object.defineProperty -> ProxyVue2采用Object.defineProperty实现的响应式，虽然实现了响应式，但其有一定的限制，比如无法检测到新的属性添加，且处理大型数据结构时性能并不理想。原创 2022-04-26 15:43:43 · 705 阅读 · 0 评论 -
Vue3在css中使用js变量及其原理解读
Vue3在css中使用js变量及其原理解读实现原理首先css中是有变量的，可以像js变量一样在style中使用，然后Vue3支持将js中的变量传入style中，相当于在css中创建了同名的变量，值绑定到js变量上，后续会跟着js中的变量一同响应式变化。CSS变量介绍CSS变量的声明方式：--color: red;CSS变量的使用方式：h1 { color: var(--color); }作用域：body { --color: red; } h1 { color:原创 2022-04-26 14:53:09 · 11191 阅读 · 5 评论 -
Vue3是如何升级虚拟DOM模块的？
Vue3是如何升级虚拟DOM模块的？静态标记（PatchFlag）在Vue2中，元素的更新比较是采用的全量对比的方式，虽然借鉴了react的diff算法中同级对比的方式进行了优化，但依然会对比部分静态节点，这明显还有优化空间。所以在Vue3中采用了静态标记（PatchFlag）的方式对这部分进行优化。在render函数中就将每个节点进行分析，为动态节点进行标记，标明该节点是未来有可能变化的节点（即动态节点）；并且PatchFlag枚举定义了十几种类型，更精确的定位需要对比节点的类型。现有如下DOM结原创 2022-04-26 14:14:06 · 1648 阅读 · 0 评论 -
Vue3响应式原理实现（包括ref、reactive、computed实现原理）
Vue3响应式原理实现（包括ref、reactive、computed实现原理）Vue3摒弃了Vue2的Object.defineProperty的方式来实现响应式，而是拥抱未来，采用了ES6的Proxy。这也解决了Vue2中的一些响应式问题，包括响应式对象新增的属性不是响应式的问题。代码较长，但注释完全，相信看完会有很多收获，共勉！code：// targetMap用于存放所有响应式对象；// weakMap相较于Map的优势：1. key必须是对象；2. 对其键是弱引用，不影响作为key的对原创 2022-04-20 17:38:13 · 1553 阅读 · 0 评论 -
为Element框架的＜el-select/＞组件添加输入校验
为Element框架的组件添加输入校验需求分析：<el-select filterable>...</el-select>组件为可输入搜索字段的选择框，但组件知道的@change事件并不会为输入进行事件触发，但需求需要为其进行输入校验。解决方法：首先找到组件里面的<input>元素。然后为其只读属性设置为false。最后为其添加input事件，并设置执行函数。代码展示：<template> <div class="countries-s原创 2021-05-31 10:47:27 · 2300 阅读 · 0 评论 -
包含Echarts的模块多处引用导致显示异常问题的解决方案
包含Echarts的模块多处引用导致显示异常问题的解决方案业务场景：一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示两处Echarts图表数据传输没问题问题原因：多次引用在同一个大型项目中，会导致id为myChart的Echarts图表容器出现两次，每次执行this.myChart = echarts.init(document.原创 2021-05-28 16:28:22 · 2093 阅读 · 0 评论 -
js使用webWorker实现多线程
js使用webWorker实现多线程原生js使用workerindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=dev原创 2021-05-28 15:01:06 · 1834 阅读 · 3 评论 -
Vue监听vuex中对象属性变化的方法
Vue监听vuex中对象属性变化的方法需求分析：store中有一个空对象monitorGetTargetList页面上有多个按钮，每个按钮都有一个id点击某个按钮之后，每隔一秒计算出一个数据，需要传到store的monitorGetTargetList中，并放到对应按钮的id中解决方法：普通的vuex监听不能监听到对象中的属性以及属性值的变化，所以需要借助Object.assign()来实现注：Object.assign()方法接收多个参数，第一个参数为目标对象，第二个及其以后的参数为源对象原创 2021-05-28 08:50:17 · 3959 阅读 · 0 评论 -
解决v-infinite-scroll功能在更新数据时也触发加载函数
解决v-infinite-scroll功能在更新数据时也触发加载函数问题描述：一个需要懒加载的列表tbody，为其添加了v-infinite-scroll="load"来实现懒加载，但在我更新tbody中的内容时，依然会触发load函数，而且不止一次。问题原因：v-infinite-scroll方法会默认tbody初始化时执行。问题解决：使用infinite-scroll-immediate="false"来禁用懒加载在tbody初始化时执行。代码：<tbody class原创 2021-05-08 14:21:29 · 1627 阅读 · 0 评论 -
Vue3解决ref赋值为require(‘‘)时数据无法响应问题
Vue3解决ref赋值为require(’’)时数据无法响应问题问题代码：const useIcon = () => { let iconSrc = ref(''); let setupModelShow = ref(false); iconSrc = require('../assets/img/url.png'); const handleServe = () => { iconSrc = setupModelShow.value ? r原创 2021-04-27 10:11:31 · 3947 阅读 · 0 评论 -
vue中的事件总线：$bus
vue中的事件总线：$bus解决的问题：无关组件之间的交互问题（也可以使用vuex）使用方法：1.创建事件总线：Vue.prototype.$bus = new Vue();2.触发事件并传参：this.$bus.$emit(event, this.event);// 触发事件（事件名，参数）this.$bus.$emit(event);// 触发event事件3.监听事件event并收参data：this.$bus.$on(event, (data) => { consol原创 2021-04-20 18:01:28 · 1528 阅读 · 0 评论 -
Cesium中绘制矩形，根据四角/对角坐标绘制矩形
Cesium中绘制矩形，根据四角/对角坐标绘制矩形import store from '@/store/index'import * as Cesium from 'cesium'export default function createReactangleArea(cesium: any) { const rectangleCoord: any = store.state.rectangle; return cesium.entities.add({ name:原创 2021-04-15 17:34:36 · 2699 阅读 · 0 评论 -
JS将内存中的数据下载到本地（.json .txt）
JS将内存中的数据下载到本地（.json .txt）原理：创建一个a标签为a标签设置download属性，属性值为下载的文件名（注：文件名后缀是什么，下载的文件类型就是什么，如a.json a.txt，更好的实践是可用时间戳+后缀命名）将a标签的display设为none将数据转为JSON格式存到二进制对象Blob的一个实例中将a标签插入到页面中在a标签上模拟点击事件删除a标签实践：export default function (fileName: string, fileMs原创 2021-04-15 16:40:49 · 1271 阅读 · 0 评论 -
js如何判断点击元素是否是某一父元素的子元素
js如何判断点击元素是否是某一父元素的子元素解决办法：parentNode.contains(childNode)举例：vue中，判断当前点击的元素是否为this.$refs.nabiation的子元素document.addEventListener('click', (event) => { console.log(this.$refs.naviation !== event.target && this.$refs.navigation.contains(event原创 2021-04-14 17:35:38 · 4019 阅读 · 0 评论 -
使用axios发起post请求时报错405的解决办法（亲测有效）
使用axios发起post请求时报错415的解决办法在引入axios处添加一行代码指明数据类型：import axios from 'axios'axios.defaults.headers.post['Content-Type'] = 'application/json';扩展：造成415错误的方式大概有两种：数据请求的 contentType 与后端不一致要发送的数据格式不正确...原创 2021-04-14 16:50:11 · 8160 阅读 · 3 评论 -
监听vuex中数据变化
监听vuex中数据变化首先在computed中将要监听的vuex数据返回；然后在watch中监听computed中的属性：computed: { orbital() { return this.$store.state.orbital; } }, watch: { orbital: { immediate: true,//true代表如果在wacth里声明了之后就会立即执行里面的handler方法 handler: function (newVal)原创 2021-04-14 13:28:36 · 1231 阅读 · 0 评论 -
Property ‘$store‘ does not exist on type ‘CreateComponentPublicInstance的解决办法
Property ‘$store’ does not exist on type 'CreateComponentPublicInstance的解决办法项目：vue3 + Typescriyt + Vuex问题原因：Vuex不提供开箱即用的this.$store属性类型。与TypeScript一起使用时，必须声明自己的模块扩充。解决办法：在src文件夹下新建文件夹vue.d.ts，内容为：// vuex.d.tsimport { ComponentCustomProperties } from '原创 2021-04-14 13:16:01 · 9465 阅读 · 3 评论 -
Vue3学习笔记
Vue3学习笔记setup = data + methods + computedsteleport组件：将其内部内容转移到目标元素中suspense组件：加载异步组件createApp()：创建新实例不要再选项property或回调上使用箭头函数，因其没有this，导致报错v-once：数据改变时，插值处的内容不会更新<span v-once>这个将不会改变: {{ msg }}</span>v-html：双大括号会将数据解释为原创 2021-04-13 17:07:27 · 374 阅读 · 0 评论 -
解决v-cloak不起作用问题
解决v-cloak不起作用问题vue-cloak可以解决vue变量未渲染前代码显示问题：[v-cloak] { display: none;}<div v-cloak>{{msg}}</div>但仍然有vue渲染前出现{{msg}}问题问题原因：[v-cloak]的css权重不够问题解决：[v-cloak] { display: none !important;}问题完美解决...原创 2021-02-05 15:37:18 · 2367 阅读 · 2 评论 -
vue.config.js
const path = require("path");module.exports = { // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致 publicPath: "./", // 输出文件目录 outputDir: "dist", // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler:原创 2021-02-01 22:21:16 · 202 阅读 · 0 评论