vue源码

vue源码解读之双向数据绑定

vue源码解读之----双向数据绑定模式概念（发布-订阅模式）图解（发布-订阅模式）双向数据绑定概念模式概念（发布-订阅模式）发布-订阅模式又称为观察者模式，它定义的是一种一对多的依赖关系，当一个状态发生改变的时候
毛栗子yummy·2020-08-16 09:15

vue源码学习一之响应式原理及虚拟DOM

vue源码学习一之响应式原理及虚拟DOM一、准备工作Vue源码的获取项目目录调试二、初始化分析入口文件.
连年zlh·2020-08-16 09:14

学习vue源码（10）手写render渲染函数

compile部分已经讲完了（compile部分分为解析器+优化器+代码生成器），终于走到了render，今天就来给自己记录下渲染三部曲的第二部render，（渲染三部曲=compile+render生成Vnode+将Vnode通过update挂载到页面上），update里有一系列diff操作。咦，render内容不多的噔噔噔噔render的作用大家应该清楚就是执行compile生成的render
前端阳光·2020-08-16 09:36

学习vue源码（7）手写解析器

通过学习vue源码（6）熟悉模板编译原理的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析成AST的呢？
前端阳光·2020-08-16 09:36

学习vue源码（8）手写优化器

前面的学习vue源码（6）熟悉模板编译原理我们谈到模板编译分为解析器，优化器，代码生成器。在学习vue源码（7）手写解析器里我们已经学会了解析器怎么实现，现在就来看看优化器怎么实现吧。
前端阳光·2020-08-16 09:36

Vue源码学习(持续更新中)

Vue源码学习章节目录准备工作认识Flow为什么用FlowFlow的工作方式类型推断类型注释数组类和对象nullFlow在Vue.js源码中的应用总结Vue.js源码目录设计compilercoreplatformserversfcshared
陈坚泓·2020-08-16 09:35

vue源码解析之双向数据绑定的原理

一、双向数据绑定的原理分析双向数据绑定：建立在单向数据绑定的基础之上的，也就是在model-->View的基础之上的。双向数据绑定的实现过程：在解析v-model指令时,给当前元素添加input监听当input的value发生改变时,将最新的值赋值给当前表达式所对应的data属性实现双向数据绑定，核心过程如下：//解析:v-modelmodel:function(node,vm,exp){//实现
旧城tk·2020-08-16 09:31

300行代码实现Vue的MVVM响应式原理

前言源码下载Vue的响应式原理是面试老生常谈的问题了，而大多数人会选择直接背答案这样的形式去应付面试，一旦面试官继续追问，便什么也答不上来了，所以，我希望能通过参考Vue源码的形式，动手编写代码（大概300
GHkmmm·2020-08-16 09:53

Vue源码解读双向数据绑定小结

MVVM框架介绍M(Model，数据模型层)V(View，视图层，数据展示，html页面)VM(ViewModel，视图模型，V与M连接的桥梁)MVVM框架实现了数据的双向绑定-当M层数据进行修改时，VM层会检测到变化，并且通知V层进行相应得修改-修改V层则会通知M层数据进行修改-MVVM框架实现了视图与模型层得相互解耦几种双向数据绑定的方式发布-订阅者模式，也叫观察者模式（backbone.js
妖怪不慌不张·2020-08-16 09:37

vue源码分析1-new Vue做了哪些操作

首先我们可以看到vue的源码在github上有，大家可以克隆下来。git地址我们主要看src下的内容。1.现在我们来分析下newVue都做了哪些操作varapp=newVue({el:'#app',mounted:{console.log(this.message)}data:{message:'HelloVue!'}})复制代码我们都知道new关键字在js中代表实例化一个对象，而vue实际上是一
weixin_34395205·2020-08-16 09:50

Vue源码: 关于vm.$delete()/Vue.use() 内部原理

