Vue.js
Vue相关原理、开发错误、项目
Emily Qin
授人以鱼不如授人以渔
展开
-
vue实践之项目积累-----vue滚动条插件----vuescroll
vuescroll 是一款基于 Vue.js 自定义滚动条的插件,它有两种模式: native: 适用于 PC 端, 支持基本的自定义滚动条。 slide: 适用于移动端, 支持下拉-加载,上拉刷新,轮播等。 本地安装 npm i -S # 或者通过yarn yarn add vuescroll # 或者通过cnpm cnpm i -S之后在全局或者...原创 2019-08-12 15:03:49 · 4035 阅读 · 1 评论 -
Vue源码二次解析【理论】1------Vue构建过程
在前一个系列中,结合源码,我已经分析的很详细了。这一个系列主要是想通过理论,从函数的角度来了解每个过程的形成。在本篇以及接下来的篇章中所有的分析只是基于Web这个层面。Vue的源码构建过程主要依赖build.js这个文件,而运行这个文件的相关配置主要存放在config.js文件中,这次着重就这两个文件做一个简单的分析。先来看一个整体的流过程:在build.js中构建的主要依赖于buil...原创 2019-05-31 09:50:01 · 285 阅读 · 0 评论 -
Vue源码系列23---响应式原理-----计算属性和侦听属性
Vue 的组件对象支持了计算属性computed和侦听属性watch2 个选项。计算属性本质上是computed watcher,而侦听属性本质上是user watcher。就应用场景而言,计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。watcher有4 个options,通常会在创建...原创 2019-05-24 09:34:15 · 382 阅读 · 0 评论 -
Vue源码系列5------数据驱动-----从初始化到挂载
Vue的核心思想之一就是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。所有的修改是基于数据的,不会操作DOM,非常利于维护和更新。下面先从new Vue看起:我们都知道,new关键字在 Javascript 语言中代表实例化是一个对象,而Vue实际上是一个类,类在 Javascript 中是用 Function 来实现的...原创 2019-05-14 15:30:16 · 143 阅读 · 0 评论 -
Vue源码系列4------Vue文件的入口-----Vue的初始化
这片文章主要分析,在 web 应用下, Runtime + Compiler 构建出来的 Vue.js。入口文件在Vue源码中,入口文件为src/platforms/web/entry-runtime-with-compiler.js。入口文件通过export导出的是一个Vue对象,通过import导入相关依赖组件。首先这个Vue对象来自于;而runtime/index中的Vue对...原创 2019-05-13 11:12:48 · 369 阅读 · 0 评论 -
Vue源码系列21------响应式原理-----检测变化的注意事项
如何处理一些特殊情况【响应式数据对于对象新增删除属性以及数组的下标访问修改和添加数据等的变化观测不到。】:我们就可以知道如何把它们也变成响应式的对象【通过Vue.set以及数组的API可以解决这些问题,本质上它们内部手动去做了依赖更新的派发。】。其实对于对象属性的删除也会用同样的问题,Vue 同样提供了Vue.del的全局 API,它的实现和Vue.set大相径庭,甚至还要更简单一些。...原创 2019-05-22 11:47:06 · 184 阅读 · 0 评论 -
Vue源码系列20------响应式原理----nextTick
nextTick是 Vue 的一个核心实现,在介绍 Vue 的 nextTick 之前,首先需要了解一下JS 的运行机制。其次需要了解到数据的变化到 DOM 的重新渲染是一个异步过程,发生在下一个 tick。这就是我们平时在开发的过程中,比如从服务端接口去获取数据的时候,数据做了修改,如果我们的某些方法去依赖了数据修改后的 DOM 变化,我们就必须在nextTick后执行。比如下面的伪代码...原创 2019-05-22 11:39:24 · 197 阅读 · 0 评论 -
Vue源码系列19------响应式原理----派发更新
依赖收集的目的就是为了当我们修改数据的时候,可以对相关的依赖派发更新。Vue 数据修改派发更新的过程,实际上就是当数据发生变化的时候,触发 setter 逻辑,把在依赖过程中订阅的的所有观察者,也就是watcher,都触发它们的update过程,这个过程会把所有要执行update的watcher推入到队列中,又利用队列做了进一步优化,在nextTick后执行所有watcher的ru...原创 2019-05-22 11:27:25 · 341 阅读 · 0 评论 -
Vue源码系列18------响应式原理-----依赖收集
响应式对象 getter 相关的逻辑就是做依赖收集。收集依赖的目的是为了当这些响应式数据发送变化,触发它们的 setter 的时候,能知道应该通知哪些订阅者去做相应的逻辑处理,我们把这个过程叫派发更新,其实Watcher和Dep就是一个非常经典的观察者设计模式的实现。依赖收集时订阅数据变化的watcher的收集。先来回顾一下 getter 部分的逻辑:export functio...原创 2019-05-22 10:55:22 · 297 阅读 · 0 评论 -
Vue源码系列17------响应式原理---响应式对象
Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty,给数据添加了 getter 和 setter,目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑:getter 做的事情是依赖收集,setter 做的事情是派发更新,这也是为什么 Vue.js 不能兼容 IE8 及以下浏览器的原因。Vue会把props、data等变成响应式对象,在创建过程中...原创 2019-05-22 10:16:31 · 333 阅读 · 0 评论 -
Vue源码二次解析【理论】2------Vue初始化全过程
这次分析以在 web 应用下, Runtime + Compiler 构建出来的 Vue.js为例。Vue的本质上就是一个用 Function 实现的 Class,然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。Vue 的初始化逻辑非常清楚,实质上就是是往Vue的原型上去挂载一些方法,或者给Vue这个对象本身扩展全局的静态方法。把这些方法拆分到不同的功能模块中,把不...原创 2019-05-31 10:57:11 · 260 阅读 · 0 评论 -
Vue源码二次解析【理论】3------Vue初始化全过程-----挂载过程
Vue 中是通过$mount实例方法去挂载vm的。整个过程是先缓存原型上的$mount方法,然后重新定义该方法。首先,它对el做了限制,Vue 不能挂载在body、html这样的根节点上。接下来的是判断有没有定义render方法。如果没有定义render方法,则会把el或者template字符串转换成render方法。整个大的过程如下:接下来拆分...原创 2019-05-31 11:41:59 · 217 阅读 · 0 评论 -
vue实践之项目积累-----mounted
mounted的类型是一个Function。属于vue生命周期中的钩子之一,该钩子在服务器端渲染期间不被调用。且不是所有的子组件都会一起被挂载原创 2019-08-12 14:55:04 · 306 阅读 · 0 评论 -
vue实践之项目积累-----$emit、$on
在vue事件中,与之相关的两个属性是$emit、$on这个属性,其中$emit是用来触发当前实例上的事件的,$on是用来监听当前实例上的自定义事件的,可以由$emit触发,这一对属性有点类似于触发事件与事件处理程序分开这一原理,既可以传播也可以方便监听修改$emitVue.component('magic-eight-ball', { data: function () { ...原创 2019-08-12 14:43:47 · 176 阅读 · 0 评论 -
vue实践之项目积累-----props
props是用于接收父组件的数据的一个属性,其类型可以是数组或者对象,同时对象允许配置高级选项,如类型检查,自定义验证和设置默认值当基于对象的语法时,可以做如下配置:type:可以是下列原生构造函数的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、 default:默认值,如果没有值被传入,则换用这个默认值 requ...原创 2019-08-12 14:30:38 · 172 阅读 · 0 评论 -
vue实践之项目积累-----样式绑定(class与style)
在实际应用中,同种元素的不同状态的不同样式这是一个很常见的需求。我们通常用v-bind来处理他们,在vue中,v-bind用于绑定class和style时,表达式结果的类型除了字符串之外,还可以是对象或者数组。这里都是属性,有时会计算(computed)class对象:<div v-bind:class="{ active: isActive }"></div>...原创 2019-08-12 14:09:52 · 157 阅读 · 0 评论 -
vue实践之项目积累-----v-if、v-show、v-for
在vue项目中,不可避免的会遇到这三剑客(v-if、v-show、v-for),大部分人可能知其然不知其所以然,因此特花一篇文章来说明v-if这是一个条件表达式,与之搭配的是v-else,通常用于组件的显示与隐藏中。v-if 在隐藏时会直接移除那个元素,显示时则会重新创建一个新的元素。当初始条件为真时,才会开始渲染,除此之外,不会渲染v-show顾名思义,这就是用来显示某一个组件的...原创 2019-08-12 13:41:50 · 133 阅读 · 0 评论 -
Vue项目积累-----数据监听
Vue中最重要的几个核心之一就是数据的监听,借由实践之际就一起来盘盘Vue中的数据监听是怎么回事。Vue中数据监听有三种方式,一是keyup,一种是利用watch,一种是利用computed计算keyupkeyup方法是从vue中的methods层面进行的。表示一个具体的操作,依赖于业务逻辑watchwatch与methods方法平级。watch可以监听data中指定数据的变化,可...原创 2019-08-09 14:48:28 · 216 阅读 · 0 评论 -
Vue实践之项目积累------组件之间的传值(父子、子父、兄弟及任意)
在实际应用中,vue的传值就像是人每天要吃的饭一样,是一个避无可避的东西。往大了说组件之间的传值就是任意组件之间的通信,往小了说组件之间的传值可分为父传子,子传父,以及兄弟之间。父传子父传子从传统意义上父亲把已有的东西留给自己的儿子,儿子这里叫继承。在vue中,父组件首先的有值,也就是说父组件是产生值的地方,其次父组件中要有子组件,所有子组件在父组件中注册,明确父子关系;之后在子组件上注册...原创 2019-08-05 09:53:37 · 277 阅读 · 0 评论 -
Vue源码二次解析【理论】5------Vue初始化全过程-------VDOM
VNode【虚拟DOM】是Vue中一个很重要的方面;在Vue中,VNode是对真实DOM的一种抽象【VNode 用来映射到真实 DOM 的渲染】。每个 VNode 都有children,children每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree。VNode由createElement函数创建,创建一个DOM过程:...原创 2019-05-31 14:55:14 · 236 阅读 · 0 评论 -
Vue源码二次解析【理论】4------Vue初始化全过程-----render
Vue的渲染过程主要依赖的是render函数,核心js文件为render.js文件。render函数的第一个参数是createElement,在这里render函数中的createElement方法就是vm.$createElement方法。vm.$createElement方法定义是在执行initRender方法的时候,vm._render最终是通过执行createE...原创 2019-05-31 11:47:13 · 211 阅读 · 0 评论 -
Vue源码系列16------响应式原理-----原理
至此分析了Vue 怎么实现数据渲染和组件化的,主要是初始化的过程,把原始的数据最终映射到 DOM 中,但并没有涉及到数据变化到 DOM 变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外,还有一个很重要的体现就是数据的变更会触发 DOM 的变化。都知道前端开发最重要的 2 个工作,一个是把数据渲染到页面,另一个是处理用户交互。先来看一个示例:<div id="app" @...原创 2019-05-22 09:54:19 · 119 阅读 · 0 评论 -
Vue源码系列15------组件化----异步组件
在日常的开发中,为了提升性能,多使用异步组件。即将一些非首屏的组件设计成异步组件,按需加载。Vue有3 种异步组件的实现方式,实现了 loading、resolve、reject、timeout 4 种状态。异步组件实现的本质是 2 次渲染,除了 0 delay 的高级异步组件第一次直接渲染成 loading 组件外,其它都是第一次渲染生成一个注释节点,当异步获取组件成功后,再通过forceRe...原创 2019-05-22 09:48:05 · 389 阅读 · 0 评论 -
Vue源码系列3------Vue源码构建原理
了解了单一的模块,下面来看看Vue是怎么组织这些模块的Vue.js 源码是基于Rollup【打包构建工具;更轻量】构建的,它的构建相关配置都在 scripts 目录下。构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json 文件,它是对项目的描述文件,它的内容实际上是一个标准的 JSON 对象。我们通常会配置script字段作为 NPM 的执行脚...原创 2019-05-10 13:46:25 · 662 阅读 · 0 评论 -
Vue源码系列2------认识Vue源码目录
Vue.js的源码全部开源在github上,我们可以从github上克隆到本地,项目地址--https://github.com/vuejs/vue;以便于研究。Vue.js 的项目源码都在 src 目录下,其目录结构如下。src├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同...原创 2019-05-10 11:06:04 · 245 阅读 · 0 评论 -
Vue源码系列1------认识Flow----类型检查
Flow是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查。因此在解析Vue.js源码的时候需要Flow背景知识,将容易更好的理解。JS是弱动态类型语言,虽然非常灵活,但是有一个隐患是在编译时不会报错,但是运行时会出现bug。目前JS主要采用ES6语法,类型检查会解决掉很大一部分隐藏的bug。所谓类型检查,就是在编译期...原创 2019-05-10 10:42:02 · 583 阅读 · 0 评论 -
Vue项目实例(一)------背景
背景从前学习的模式都是看语法、看API、看实例、再动手操作示例。倒也不是说这种方式不好,只是今天学习Vue,下次学习react,不免又要重新拿出来学习一番,如此往复,长远来看,难免有点影响效率。前几天读到一个博客,作者按照模块化的思想,跳出语言本身,这种做法着实新颖,因此也想借鉴尝试一番。项目与语言选择在现下的项目中,主要采用Vue的框架,JS为主的语言进行研发。原因无他,只是最近恰好准备研...原创 2019-03-23 22:49:50 · 3084 阅读 · 0 评论 -
Vue从浅显程度理解(一)
Vue是现在Web前端中比较流行的三大框架之一,Vue.js是一套构建用户界面的渐进式框架。Vue只关注视图层,采用自底向上增量开发的设计。通过Vue可以达到通过使用尽可能简单的API实现相应的数据绑定和组合的视图组件。Vue默认支持ES6的模块导入导出,在设计Vue项目时应该考虑代码的目录结构,webpack:是一个现代JS应用程序的静态模块打包器(module bundler),可高配置....原创 2018-09-06 01:02:57 · 366 阅读 · 0 评论 -
Vue从浅显程度理解(二)
v-bind:属性名="表达式",最终表达式运算结束的结果赋值给该属性名 -简化的写法:`属性名=表达式`如v-blind:class=xxx,class:根据可变的表达式的结果来给class赋值。 class的结果分类 -一个样式:返回字符串(三元表达式和key和样式的清单对象) -多个样式:返回对象(样式key,t...原创 2018-09-07 00:09:45 · 311 阅读 · 0 评论 -
Vue从浅显程度理解(三)-----Vue生命周期
Vue的生命周期图示,以下来自官网图片。Vue的实例从创建到销毁完整的过程,原创 2018-09-09 20:52:51 · 224 阅读 · 0 评论 -
Vue从浅显程度理解(四)-----Webpack专题
本质: webpack是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个包(bundle)。四个核心概念: 入口(entry):指示 webpack 应该使用哪个模块,来...原创 2018-09-09 23:08:26 · 174 阅读 · 0 评论 -
Vue从浅显程度理解(五)-----Vue项目结构
通常来说一个完整的Vue项目,都具有以下的目录结构,通常来说文档结构具备通用性Vue全局配置原创 2018-09-10 23:04:42 · 210 阅读 · 0 评论 -
Vue源码系列6------Vue实例的挂载
Vue 中是通过$mount实例方法去挂载vm的,$mount方法在多个文件中都有定义,如src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js。因为$mount这个方法的实现是和平台、构建方式都相关的。接...原创 2019-05-15 11:02:24 · 361 阅读 · 0 评论 -
Vue源码系列7------VueDOM渲染-----render函数
Vue 中_render方法其实是实例的一个私有方法,用来把实例渲染成一个虚拟 Node。源方法定义在src/core/instance/render.js文件中:Vue.prototype._render = function (): VNode { const vm: Component = this const { render, _parentVnode } = vm....原创 2019-05-15 11:57:12 · 653 阅读 · 0 评论 -
Vue源码系列15------组件化-----组件注册
在 Vue.js 中,除了它内置的组件如keep-alive、component、transition、transition-group等,其它用户自定义组件在使用前必须注册。在开发过程中可能会遇到如下报错信息:'Unknown custom element: <xxx> - did you register the component correctly? For rec...原创 2019-05-22 09:21:49 · 215 阅读 · 0 评论 -
Vue源码系列14------组件化-----生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码Vue官方给出的关于生命周期的图示链接如下:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%9...原创 2019-05-21 18:01:55 · 1168 阅读 · 1 评论 -
Vue源码系列11------Vue组件化----createComponent 【创造组件】
Vue.js 的一个核心思想是组件化。所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件的资源是独立的,组件在系统内部可复用,组件和组件之间可以嵌套。下面来看看createComponent的实现,了解到它在渲染一个组件的时候的 3 个关键逻辑:构造子类构造函数,安装组件钩子函数和实例化vn...原创 2019-05-16 16:04:37 · 2232 阅读 · 0 评论 -
Vue源码系列13------合并配置----组件调用
组件场景由于组件的构造函数是通过Vue.extend继承自Vue的,先回顾一下这个过程,代码定义在src/core/global-api/extend.js中/** * Class inheritance */Vue.extend = function (extendOptions: Object): Function { // ... Sub.options ...原创 2019-05-21 17:27:51 · 681 阅读 · 0 评论 -
Vue源码系列12-------合并配置----外部调用
new Vue初始化的过程通常有 2 种场景,一种是外部我们的代码主动调用new Vue(options)的方式实例化一个 Vue 对象;另一种是组件过程中内部通过new Vue(options)实例化子组件。但是无论哪种场景,都会执行实例的_init(options)方法,它首先会执行一个merge options的逻辑,相关的代码在src/core/instance/init...原创 2019-05-21 17:27:55 · 259 阅读 · 0 评论 -
Vue源码系列22----响应式原理----组件更新
当数据发生变化的时候,会触发渲染watcher的回调函数,进而执行组件的更新过程。updateComponent = () => { vm._update(vm._render(), hydrating)}new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted) { ...原创 2019-05-24 13:17:07 · 477 阅读 · 0 评论