vue是一个渐进式框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。今天我们来看下vue是如何支持框架的。也就是vue.use这部分的实现。下面我们以vue-router为例来进行说明，import VueRouter from ‘vue-router‘ Vue.use(VueRouter)这段代码大家用过vue-router插件的应该很熟悉了。vue-router就是vue的一个插件了。然后我们首先来看下vue.use的源码实现。首先，我们看下vue.use()的入参要求。1，含有i...
这篇文章主要介绍了关于vue数据控制视图源码的分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下分析vue是如何实现数据改变更新视图的。前记三个月前看了vue源码来分析如何做到响应式数据的, 文章名字叫vue源码之响应式数据, 最后分析到, 数据变化后会调用Watcher的update()方法. 那么时隔三月让我们继续看看update()做了什么. (这三个月用react-native做了个项目, 也无心总结了, 因为好像太简单了).本文叙事方...
这篇文章主要介绍了vue 虚拟dom的patch源码分析，内容挺不错的，现在分享给大家，也给大家做个参考。本文介绍了vue 虚拟dom的patch源码分析，分享给大家，具体如下：源码目录：src/core/vdom/patch.jsfunction updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {let oldStartIdx = 0let newStartIdx = 0let oldEndIdx = oldCh.length - 1let oldStartVnode = oldCh[0]let oldEndVnode = oldCh[oldEndIdx...
这篇文章主要介绍了 Vue 源码分析之 Observer实现过程，Observer 最主要的作用就是实现了touch -Data(getter) - Collect as Dependency这段过程，也就是依赖收集的过程，感兴趣的朋友一起学习吧导语：本文是对 Vue 官方文档深入响应式原理（https://cn.vuejs.org/v2/guide/reactivity.html）的理解，并通过源码还原实现过程。响应式原理可分为两步，依赖收集的过程与触发-重新渲染的过程。依赖收集的过程，有三个很重要的类，分别是...
虽然工作中一直使用Vue作为基础库，但是对于其实现机理仅限于道听途说，这样对长期的技术发展很不利。所以最近攻读了其源码的一部分，先把双向数据绑定这一块的内容给整理一下，也算是一种学习的反刍。本篇文章的Vue源码版本为v2.2.0开发版。Vue源码的整体架构无非是初始化Vue对象，挂载数据data/props等，在不同的时期触发不同的事件钩子，如created() / mounted() / update()等，后面专门整理各个模块的文章。这里先讲双向数据绑...
这一节主要记录一下：Vue 的初始化过程 以下正式开始： Vue官网的生命周期图示表重点说一下 new Vue()后的初始化阶段，也就是created之前发生了什么。initLifecycle 阶段 export function initLifecycle (vm: Component) {const options = vm.$options// locate first non-abstract parentlet parent = options.parentif (parent && !options.abstract) {while (parent.$options.abstract && parent.$parent) {parent = parent.$pa...
深入Vue-Router源码分析路由实现原理 使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。 到发文时使用的版本是： - vue (v2.5.0) - vue-router (v3.0.1)一、vue-router 源码结构 github 地址：https://github.com/vuejs/vue-routercomponents下是两个组件<router-view> 和 <router-link> history是路由方式的封装，提供三种...
导语： 本文是对 Vue 官方文档深入响应式原理（https://cn.vuejs.org/v2/guide/reactivity.html）的理解，并通过源码还原实现过程。 响应式原理可分为两步，依赖收集的过程与触发-重新渲染的过程。依赖收集的过程，有三个很重要的类，分别是 Watcher、Dep、Observer。本文主要解读 Observer 。 这篇文章讲解上篇文章没有覆盖到的 Observer 部分的内容，还是先看官网这张图：Observer 最主要的作用就是实现了上图中touch -Data(gett...
本文介绍了vue 虚拟dom的patch源码分析，分享给大家，具体如下：源码目录：src/core/vdom/patch.jsfunction updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {let oldStartIdx = 0let newStartIdx = 0let oldEndIdx = oldCh.length - 1let oldStartVnode = oldCh[0]let oldEndVnode = oldCh[oldEndIdx]let newEndIdx = newCh.length - 1let newStartVnode = newCh[0]let newEndVnode = newCh[newEndIdx...
1. 什么是Vue.nextTick()？官方文档解释如下：在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 2. 为什么要使用nextTick? <!DOCTYPE html> <html><head><title>演示Vue</title><script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script></head><body><div id="app"><template><div ref="list">{{name}}</div></template></div><script>new Vue({el: #app,data: {name...
前言 虽然工作中一直使用Vue作为基础库，但是对于其实现机理仅限于道听途说，这样对长期的技术发展很不利。所以最近攻读了其源码的一部分，先把双向数据绑定这一块的内容给整理一下，也算是一种学习的反刍。 本篇文章的Vue源码版本为v2.2.0开发版。 Vue源码的整体架构无非是初始化Vue对象，挂载数据data/props等，在不同的时期触发不同的事件钩子，如created() / mounted() / update()等，后面专门整理各个模块的文章。这里先讲双向...
这两天学习了Vue transition感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 本来打算自己造一个transition的轮子，所以决定先看看源码，理清思路。Vue的transition组件提供了一系列钩子函数，并且具有良好可扩展性。 了解构建过程 既然要看源码，就先让Vue在开发环境跑起来，首先从GitHub clone下来整个项目，在文件./github/CONTRIBUTING.md中看到了如下备注，需要强调一下的是，npm run dev构建的是runtime ...
我想有过vue开发经验的，对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时，必须通过Vue.use方法引入，才起作用。那么vue.use在组件引入之前到底做了那些事情呢？让我们一窥究竟。 先上vue.use源码 // javascript的方法是可以传递的，哈哈 Vue.use = function (plugin) {/* istanbul ignore if */if (plugin.installed) {return}// additional parametersvar args = toArray(arguments, 1);args.unshift(this);if...
前言 相信一说到监听，当然就离不了设计模式中鼎鼎大名的观察者模式。举个例子，你家后院着火了，可一定要等到烟雾很大火光很亮你才能发现啊，可是当你安装了一个火灾预警器，当发生火灾就立马能够通知到你了。这就是一个典型的观察者模式。当然也还有一些其他变种，比如发布/订阅（publish/subscribe）模式。 我们知道如果要将数据和视图关联起来，在数据变更的时候，同步视图，同理视图变更，数据也发生变化。vue.js是怎么实现这...
之前分析了vue组件之间的关系，每个组件都是一个独立的实例，那么涉及到组件之间的通信大概可以分为以下几种情况：父子组件的通信：父组件向子组件传递props，子组件向父组件冒泡事件。兄弟组件间的通信：子组件先传递事件给父组件，然后再通过父组件传递给另一个子组件。或者通过一个事件总线组件来传递事件。（如果想深入了解可以自行百度，这里就不深入讨论）组件关系复杂：将共享的数据抽出来，放到全局。这个用来存放共享数据...