随笔分类 - vue
Vue SSR 组件加载：Node 端渲染提示 window/document 没有定义
摘要：业务场景 首先来看一个简单的 Vue 组件test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export defa
阅读全文
vue中和react中key的用法
摘要：我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。 vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不
阅读全文
手写MVVM
摘要：// 创建一个Mvvm构造函数 // 这里用es6方法将options赋一个初始值，防止没传，等同于options || {} function Mvvm(options = {}) { // vm.$options Vue上是将所有属性挂载到上面 // 所以我们也同样实现,将所有属性挂载到了$op
阅读全文
虚拟dom和real dom区别
摘要：Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构， Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。 区别： 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改，然后一次性比较
阅读全文
移动Web App开发之实战美团外卖
摘要：第1章 课程介绍通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。1-1 课程导学第2章 移动web硬知识点本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动
阅读全文
chrome89不再支持/deep/的解决方案： css-loader-deep-remove
摘要：解决方案： 大家可以用这个插件，css-loader-deep-remove 代替css-loader https://www.npmjs.com/package/css-loader-deep-remove 发现使用chrome最新版（v89），有个别样式出现了问题，排查定位后发现是有些错误地嵌套
阅读全文
前端甘特图dhtmx-gantt
摘要：一、背景 公司业务需要，管理层做项目管理就会制定项目计划，为了更好的的做好项目计划就需要用到做计划常用的工具甘特图，而且做好计划管理对项目的风险管控也有很大的好处。 二、甘特图官网以及文档地址 https://docs.dhtmlx.com/gantt/desktop__install_with_b
阅读全文
vue3面试题
摘要：1、vue3的新特性 答： 1、响应系统的变动 由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。 Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。 2、虚拟DOM重写（Virtual
阅读全文
Vue3对比Vue2，有哪些不同？
摘要：vue2的响应式是通过object.defineproperty实现的，JavaScript对象传入vue实例时，vue会遍历对象的所有property，并通过object.defineproperty把这些property转化为getter和setter，数据发生变化时，就会触发视图的更新；不过这
阅读全文
Vue3的新特性
摘要：1、响应系统的变动 由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。 Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。 Proxy的属性及方法 2、虚拟DOM重写（Virtual D
阅读全文
vue3性能为什么比vue2好？
摘要：1.diff算法优化 首先，diff算法是虚拟DOM技术的必然产物，它会对新旧虚拟DOM作对比（即diff），然后将变化的地方更新在真实DOM上。而这其中，如何快速的判别需要变化的内容，就是Vue3.0的提升。具体来看： 在Vue2.0当中，当数据发生变化，它就会新生成一个DOM树，并和之前的DOM
阅读全文
2021前端会有什么新的变化
摘要：2020年前端圈带来具有突破意义的内容或框架不多，也不会再有2013年到2017间日日新的框架大战局面，也不会有Node全栈之争，也不会因为React-Native、Weex、Flutter这类跨端而欣喜若狂。 我能看到的是今天前端已趋于稳定，在深水区探索，比如蚂蚁金服的x6，在图形可视化方面做的就
阅读全文
Vue中强制组件重新渲染的正确方法
摘要：有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？ 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vu
阅读全文
大文件分片上传，断点续传，秒传
摘要：前段时间做视频上传业务，通过网页上传视频到服务器。 视频大小 小则几十M，大则 1G+，以一般的HTTP请求发送数据的方式的话，会遇到的问题：1，文件过大，超出服务端的请求大小限制；2，请求时间过长，请求超时；3，传输中断，必须重新上传导致前功尽弃； 解决方案： 1，修改服务端上传的限制配置；Ngi
阅读全文
VUE + TS
摘要：安装: npm i -S vue-property-decorator 提示: I: 首先安装上面两个模块II: 使用相应的模块,引入对应的模块** 01: @Prop 属性传递 ** ** // 使用: <h4> {{propA}} | {{propB}} | {{propC}}</h4>** @
阅读全文
监听localstorage
摘要：以vue.js为例： 主要是用到 storage_event 来实现 创建方法 在main中给 Vue.protorype 注册一个全局方法，然后创建一个 StorageEvent 方法，当我在执行sessionStorage.setItem(k, val) 的时候，初始化事件 并 dispatch
阅读全文
vue-cli 中执行的 vue-cli-service源码中执行了webpack什么
摘要：最近又整回vue去了，不说了，还是脚手架先整吧。假设你已经通过vue create vue-base有了vue-base 项目 然后我看到 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",
阅读全文
使用 ESlint、lint-staged 半自动提升项目代码质量
摘要：最近在项目部署了ESlint还有一些配套的工具，比如 prettier husky lint-staged，有些心得写出来分享下。 依据本篇可以实现在git commit之时，重新格式化代码，同时进行代码检查预防一些低级错误。最终期待项目中的开发人员提交到线上的代码符合代码规范、风格统一，看起来像是
阅读全文
vue文件里面使用lang="scss"报错
摘要：vue文件里面使用lang="scss"，各种报错， 解决方法是：肯定要安装sass-loader和node-sass 1 npm install sass-loader node-sass --save-dev 结果还是老是报错：TypeError [ERR_INVALID_ARG_TYPE]:
阅读全文