vm.$delete()vm.$delete用法见官网。为什么需要Vue.delete()?在ES6之前,JS没有提供方法来侦测到一个属性被删除了,因此如果我们通过delete删除一个属性,Vue是侦测不到的,因此不会触发数据响应式。见下面的demo。VueDemo名字:{{user.name}}年纪:{{user.age}}删除一个年纪字段constapp=newVue({el:"#app",d
weixin_34258838·2020-08-16 09:36

基于Object.defineProperty之后，vue源码解析依赖收集、依赖触发【二】

前言：上篇已经了解到了，defineProperty的定义、使用场景、解决的问题，接下来，我们一起来看下vue源码，篇幅有点大，希望你能耐心的看下去，然后有收获，有任何问题，我们可以沟通交流复制代码接下来你将会了解到以下内容
weixin_34256074·2020-08-16 09:05

你不知道的Vue响应式原理

本文根据Vue源码v2.x进行分析。这里只梳理最源码中最主要的部分，略过非核心的一些部分。响应式更新主要涉及到Watcher，Dep，Observer这几个主要类。
weixin_34179762·2020-08-16 09:56

Vue源码解读之Dep,Observer和Watcher

在解读Dep,Observer和Watcher之前，首先我去了解了一下Vue的数据双向绑定，即MVVM，学习于:https://blog.csdn.net/u013321...以及关于Observer和watcher的学习来自于：https://www.jb51.net/article/...整体过程Vue实例化一个对象的具体过程如下：新创建一个实例后，Vue调用compile将el转换成vnod
weixin_34099526·2020-08-16 09:20

深入理解Vue源码系列-1.从new Vue()开始说起

简介这是一个分析vue源码的系列专栏,争取用最简单的文字,解析Vue背后的思想以及设计模式,有不懂的欢迎在下面提问。
weixin_34054931·2020-08-16 09:16

Vue源码解析之数组变异的实现

众所周知，在Vue中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。这是什么原因？原因在于：Vue的响应式系统是基于Object.defineProperty这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听，举个栗子：v
weixin_34025151·2020-08-16 09:44

Vue源码分析系列二：$mount()方法

调用$mount()方法提示：描述都写在代码的注释中在initMixin()的最后执行了如下操作:if(vm.$options.el){vm.$mount(vm.$options.el);}复制代码执行$mount()方法query()functionquery(el){if(typeofel==='string'){varselected=document.querySelector(el);i
weixin_33849942·2020-08-16 09:30

Vue源码: 关于vm.$watch()内部原理

vm.$watch()用法关于vm.$watch()详细用法可以见官网。大致用法如下:constapp=newVue({el:"#app",data:{a:{b:{c:'c'}}},mounted(){this.$watch(function(){returnthis.a.b.c},this.handle,{deep:true,immediate:true//默认会初始化执行一次handle})}
weixin_33842304·2020-08-16 09:58

Vue 源码解析（实例化前） - 响应式数据的实现原理

前言上一篇文章，大概的讲解了Vue实例化前的一些配置，如果没有看到上一篇，通道在这里：Vue源码解析-实例化Vue前（一）在上一篇的结尾，我说这一篇后着重讲一下defineReactive这个方法，这个方法
weixin_33800463·2020-08-16 09:54

【vue源码篇】computed源码详解

exportfunctioninitState(vm:Component){vm._watchers=[]constopts=vm.$optionsif(opts.props)initProps(vm,opts.props)if(opts.methods)initMethods(vm,opts.methods)if(opts.data){initData(vm)}else{observe(vm._
weixin_33787529·2020-08-16 09:53

Vue源码解析之数组变异

力有不逮的对象众所周知，在Vue中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。这是什么原因？原因在于：Vue的响应式系统是基于Object.defineProperty这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听
weixin_33754913·2020-08-16 09:21

vue源码学习-vnode的挂载和更新流程

概述本文主要介绍在视图的渲染过程中，Vue是如何把vnode解析并挂载到页面中的。我们通过一个最简单的例子来分析主要流程：{{someVar}}newVue({el:'#app',data:{someVar:'init'},mounted(){setTimeout(()=>this.someVar='changed',3000)}})页面初始会显示"init"字符串，3秒钟之后，会更新为"chan
weixin_33709219·2020-08-16 09:16

Vue源码解析

系列文章链接主要记录自己开始学习Vue的一些源码阅读：基于2.5.8版本Vue-SourceCode介绍了Vue构造函数如何来的，以及其上的属性/方法/原型方法/静态方法newVue(options)的过程发生了什么vnode对象如何生成vnode对象如何挂载到真实的DOM节点…..VueRouter-SourceCode介绍了VueRouter的插入，VueRouter的使用，VueRouter
weixin_33704234·2020-08-16 09:45

VUE源码解析心得

解读vue源码比较好奇的几个点：VUEMVVM原理http://www.cnblogs.com/guwei4037/p/5591183.htmlhttps://cn.vuejs.org/v2/guide
weixin_30786617·2020-08-16 09:04

vue.js源码解读系列 - 剖析observer,dep,watch三者关系 如何具体的实现数据双向绑定

最近在解析vue源码，后期会不断更新有兴趣的可以关注我的博客关注我的博客：zane的个人博客Vue双向数据绑定的核心和基础api是Object.defineProperty,其内部真正参与数据双向绑定流程的主要有
只此一生的我·2020-08-16 08:17

Vue 源码之数组更新检测

Vue源码之数组更新检测Vue通用Object.defineProperty劫持数组，发布订阅模式添加订阅或者触发通知，从而实现双向绑定的。本篇主要讲讲对于数组的变化，Vue是如何检测的。
薛定谔的panda·2020-08-16 08:15

Vue 源码分析之proxy代理

Vue源码分析之proxy代理当我们在使用Vue进行数据设置时，通常初始化格式为:letdata={age:12,name:'yang'}//实例化Vue对象letvm=newVue({data})//
Robbie丨Yang·2020-08-16 08:57

vue源码解析之--数据双向绑定

在短时间内迅速使用vue构建了两个demo，一个eleme外卖平台webapp，还有一个是新闻网站。除了练习项目，也阅读了很多文章，收获颇多，成长很快。总结一下：vue简单，轻量，易上手，API简单，模板也符合web编程习惯。vue是MVVM的一个很好实践，核心思想是数据驱动和组件化。数据驱动指的是，model改变，驱动view自动更新。支持自动计算属性和依赖追踪的模板表达式。组件化，指的是用可复
秋天1014童话·2020-08-16 08:26

vue源码学习随笔一

本篇是我学习Vue源码的记录，可能有错漏，有不足，甚至半途而废，但是无论怎么样，既然开始学习了，那就留下一些痕迹。不足，错漏欢迎指正。简单的介绍下我的研究对象，当前版本2.6.11。
明长歌·2020-08-16 08:44

Vue源码学习(2)——Vue侦听器watch实现原理

实现侦听总结前言看这篇文章之前最好先对Vue的MVVM实现原理有一定的认识，因为这是Vue的核心概念，其他的工具大部分都是在此之上锦上添花，如果你不是很了解，可以先看看这篇文章：Vue的MVVM原理实现原理分析initState在Vue
素者素心·2020-08-16 08:47

VUE源码学习第二篇--准备工作

一、目录结构首先来"一览众山小"，看下整体的的目录结构。|—benchmarks基准测试，与其他竞品做比较|—dist打包之后文件所在位置，包括完整版本，运行时版本版本，主要关注下vue.js|—examples部分示例|—flow因为Vue使用flow来进行静态类型检查，这里定义了声明了一些静态类型|—packagesvue还可以分别生成其它的npm包|—scripts|—src主要源码所在位置
恰恰虎·2020-08-16 08:05

VUE源码学习第四篇--new Vue都干了啥（options合并）

一、第一部分：属性设置第一部分比较简单，主要设置vm的两个属性。vm._uid=uid++定义了vm唯一标识_uid属性，每次newVue都会递增。//aflagtoavoidthisbeingobservedvm._isVue=true定义vm的_isVue属性为true，这个属性从注释看是为了vm对象避免被observed，大家可以先认为和数据响应有关，后续再关注。其实第一部分还有一段代码，i
恰恰虎·2020-08-16 08:05

Vue源码解读——实现一个双向绑定（Object.defineProperty与observe）

什么是双向绑定在vue中，实现一个mvvm的双向绑定很简单关键词：Object.defineProperty与observe{{word}}changemodelvarvm=newMVVM({el:'#mvvm-app',data:{word:'HelloWorld!'},methods:{sayHi:function(){this.word='Hi,everybody!';}}});这里演示了一
daisy_Hawen·2020-08-16 08:20

Vue源码系列3------Vue源码构建原理

了解了单一的模块，下面来看看Vue是怎么组织这些模块的Vue.js源码是基于Rollup【打包构建工具；更轻量】构建的，它的构建相关配置都在scripts目录下。构建脚本通常一个基于NPM托管的项目都会有一个package.json文件，它是对项目的描述文件，它的内容实际上是一个标准的JSON对象。我们通常会配置script字段作为NPM的执行脚本，Vue.js源码构建的脚本如下：这里总共有3条命
Emily Ching·2020-08-16 08:11

Vue源码系列7------VueDOM渲染-----render函数

Vue中_render方法其实是实例的一个私有方法，用来把实例渲染成一个虚拟Node。源方法定义在src/core/instance/render.js文件中：Vue.prototype._render=function():VNode{constvm:Component=thisconst{render,_parentVnode}=vm.$options//reset_renderedflago
Emily Ching·2020-08-16 08:39

vue源码~render函数、 Virtual DOM、createElement学习

renderVue的_render方法是实例的一个私有方法，它用来把实例渲染成一个虚拟Node。它的定义在src/core/instance/render.js文件中：Vue.prototype._render=function():VNode{  constvm:Component=this  const{render,_parentVnode}=vm.$options  //reset_ren
多纤果冻·2020-08-16 07:17

vue源码学习之 数据驱动、 vue实例化、vue实例挂载实现

目录数据驱动newVue发生了什么Vue实例挂载的实现数据驱动Vue.js一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM，而是通过修改数据。它相比我们传统的前端开发，如使用jQuery等前端库直接修改DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为DOM变成了数据的映射，我们所有的逻辑都是对数
多纤果冻·2020-08-16 07:17

vue源码之旅-2 - 数据响应式原理的实现

在官方文档的深入响应式原理这一节可以看到，Vue是通过Object.defineProperty来定义数据的响应式的，接着从源码层面来喵一眼到底是怎么做的？src/core/instance/state.js我简单注视了一下源码/***1.调用initData()方法,初始化用户传入的data*@param{*}vm*/functioninitData(vm:Component){letdata=
素燃·2020-08-16 07:02

Vue源码窥探之new Vue之后发生了什么？

为了完整的了解整个机制，我们最好选择客户端compile的版本，也即Runtime+Compiler。在我们使用Vue-Cli初始化一个Vue项目的时候，会询问我们使用RuntimeOnly版本还是Runtime+Compiler版本。RuntimeOnly使用该版本时，我们需要借助webpack的vue-loader工具来把.vue文件编译成JavaScript，体积比较小。Runtime+Co
qq_35534823·2020-08-16 07:56

Vue的响应式系统 vue源码

响应式系统UI在MVVM中指的是View，状态在MVVM中指的是Modal，而保证View和Modal同步的是View-Modal。Vue通过一个响应式系统保证了View与Modal的同步,由于要兼容IE,Vue选择了Object.defineProperty作为响应式系统的实现,但是如果不考虑IE用户的话,Object.defineProperty并不是一个好的选择,具体请看面试官系列(4):基
baoleilei6·2020-08-16 07:15

仿vue实现数据双向绑定

前段时间笔者学习了一下Vue的源码，也看了一些前辈对Vue源码研究的博客，然后用es实现了一个基础的数据双向绑定框架Hue，作为学习成果之一，在此分享给大家。
河鲜森·2020-08-16 07:42

vue原理之Watcher：vue的watch和$watch的原理，以及其背后new Watcher的流程

通过vue源码可得，newWatcher的流程：第一步：拿到第一个参数，如果是函数，直接拿到函数，如果不是函数，转换为函数（parsePath），这个作为getter，先不调用，只备用//pars
印第安米饭·2020-08-16 07:46

Vue源码解析02-数据响应式

Vue源码解析02-数据响应式开篇之前先了解几个相关概念MVC模式模式简介MVC的全称是Model(模型)-View(视图)-Controller(控制器)Model：这是数据层，存储项目所需的数据。
橘子骑士·2020-08-16 07:44

Vue源码学习系列04——Vue构造函数解析(二): 选项合并策略(optionMergeStrategies)

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/上一节可以看成是merge数据前期准备，下面就介绍到了我们的mergeOption的重头戏啦——merge。先看代码（仍然是mergeOptions里面的代码）：constoptions={}letkeyfor(keyinparent){mergeField(key)}for(keyinchild){if(!ha
袁杰Jerry·2020-08-16 07:23

【Vue】Vue源码第三步——初始化（initMixin）

为了帮助更好理解，本人做了一个思维导图，大家可以搭配思维导图享用。Vue初始化源码——思维导图Vue创建实例vue-dev\src\core\instance\index.jsimport{initMixin}from'./init'import{stateMixin}from'./state'import{renderMixin}from'./render'import{eventsMixin}
及时行乐、·2020-08-16 07:22

Vue源码学习系列03——Vue构造函数解析(一): 选项规范化(normalize)

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/在上一节分析了，Vue的构造函数中，只有一句this._init(options)，可见这行代码的重要性。今天我们就来详细的看看这个函数主要干了什么事。为了不那么抽象，我会用一个简单的例子来贯穿整个讲解。这个例子非常简单。varapp=newVue({el:'#app',data(){return{name:'h
袁杰Jerry·2020-08-16 07:52

vue源码学习一：Observer源码解析

通过vue在github上的源码分析一下，Observer在MVVM中实现劫持的原理，Observer类：先从框框第2部分开始分析：从observerArray方法下钻可以看到调用到observe方法从这里面可以看出，这是在做数据的递归，最后往下执行的是第3部分的walk方法，往下钻defineReactive方法，可以看到接下来开始核心了这边通过了defineProperty给对象属性添加了se
晒不干的咸鱼·2020-08-16 07:12

Vue源码分析之双向数据绑定

双向数据绑定建立在单向数据绑定（model-view）的基础之上实现流程：解析v-model指令时给当前元素添加input监听当input的value发生改变时，将最新的值赋给当前表达式所对应的data属性Compile.prototype={compile:function(node){varattrs=node.attributes,me=this;[].slice.call(attrs).f
慕斯策划一场流浪·2020-08-16 07:00

vue源码（八）揭开数据响应系统的面纱

本文是学习vue源码，之所以转载过来是方便自己随时查看，在这里要感谢HcySunYang大神，提供的开源vue源码解析，写的非常非常好，简单易懂，比自己看要容易多了，他的文章链接地址是http://hcysun.me
nicexibeidage·2020-08-16 07:41

vue源码（九）渲染函数的观察者与进阶的数据响应系统

实际上在揭开数据响应系统的面纱一节中我们仅仅学习了数据响应系统的部分内容，比如当时我们做了一个合理的假设，即：dep.depend()这句代码的执行就代表观察者被收集了，而dep.notify()的执行则代表触发了响应，但是我们并没有详细讲解dep本身是什么东西，我们只是把它当做了一个收集依赖的“筐”。除此之外我们也没有讲解数据响应系统中另一个很重要的部分，即Watcher，我们知道正是由于Wat
nicexibeidage·2020-08-16 07:41
上一页 14 15 16 17 18 19 20 21 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他