vue
文章平均质量分 54
小螃蟹er
永远相信,美好的事情即将发生。
展开
-
vue3之shallowRef以及使用对element-plus table的优化尝试
element-plus table 的 ref 替换 shallowRef 后发现表格减少了大概60%~70%的渲染时间,而且数据量越大渲染时间越久,视觉效果也就更明显。shallowReactive只会响应第一层的数据,大部分的表格数据结构也都能适用,如果遇到表格数据中还有对象的形式,也就是得使用ref的形式了那么又一个想法来了,那我是不是可以做成属性控制的呢?深层响应、浅层响应,外部属性传值控制就好了,默认内部shallowRef,如有特殊需要就ref。原创 2023-04-01 20:50:42 · 1644 阅读 · 0 评论 -
解决vue-router重复点击报错问题
解决vue-router重复点击报错问题在index.js路由配置文件```javascriptimport Vue from 'vue'import Router from 'vue-router'//解决vue-router重复点击报错问题(this.$router.replace())const originalPush = Router.prototype.replace;Router.prototype.replace = function replace(location) {原创 2021-05-20 14:23:35 · 372 阅读 · 0 评论 -
vue项目中遇到的一些问题和解决办法
自己平时开发笔记使用1、vue 生命周期 beforeDestroy 和 destroyed 调用情境一:离开当前路由,会直接调用;当前路由不使用 缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁情景二:离开当前路由,不会直接调用,需要程序控制调用;当前路由使用 缓存,离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁,需要使用路由钩子函数主动的调用beforeRouteLeave(to, from, next原创 2020-10-13 17:25:45 · 675 阅读 · 0 评论 -
vue项目性能优化(汇总)
Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。一、基础优化(代码以及编码规范)1、v-if 和 v-sh......原创 2020-01-16 10:27:43 · 2312 阅读 · 2 评论 -
通过几个面试题剖析vue源码
1. 说一下对MVVM原理的理解传统的MVC指的是,用户操作会请求服务器路由,路由会调用对应的控制器来处理,控制器会获取数据,将结果返回给前端,页面重新渲染MVVM:Model是数据模型;view代表UI组件界面视图;viewModel监听数据模型和控制视图行为,通过双向数据绑定把view和model连接起来,开发者只需要关注业务逻辑,不用手动操作DOM,数据状态的维护完全由MVVM来管理2. 响应式数据原理采用数据劫持结合 发布-订阅者模式,通过Object.definePrope原创 2020-07-13 15:03:27 · 323 阅读 · 0 评论 -
ES6中的Proxy和Reflect实现简单的数据双向绑定
利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>proxy</title></head><body>...原创 2019-12-10 17:09:19 · 253 阅读 · 0 评论 -
Vue cli 3的配置 vue.config.js(持续更新)
最近安装了下vue cli3版本, 和vue cli2 相比文件目录少了很多配置,没有了build和config目录,那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢,vue cli3 可以在项目根目录新建一个vue.config.js文件,像之前的很多繁琐配置,都可以在这个文件里配置啦。官方是这样说的。vue.config.js 是一个可选......原创 2019-08-01 16:24:17 · 1050 阅读 · 0 评论 -
vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
(转自:https://www.cnblogs.com/skylineStar/p/10036525.html)公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑...转载 2019-07-08 13:41:24 · 4747 阅读 · 7 评论 -
深入理解Vue组件3大核心概念
title: 深入理解Vue组件3大核心概念date: 2019-06-25 11:00:07tags: [vue]categories: 深入理解Vue组件3大核心概念深入理解Vue组件3大核心概念前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。一...转载 2019-06-25 13:14:46 · 187 阅读 · 0 评论 -
vue移动端项目,屏幕适配方法,rem
title: vue移动端项目,屏幕适配方法,remdate: 2018-10-16 20:25:33tags: [vue,移动端]categories: vue整理亲测有效,大家可以试试。使用的是vue-cli搭建的webpack项目,然后按步骤一步一步走下去就成功了1.终端中输入npm i lib-flexible --save2.终端中输入npm i px2rem-lo...转载 2018-10-16 21:07:17 · 2164 阅读 · 0 评论 -
webpack-dev-conf r.js文件,如何进行后台数据模拟?
参照了别人写的记录一下最新的vue里dev-server.js被替换成了webpack-dev-conf.js在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步,在const portfinder = require(‘portfinder’)后添加//第一步const express = require('express')const app...转载 2018-04-03 17:38:27 · 492 阅读 · 0 评论