Vue
文章平均质量分 96
通过基础的实例+实践源码+部分原理分享
Hi-Sen
这个作者很懒,什么都没留下…
展开
-
数据可视化平台 vue+node+webpack+echarts+d3
前言随着公司的发展和进步,数据大屏的业务日益增长,公司目前的做法大致可以分为两种 人肉 or 第三方工具平台 .人肉:很简单,一个前端配备,熟练的 html + css + js 技能就完事了 ;优点:开发灵活多变不足:效率低,页面复用度不高(几乎为0复用度),大量重复性工作,占用前端开发时间 等当然,也有人会说,目前比较主流的前端框架,像 Vue ,React 都是组件化,模块儿化的工...原创 2020-03-11 10:14:15 · 7139 阅读 · 6 评论 -
Vue3 分分钟上手不叫事儿
前言Vue3 自2020年9月份发布之后,截至目前也有半年的时间了,一直以来,刷过文档,看过文章,窥过视频,就是没有撸过代码 ~ 那么 ~ 今天 ~ 现在 ~ 在这里 ~ 撸一把针对 Vue3 和 Vue2 的差异,我就不过多的言语了,官网也给到了一些说明,最直接能体现的就是编码的风格上,把Vue2中的零散逻辑改成新提供的CompositionAPI组合在一起来维护,并且还可以将单独的逻辑的功能拆分成单独的文件,完美的解决了Vue2中mixin混入的缺点(命名冲突,逻辑重用等问题)进入正题 : Co原创 2021-03-27 17:29:57 · 327 阅读 · 3 评论 -
Vue原理 【 Vue.extends 】
前言首先:我们引用官方的案例,先来认识一下 vue.extends Api 的介绍和用法Vue.extends(options)使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数<div id="mount-point"></div>// 创建构造器var Profile = Vue.extend({ template: '<p>{{firstName}原创 2020-12-01 16:45:39 · 1938 阅读 · 0 评论 -
Vue模板编译
前言前边有分享过 React 的工作原理,那么 Vue 又是怎样的编译原理呢,经过几天的翻阅,视频,现在来分享给大家,共勉 。参考在分享 Vue 响应式原理的时候,我们有看到一张图,很详细的体现了Vue实例的整个生命周期,那么今天我们就从这张图来作为入口从图上来看,结合我们之前分享的响应式原理,可以知道,new Vue(options) 主要执行了 this._init(options) 初始化方法,而这个方法就定义在 init.js 中 ,下方简约代码详解// 入口文件 src/core/in原创 2020-12-04 00:42:39 · 337 阅读 · 0 评论 -
浅析vue-router路由实现原理
前言通过B站视频和一些童鞋的文章结合GitHub源码阅读来理解路由的实现原理看过前章vuex状态管理的分享之后,相信对路由这块也是非常感兴趣的,同样的模式,同样的方式,我们走进GitHub之vue-router同样直接走进 srccomponents:route-link 组件 和 router-view 组件 实现history:关于浏览器相关,包含 hash模式 , basic...原创 2020-04-17 01:11:14 · 2508 阅读 · 0 评论 -
浅析vuex状态管理实现原理
前言通过B站视频和一些童鞋的文章结合Git源码阅读来理解vuex的实现原理话不多说,我们直接上源码首先来看一下vuex的源码目录,众所周知,主要工程一般都在 src 下,所以我们直接从这里开始module:模块构造函数和模块集合管理plugins:插件,调试 dvtools 日志记录吧 loggerhelpers:集成语法糖 mapState, mapMutations, ma...原创 2020-04-14 23:29:30 · 991 阅读 · 0 评论 -
数据响应式之Proxy受虐式
前言通过珠峰课程的学习来理解computed计算属性的原理那首先呢,先回顾一下vue的响应式数据原理Vue 在初始化数据时,会给 data 中的所有属性使用 Object.defineProperty 重新定义 setter 和 getter , 当页面获取到对应属性时,会触发 get 方法并进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通知相关依赖进行更新操作 。其实呢...原创 2020-04-12 23:45:16 · 273 阅读 · 0 评论 -
Vue原理 【 组件为何采用异步渲染 - nextTick的实现原理 】
前言有人说:是为了提高性能,对,根本上也是这么个道理 ;那到底是如何做的呢 ?其实在vue中,响应式数据是组件级的,也就是说,每一次的更新都是渲染整个组件,如果是同步的话,根据我们前边理解的响应式数据原理,一旦修改了data属性,便会触发对应的 watcher,然后调用对应 watcher 下的 update 方法更新视图,那么结果显而易见,太频繁了 !如下代码:// 省略多余模板语法d...原创 2020-03-17 15:10:48 · 1324 阅读 · 0 评论 -
Vue是如何检测数组变化的
前言通过上一篇文章,我们知道了Vue初始化data的响应式原理,只讲到了对象是如何通过defineReactive 方法对data属性创建监测的,而数组则只是略带过,下边我们就通过源码来捋一下首先看回这个判断 src/core/observer/index.js Observer 类构造函数// 我们看回这段代码 if (Array.isArray(value)) { // 是数组 ...原创 2020-03-12 23:02:40 · 1066 阅读 · 0 评论 -
Vue原理【响应式数据】
前言通过珠峰课程的学习来理解 Vue 源码的响应式原理 。响应式原理1.核心点: Object.defineProperty2.默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面获取到对应属性时。会进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通知相关依赖进行更新操作。什么叫依赖收集 ?通过...原创 2020-03-12 11:58:52 · 957 阅读 · 1 评论 -
手写Vue响应式 【Object.defineProperty】
前言 - 双向数据绑定的原理博主自叙 ,Demo 写于 2019 年初使用Vue技术栈也有3年了,对里边的各种API,属性,内置组件封装可以说是非常熟练了,一直知道双向数据绑定的原理是通过数据劫持,结合发布者-订阅者模式的方式来实现的;可理论始终是理论,忍不住还是动动小手撸了一把 ; 请大家尽管吐槽吧 。参考文章 简书:https://www.jianshu.com/p/23180880d3...原创 2019-11-19 18:31:00 · 520 阅读 · 0 评论 -
Vue + VueRouter + Webpack 实例 (源码含备注)
首先说一下为什么要写这篇博文,都9102了,为什么还在写那些老掉牙的 vue 基础分享,听我细细道来:1,不管是 9102 还是 2020 ,技术的更新道路上都是万变不离其宗的,vue 也是一样,尽管3.0已然到来,可是还是有很多同学 2.x 全然不知2,通过我的一个简单实例,来帮助那些想学习vue技术栈的童鞋和即将入门前端的小白3,也是最重要的一点,2018年7月,基于某公司部分产品技术栈转型使用vue,部分同事需要学习一下,快速上手,那么我很荣幸的成为了给大家分享vue技术栈的 ‘导师‘ ;原创 2019-11-17 12:01:20 · 396 阅读 · 0 评论