绿足 博客

aa

Vue 如何实现双向绑定Vue 将MVVM做为数据绑定的入口。几个Vue源码关键核心概念：Observer 数据的观察者，监听自己的

序言SSR 是解决目前一些对SEO, 首屏渲染速度问题的优选方案。 目前VUE SSR 的实现由两种： 一种是基于官方Vue SSR 指南文档的官方方案；一种是vue.js 通过应用框架–NUXT。 其中官方方案能更直接的控制应用程序的结构， 更深入底层，更加灵活。 而NUXT 提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上， 但抽象出很多模板，并提供了一些额外的功能。 例如： 静...

上一篇： Vue 原理解析（十）:之 事件API 原理及组件库的使用之前在网上看到一个精美的确认弹框组件。 不过使用起来并不是很方便， 如果每个使用的地方需要引入该组件，需要注册， 需要给组件加ref 引用， 需要调用事件来控制状态。 其实这个组件相对来说比较独立的， 我们在使用组件库的时候， 相信都有调用过命令式弹框组件的经历， 今天我们来搞懂命令式组件的实现原理， 以及将这个精美的弹窗组...

上一篇： vue 原理解析 之 computed 和 watch 原理在vue 内部初始化时会为每个组件实例挂载一个this._events 私有的空对象属性：vm._events = object.create(null) // 没有___proto__ 属性这个里面存放的就是当前实例上的自定义事件集合， 也就是自定义事件中心， 它存放着当前组件所有的自定义事件。 和自定义事件相...

上一篇： Vue 原理解析（八） 之 diff 算法之前的章节， 我们按照流程介绍了vue的初始化， 虚拟Dom生成， 虚拟Dom转为真实Dom, 深入理解响应式以及diff 算法等这些核心概念。 对它内部的实现做了分析， 这些首饰篇底层的原理。 下面我们将介绍日常开发中经常使用的API的原理， 进一步丰富vue 的认识， 主要包括如下API：响应式相关API： this.watch,t...

上一篇 Vue 源码解析(七) 之 响应式原理： 数组之前章节介绍了VNode 如何生成真实Dom, 这只是patch 内首次渲染做的事， 完成了一小部分功能而已， 而它做的最重要的事情是当响应式触发时，让页面的重现渲染这一过程能高效完成。 其实页面的重新渲染完全可以使用新生成的Dom去整个替换掉旧的Dom, 然而这么做比较低效， 所以借助接下来将要介绍的diff比较算法来完成。diff...

上一篇: Vue 原理解析（六）: 全面深入理解响应式原理-对象数组更新首先看下改变数组的两种方式：export default { data() { list: [1, 2, 3] }, methods: { changeArr1() { // 重新赋值 this.list = [4, 5, 6] }, changeArr2()...

上一篇 Vue 原理解析(五)： 虚拟Dom到真实Dom的生成过程vue 之所以能数据驱动视图发生变更的关键就是：依赖它的响应式系统了。 响应式系统如果根据数据类型区分： 对象和数组两者的实现会有所不同。 解释响应式原理，需要从整体流程出发， 不在vue 组件化的整体流程中找到响应式原理的位置，对深刻理解响应式原理不太好。 接下来我们从整体流程出发， 试着站在巨人的肩膀上分别说明对象和数组...

上一篇 vue 原理解析(四)： 虚拟Dom 是怎么生成的再有一颗树形结构的Javascript对象后， 我们需要做的就是讲这棵树跟真实Dom树形成映射关系。我们先回顾之前的mountComponnet 方法：export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount')...

在经过初始化阶段之后，即将开始组件的挂载，在挂载之前有必要了解下虚拟Dom 的概念。我们知道vue@2.0 开始引入了虚拟dom， 主要解决的问题是， 大部分情况下可以降低使用Javascript 去操作跨线程的庞大dom所需要的昂贵性能，让dom 操作的性能更高效； 以及虚拟Dom可以用于SSR以及跨端使用。虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真...

上一篇 Vue解析原理（二）： 初始化时beforeCreate之前做了什么？我们继续this._init() 的初始化相关操作， 接着又会执行如下三个初始化方法：initInjections(vm)initState(vm)initProvide(vm)5. initInjections(vm): 主要作用是初始化inject, 可以访问到对应的依赖。inject 和 prov...

上一篇： Vue原理解析（一） Vue到底是什么上一章我们知道在 new Vue() 时， 内部会执行一个this._init() 方法， 这个方法是在initMixin(Vue) 内定义的：export function initMixin(Vue) { Vue.prototype._init = function(options) { ... }}当执行new ...

Vue, 现阶段受热指数上升比较块的前端架构。有必要从源码的角度，对它的功能的实现原理一窥究竟。看源码一般主要看两样东西， 从宏观角度是它的设计思想和实现原理； 微观上则是编程技巧。 这里我们侧重点是实现原理上。vue 是什么？我们在使用vue时，初始化操作都会使用new Vue({…})，不难发现 vue 其实是一个类。 不过ES6普及的今天，vue 的定义任是普通构造函数。 为什么不用 ...

Vue 插件开发 NPM 发布及使用我们在日常开发过程中，一些通用的组件希望封装并发布到NPM等场景供大家使用。 提高复用及开发效率。本文章主要想给大家介绍一个常规的Vue 插件（这里已一个分页插件为例）开发， npm 发布， 下载安装及使用流程。 具体细节不在文字描述，大家可直接到githib 上看源码及...

VUE 几个常用的全局API1. extend vue.extend(options) : {object} options # 创建组件的构造函数为了复用 通过vue.extend 源码分析下来， extend 是扩展继承了父类的属性，方法 (深度复制)。...

一.  全局组件      注册全局组件后，允许我们在同一页面任意组件中使用。这里我们主要总结一下全局组件基本用法，注意事项及组件间传值，组件函数调用。这里已一个模态窗口的组件为例：1.  dialogComponent  组件（子组件）     如下为实例代码 （这里的实例代码是 amd 规范，比较老的代码。）// html 模板var template_thml = '...