Vue
文章平均质量分 84
Vue技术栈
guxin_duyin
这个作者很懒,什么都没留下…
展开
-
基于Vue的前端架构,我做了这15点
分解需求技术栈考虑到后续招人和现有人员的技术栈,选择 Vue 作为框架。公司主要业务是 GIS 和 BIM,通常开发一些中大型的系统,所以 vue-router 和 vuex 都是必不可少的。放弃了 Element UI 选择了 Ant Design Vue。工具库选择 lodash。建立脚手架搭建 NPM 私服。使用 Node 环境开发 CLI 工具,参考我自己写过的一篇 -【 搭建自己的脚手架—“优雅”生成前端工程】。基于 @vue/cli 搭建基础的模板(大家都比较了解,节省开转载 2020-12-21 00:00:54 · 380 阅读 · 0 评论 -
Vue3有哪些不向下兼容的改变
作为技术人员,随时保持技术同步是很重要的事情。虽然Vue3已经发布很长时间了,现在开始保持更新也还不晚。新项目可以拿来练练手XD,老项目就不建议升级了。本篇文章整理自官方文档-BreakingChanges部分????????建立项目1. 使用 vite-appnpm init vite-app <project-name>这里的vite-app是一个新项目,它的官方介绍是一个快速的WEB开发构建工具。这里我们试了一下,整个构建过程十分的快速。和以往的webpack build转载 2020-12-15 21:25:33 · 123 阅读 · 0 评论 -
一文让你30分钟快速掌握Vue3
经过了漫长的迭代,Vue 3.0 终于在上 2020-09-18 发布了,带了翻天覆地的变化,使用了 Typescript 进行了大规模的重构,带来了 Composition API RFC 版本,类似 React Hook 一样的写 Vue,可以自定义自己的 hook ,让使用者更加的灵活,接下来总结一下 vue 3.0 带来的部分新特性。Vue2 与 Vue3 的对比 对 TypeScript 支持不友好(所有属性都放在了 this 对象上,难以推倒组件的数据类型) 大量的 API转载 2020-12-13 20:26:37 · 181 阅读 · 0 评论 -
vue源码中值得学习的方法
最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数,说明技术还是不错的哦。1. 数据类型判断Object.prototype.toString.call()返回的数据格式为 [object Object]类型,然后用slice截取第8位到倒一位,得到结果为 Objectvar _toString = Object.prototype.toString;function toRawType (valu转载 2020-11-29 19:49:58 · 72 阅读 · 0 评论 -
聊聊对Vue框架的理解(三)
Virtual DOM在 Vue 中,template被编译成浏览器可执行的render function,然后配合响应式系统,将render function挂载在render-watcher中,当有数据更改的时候,调度中心Dep通知该render-watcher执行render function,完成视图的渲染与更新。整个流程看似通顺,但是当执行render function时,如果每次都全量删除并重建 DOM,这对执行性能来说,无疑是一种巨大的损耗,因为我们知道,浏览器的DOM很“昂贵”的转载 2020-11-22 16:26:18 · 180 阅读 · 0 评论 -
聊聊对Vue框架的理解(二)
响应式系统Vue.js 是一款 MVVM 的JS框架,当对数据模型data进行修改时,视图会自动得到更新,即框架帮我们完成了更新DOM的操作,而不需要我们手动的操作DOM。可以这么理解,当我们对数据进行赋值的时候,Vue 告诉了所有依赖该数据模型的组件,你依赖的数据有更新,你需要进行重渲染了,这个时候,组件就会重渲染,完成了视图的更新。数据模型 && 计算属性 && 监听器在组件中,可以为每个组件定义数据模型data、计算属性computed、监听器watch。转载 2020-11-21 17:16:01 · 318 阅读 · 0 评论 -
聊聊对Vue框架的理解(一)
分享目标: 了解 Vue.js 的组件化机制 了解 Vue.js 的响应式系统原理 了解 Vue.js 中的 Virtual DOM 及 Diff 原理 Vue.js概述Vue 是一套用于构建用户界面的渐进式MVVM框架。那怎么理解渐进式呢?渐进式含义:强制主张最少。Vue.js包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化、跨平台支持等,但在实际开发中,并没有强制要求开发者之后某一特定功能,而是根据需求逐渐扩展。Vue.js的核转载 2020-11-18 23:02:23 · 592 阅读 · 0 评论 -
前端路由简介以及vue-router实现原理
后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样http://www.xxx.com/login大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等) 浏览器根据数据包的 ...转载 2020-03-24 10:33:41 · 161 阅读 · 0 评论 -
使用vue3.0仿cnode网站
隔离期间,太无聊了,就使用Vue3.0仿cnode网站效果如图:GitHub地址:https://github.com/guxinduyin666/cnode-vue原创 2020-03-19 10:12:21 · 312 阅读 · 0 评论 -
Vue compositionAPI中setup函数如何访问路由
最近尝试使用compositionAPI仿cnode网站,在写路由跳转时遇到了一个问题,在setup函数中无法访问到$router对象。在Vue2.x中可以在methods选项中的函数可以通过this访问到$router对象,因为this是当前vue实例;但是在setup函数中this是undefined,无法通过this来访问$router对象。于是又想到了,setup函数的第二个参数是co...原创 2020-03-17 11:48:49 · 6524 阅读 · 1 评论 -
Vuex的原理解析
一、Vuex的设计思想Vuex的设计思想,借鉴了Flux、Redux,将数据存放到全局的store,再将store挂载到每个vue实例组件中,利用Vue.js的细粒度数据响应机制来进行高效的状态更新。看了Vuex设计思想,心里难免会有这样的疑问:1、vuex的store是如何挂载注入到组件中呢?2、vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢?二、V...转载 2020-03-09 20:51:10 · 346 阅读 · 0 评论 -
路由懒加载性能优化的原理
众所周知,路由懒加载是一个性能优化的点,但是为什么路由懒加载性能优化的原理是什么呢?之前一直没想过这个问题,直到最近阿里的一次电话面试被问懵了之后才痛定思痛,决定好好想想这个问题,可是在网上也没能找出一个满意的答案,于是决定自己实践一下。。。。话不多说,既然决定动手那么就开始吧。我们先用Vue-cli3初始化一个vue工程,选择SPA和Vue-router,其他随意。搭建好工程之后,打...原创 2020-03-07 21:15:44 · 2853 阅读 · 0 评论 -
提前体验Vue3.0--使用compositionAPI写一个todolist
众所周知,在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。但是我们可以先使用@vue/composition-api这个插件提前体验vue3.0的新特性,写起来还是挺方便的Vue3.0解决了哪些问题呢?主要解决了下面这些问题Vue 3 使用ts实现了类型推断,新版api全部采用普通函数,在编写代码时可以享受...原创 2020-02-07 18:04:26 · 994 阅读 · 0 评论 -
使用TS写一个Vue版todolist
说实话,之前虽然简单学习过TS,但是一直没在项目中使用过。今天,就尝试了一把,虽然一开始使用有各种不适应,但是不得不说,使用TS写代码确实比用JS写会少很多bug。话不多说,先了解一下TS是什么东东?TypeScript是什么?TS是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TS有什么好处?TypeScript能从可维护性、...原创 2020-01-17 11:29:10 · 1162 阅读 · 0 评论 -
vue Bus总线
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1例子:https://segmentfault.com/q/1010000007491994...转载 2019-02-24 17:04:00 · 451 阅读 · 0 评论 -
解决vuex在页面刷新后数据丢失的问题
一、原因 js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选...转载 2019-04-13 15:31:27 · 252 阅读 · 0 评论 -
Vue中mixin怎么理解?
Vue中mixin怎么理解?mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的词汇可以叫插件入侵。简单使用// 定义一个混合对象const myMixin = { created: function () { this.hello() }, methods: { ...转载 2019-04-20 16:25:29 · 420 阅读 · 0 评论 -
Vue结合js-xlsx实现Excel的导入导出
之前有做过Excel导出的需求,但是有点云里雾里,最近有空就想再去研究研究其中的精彩。于是,就有了这篇博客。首先介绍一下js-xlsx。SheetJS是前端操作Excel以及类似的二维表的最佳选择之一,而js-xlsx是它的社区版本.js-xlsx将注意力集中到了数据转换和导出上,所以它支持相当多种类的数据解析和导出.不仅仅局限于支持xlsx格式。GitHub地址为https://...原创 2019-08-19 16:10:14 · 4328 阅读 · 1 评论 -
在Vue项目中应用elementUI踩过的坑
最近自己鼓捣vue项目的时候想着应用elementUI玩玩,于是就开始动手玩起来了。一、新建项目1.打开cmd,运行:vue init webpack Vue-Demo2.运行:cd Vue-Demo进入这一级3.运行:npm install4.运行:npm run dev如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 conf...原创 2018-08-27 11:15:25 · 10176 阅读 · 2 评论