vue进阶教程——企业级项目落地方案
主要讲vue的进阶知识,以原理和最佳实践为主导,并附有真实的大厂实践,建议有vue实战基础的小伙伴获取。
优惠券已抵扣
余额抵扣
还需支付
¥9.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
欧阳呀
早一批“吃螃蟹”的人。多年前端开发及项目管理经验,擅长vue,原生js,react。v: ouyang_Allen,承接毕设
展开
-
Vue-cli3.0+ 打包优化(六种常用方案)
Vue打包优化实践方案(已上线)原创 2021-04-17 15:10:21 · 72828 阅读 · 5 评论 -
vue虚拟dom详解
从 vue1.x 设计理念说起对vue发展史比较熟悉的同学,应该知道这件事:vue1.0 并没有虚拟dom这玩意,而是是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作,每一个观测的render Watcher 对应的就是一个真实的DOM节点。好处是少量数据更新对比Virtual DOM 性能更好,坏处是大量数据更新、初始渲染性能、对比Virtual DOM 性能更差。渲染列表时当数据全新的时候,需要销毁之前的所有实例,重新创..原创 2020-08-28 22:11:26 · 1139 阅读 · 1 评论 -
Vue中diff算法核心函数揭秘 —— patch函数
说在前面本文接上篇vue虚拟dom详解,会讲到以下几点:diff 算法的实现过程 diff 算法步骤说明 diff算法核心函数:patch()diff 算法的实现过程Vue的diff算法是基于snabbdom改造过来的,仅在同级的vnode间做diff。递归地进行同级vnode的diff,最终实现整个DOM树的更新。因为跨层级的操作是非常少的,忽略不计,这样时间复杂度就从O(n3)变成O(n)。diff 算法步骤说明1. 用 JavaScript 对象结...原创 2020-09-01 14:51:32 · 7962 阅读 · 1 评论 -
Vue3.0来了,一起来看看尤大大说了啥
说在前面前端的技术一直更新特别快,特别是框架这块。4月21晚,Vue作者尤雨溪在B站直播分享了Vue.js 3.0 Beta最新进展。赶紧拿出小本本做笔记,一起来看看尤大大说了些什么。Performance当我们项目功能越来越多、模块规模一步步扩大,这个时候性能考量是非常重要的,那么Vue.js 3.0 Beta在性能上给我们带来了哪些惊喜呢?重写了虚拟Dom的实现(且保证了兼容性,脱离模版的渲染需求旺盛)。 编译模板的优化。 更高效的组件初始化。 update性能提高.原创 2020-05-13 11:15:49 · 12953 阅读 · 22 评论 -
原生js实现响应式,数据驱动
mvvm原创 2019-11-03 01:39:54 · 17916 阅读 · 1 评论 -
原生js模拟vue实现双向数据绑定
原生js模拟vue实现双向数据绑定写在前面vue.js是mvvm模式的框架,如图:通过和传统mvc模式的对比,我们发现多了个ViewModel,没有控制器(controller)了。ViewModel是mvvm模式的精髓所在它连接了view(视图层)与model(数据模型),view或model发生改变,他们对应的model和view也会发生改变,非常方便。尤其是在做表单类型业务的时候深...原创 2019-09-05 14:48:53 · 844 阅读 · 2 评论 -
vue 路由懒加载 总路由配置动态引入
一般的方式import shopRoutes from ‘./shop/index.routes.js’;import storeRoutes from ‘./store/index.routes.js’;import priceRoutes from ‘./price/index.routes.js’;…const routes = {{ path: ‘/’, component: ...原创 2019-08-12 14:47:59 · 1018 阅读 · 1 评论 -
一文看懂vue 路由拦截
为什么要设置路由拦截1.有些页面组件页面需要登录才能操作,不然会发生不可预知的错误2.根据用户权限配置页面,若没有这个权限,则你无法进入,进行拦截1.路由设置:router/index.jsexport default new Router({routes: [{path: ‘/index’,name: ‘index’,meta: { //自定义配置requireAuth:...原创 2019-08-12 12:30:54 · 962 阅读 · 1 评论 -
vue 全局权限控制
说在前面权限控制一直是一个很烦人的事情,无论是前端还是后台。在平常的项目里,可能大家都是通过后台传来的字段来控制元素的display属性。其实这么做是很不严谨的。因为可以通过F12查看元素,也可以进行更改,这个时候如果把display改为block,就可以操作它了,那你的权限控制就白做了。vue项目如何做权限控制我看到比较多的是这样的做法,根据后台传的字段,通过v-if,v-else来...原创 2019-08-01 15:14:04 · 7928 阅读 · 1 评论 -
手把手教你写vue插件
组件与插件的区别组件: 对某功能或某模块的封装(例如 我们写的弹窗,loading)插件: 对一系列组件的封装(例如 vuex,vue-router)关系: 插件可以封装组件,组件暴露数据给插件插件的优点1.开箱即用2.功能比组件更强大,更丰富3.一次引入,终生收益4.打包带走,随走随用5.可以上传到npm官网装X(面试加分项)如何制作一个插件第一步 先封装一个组件(toas...原创 2019-07-27 12:08:19 · 494 阅读 · 1 评论 -
vue api层封装 axios封装(大厂案例)
为什么要封装axios有一定设计思想的同学,应该会有个意识,我们前端的api层与业务层应该是分离的。否则业务层会特别混乱,我们要实现的目标是业务层只调用方法,返回接口数据。其余的都交给api层来做。那我们具体应该怎么设计呢?设计思路api层:联通后台接口,进行错误统一处理(根据不同的状态码),以及成功处理。实际操作1.我们在src目录下新建一个request文件夹(你可以自己命名,不...原创 2019-08-01 00:55:01 · 14581 阅读 · 1 评论 -
vue-cli3打包优化
vue-cli3.0相对于2.0,已经给我们优化了很多了,大家可以打开项目里的node_modules,找到@vue/cli-serve,这里也说一点,如果你想更深入的了解vue而不仅仅是停留在应用层是一定要去看这些node_modules的。看它里面是怎么配置以及怎么封装的,学习它的思想。正因为3.0已经做了一些默认的配置,我们进行的进一步优化以及其它配置都放在vue.config.js...原创 2019-07-26 17:38:57 · 1218 阅读 · 1 评论 -
浅析vue项目优化
vue用了半年多了,一路踩坑过来,也算是收获不少。不错呢,踩坑的文章很多,我就不写了,主要来写一写怎么去优化vue项目注意 : 适用于vue-cli 初始化、webpack 打包的单页应用。组件化组件化(也叫模块化)是前端的一个新的趋势,vue的核心之一 也是组件化。项目里公共的地方都要组件化出来,少写很多代码(弹窗,表格,提示等等)。路由管理路由也是vue的重点,主要是涉及到...原创 2018-11-02 18:34:26 · 543 阅读 · 1 评论