vue源码解析
文章平均质量分 71
从Vue源码的入口文件开始,解析响应式的入口到实现,虚拟dom,模板编译,组件化的实现过程
进阶__前端
这个作者很懒,什么都没留下…
展开
-
Vue 的自我模拟面试
介绍一下Vue的响应式系统Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应。在响应式系统中,Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者,而监听器watch、计算属性computed、视图渲染template/render三个角色同时作为订原创 2021-02-06 16:46:23 · 160 阅读 · 0 评论 -
vue3.0 Vite 实现
Vite 介绍概念:Vite是一个面向现代浏览器的一个更轻,更快的web应用开发工具它基于ECMACript标准原生模块系统(ES Module)中的type=“mudole” 特性实现Vite 项目依赖Vite@vue/compiler-sfc : 编译.vue结尾的单文件组件基础使用vite servevite build使用serve时候,会开启一个web服务器,在开启服务器,不需要像vue-cli进行编译文件,启动非常快vite servevue-cli s原创 2021-01-25 16:20:20 · 569 阅读 · 0 评论 -
vue3.0 响应式系统
介绍Proxy实现监听属性多层属性嵌套,在访问属性的过程中处理下一级属性默认监听动态添加的属性默认件套属性的删除操作默认监听数组索引和length属性可以作为单独模块使用核心方法reactive/ref/toRefs/computedeffecttracktriggerProxy对象'use strict' 问题1: set 和 deleteProperty 中需要返回布尔类型的值 在严格模式下,如果返回 false 的话会出现 Type Er原创 2021-01-24 18:26:07 · 446 阅读 · 0 评论 -
Vue3.0 Composition API
Composition API是vue 3.0 新增的API,依然可以使用之前版本options API实现一个监听鼠标位置案例,使用的是vue 3.0 的源码data必须是函数,统一了data的写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial原创 2021-01-22 19:15:21 · 190 阅读 · 0 评论 -
Vue.js 3.0介绍
源码组织方式与2.0的区别源码组织方式的变化 ,全部采用TS重写,独立的功能模块提取到不同的包中Composition API,3.0依然兼容2.x,增加组合API性能提升 ,使用proxy代理对象,重写响应式代码,对编译器进行优化,重写虚拟DOM,服务端渲染提升到2-3倍Vite,使用其在开发阶段测试不需要打包,可以直接运行项目,提升开发效率源码组织方式采用Typescript重写,使用Monorepo管理项目结构packages目录下,compile开头的都是编译相关的,run原创 2021-01-21 17:53:02 · 915 阅读 · 0 评论 -
封装vue.js 组件库
组件化开发开源组件库:element-yi,iviewCDDCDD(component-Driven Development)自下而上从组建级别开始,到页面级别结束好处:组建在最大程度被重用并行开发可视化测试处理组件的边界情况root−−通过root -- 通过root−−通过root可以访问vue的根实例,操作根实例的成员KaTeX parse error: Expected 'EOF', got '#' at position 8: parent/#̲childre原创 2021-01-19 19:42:43 · 259 阅读 · 0 评论 -
Vue 自定义hash Router
// Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象let _Vue = nullexport default class VueRouter { // 静态方法, 注意参数是 Vue构造器 static install(Vue){ // 1. 判断是否已经被注册过(单例模式) if(VueRouter.install.installed){ retur原创 2021-01-01 15:12:12 · 261 阅读 · 0 评论 -
简述 Diff 算法的执行过程
diff 算法是进行同级数据对比的一个过程,在同级对比的过程中,设置给对应老节点开始-结束的索引,新节点开始-结束的索引,进行遍历,更新位置,或是删除的一个过程。当oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx 条件成立,进行while循环先进行节点数据为空时候的判断,oldStartVnode 为 null,则 oldStartVnode 等于 oldCh 的下一个子节点,即 oldStartVnode 的下一个兄原创 2020-12-29 17:57:14 · 677 阅读 · 0 评论 -
简述vue中的虚拟dom及diff算法
为什么使用虚拟DOM手动操作DOM比较麻烦,而且需考虑兼容性,但是随项目复杂度,dom操作更复杂为了简化DOM的复杂操作出现mvvm框架,解决视图-状态的同步问题为简化视图操作可使用模板引擎,但是模板没解决跟踪状态变化的问题,所以使用Virtual dom VirtualDom好处是状态改变不需要更新DOM,只需要虚拟树描述,Virtual DOM内部将有效更新dom什么是虚拟DOMVirtual DOM 就是 普通的JS对象,以对象的结构描述DOM结构因为不是真实DOM节点,所以叫做虚原创 2020-12-29 17:18:52 · 550 阅读 · 0 评论 -
前端方便阅读源码 的快捷键
快速找到变量位置光标移动到 is函数,按F12或者 Ctrl + 点击鼠标左键返回之前位置ALT + 左箭头查看不同文件定义函数或者变量选中 例如.array()按F12 ,显示对应文件点击对应的标题部分,直接跳转到对应文件返回之前文件 ALT + 左键...原创 2020-12-27 17:05:54 · 158 阅读 · 0 评论 -
Vue 响应式原理模拟
Vue 响应式模拟原理<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原创 2020-12-26 18:47:07 · 166 阅读 · 0 评论 -
Vue 基础回顾
Vue 原理的解析解析vue的基础用法Vue Router原理分析,实现 虚拟DOM库Snabbdom源码实现响应式原理分析与实现Vue.js源码分析Vue 基础结构<script crossorigin="anonymous" integrity="sha512-tbfpVZegVjOUS9H3X526XZJxi/dPnhiGRM8Z83AY8kbFBrZLuug/mU57PJJsdXn38dlXjrUxtaEOl11Y1uoaRQ==" src="https://lib.baomi原创 2020-12-24 14:27:13 · 100 阅读 · 0 评论 -
Vue key的优点
Vue key的优点key的使用就是在updateChildren方法中没用key的情况1.进行sameVnode对比时候,没有key值,返回的都是相同节点2.进行patchVnode对比节点,找到差异,更新dom3.直到找到判断文本节点是否相同时,循环执行4.直到找到更新节点,samevnode因为没有key值,依然会继续执行5.直到最后,会找到所有更新的dom进行多次节点更新操作使用key值内容未发送变化项进行对比找到sameVnode节点key值不同,会从后向前比较都是文本节点原创 2021-01-09 17:42:22 · 157 阅读 · 0 评论 -
vue Virtual DOM创建过程
vue Virtual DOM创建过程在 lifecycle.js 中的mountComponent 中定义了updateComponent,接收_render()方法作为参数,render接收用户传入的render函数在render.js中定义了_render方法,其中通过call接收render函数,改变内部this,使用了createElement函数,c与createElement函数,_c与createElement函数,c与createElement都是执行createElement函原创 2021-01-09 17:41:13 · 307 阅读 · 0 评论 -
Vue 数据响应式过程
数据响应式过程1.入口 src/core/instance/init.jsinitstate(vm) vm状态的初始化初始化了_data,_props,methods等调用了 initData(vm)在 initData中 获取传入的数据,调用observe方法接收data并做出响应式的处理observe在接收数据,创建一个 new Observer对象,将其 对应的数据转换为set/getObserver 中 缓存了对应的数据在_ob_上,对数组和对象做了对应的处理,数组增原创 2021-01-09 17:40:39 · 186 阅读 · 0 评论 -
Vue 初始化 执行过程
Vue 初始化 执行过程先在platforms 下的 entry-runtime-with-compile.js调用 Vue.$mountd 的获取el对象, 挂载mount方法 ,将Vue的模块导出找到 core/instance/index.js ,获取 vue的构造函数,初始化Vue 上的静态方法,例如 set,delete,nextTick初始化Vue 上的实例成员,就是在Vue的原型上混入相应的成员,进行patch方法进行初次的渲染到el对象上,例如 data,data,data,pr原创 2021-01-09 17:39:52 · 3231 阅读 · 0 评论 -
vue 组件源码分析
vue 组件源码分析组件注册1.全局组件:全局使用2.局部组件:只能在内部使用Vue.component() 的实现位置:src/core/global-api/index.js 内的initAssetRegisters()注册了compoennt方法作为一个字符串定义在ASSET_TYPES 中,函数接收Vue实例作为参数component接收id和definition做参数之后判断如果是组件或是指令,作出特殊处理,如果是过滤器记录到Vue全局配置上判断type是component的情况原创 2021-01-09 17:39:08 · 272 阅读 · 0 评论 -
Vue 模板编译的过程
Vue 模板编译的过程Vue中的模板编译就是将模板编译成render渲染函数模板编写,便于阅读,便于交互,编写render函数比较复杂编译过程入口: src/platforms/web/entry-runtime-with-compile.js如果有render函数,进行render调用,没有render,进行模板转换render函数调用createCompile函数,接收baseCompile函数将模板转换为ast语法树,描述代码结构使用optimize(ast,options)优原创 2021-01-09 17:38:00 · 672 阅读 · 1 评论 -
Vue的模板编译和组件化 解析
模板编译介绍模板编译是将模板转换成渲染函数Vue2.x 使用Vnode 描述视图以及各种交互,用户自己编写VNode比较复杂用户只需要编写类似HTML的代码 —Vue.js模板,通过编译器将模板准换位返回VNode的render函数.vue文件会被webpack在构建的过程中转换为render函数vue内部其实是不支持的,但是使用vue-loader进行编译的模板编译的结果完整版Vue入口,src/platforms/web/util/entry-runtime-with-compile原创 2021-01-09 17:36:34 · 897 阅读 · 0 评论 -
Vue 组件及创建,更新过程源码
vue 组件源码分析组件注册1.全局组件:全局使用2.局部组件:只能在内部使用Vue.component() 的实现位置:src/core/global-api/index.js 内的initAssetRegisters()注册了compoennt方法作为一个字符串定义在ASSET_TYPES 中,函数接收Vue实例作为参数 component接收id和definition做参数之后判断如果是组件或是指令,作出特殊处理,如果是过滤器记录到Vue全局配置上判断type是compon原创 2021-01-09 17:24:31 · 294 阅读 · 0 评论 -
Vue Vitrual DOM实现
虚拟DOM库 - SnabbdomVue 响应式原理模拟实现Vue源码解析 - 响应式原理虚拟DOM概念虚拟dom (Virtual DOM) 是使用 JavaScript 对象描述真实domVue.js 中的虚拟DOM借鉴snabbdom,并添加了vue的特性例如:指令和组件机制,插槽为什么使用虚拟dom避免直接操作dom,提高开发效率作为中间层可以跨平台虚拟DOM不一定可以提高性能 首次渲染时候可能会增加开销 复杂视图情况下提升渲染性能原创 2021-01-08 16:30:14 · 192 阅读 · 0 评论 -
Vue initAssetRegisters()创建组件、指令、过滤器源码
// 注册Vue.directive 、 vue.component() 、 Vue.filter()initAssetRegisters(Vue)/* @flow */import { ASSET_TYPES } from 'shared/constants'import { isPlainObject, validateComponentName } from '../util/index'export function initAssetRegisters (Vue: GlobalAPI原创 2020-12-30 17:54:11 · 178 阅读 · 0 评论 -
Vue.nextTick 源码实现
异步更新队列-nextTick()Vue 更新DOM是异步执行的,批量的在下次DOM更新循环结束之后执行延迟回调。在吸怪数据之后立即使用此方法,获取更新后的DOMvm.$nextTick(){/操作dom/} Vue.nextTick(function(){})vm.$nextTick()代码演示<div id="app"> <p ref="p1">{{msg}}</p></div><script> const vm原创 2021-01-04 09:05:10 · 160 阅读 · 0 评论 -
Vue delete的源码实现
vm.$delete功能删除对象的属性,如果对象是响应式的,确保删除能茶法更新视图,这个方法主要用于避开Vue不能检测到属性被删除的限制,但是你应该很少会使用它注意:目标对象不能说一个Vue实例或者Vue实例的跟数据对象示例data : { namelist : { id : 1, name : 'aaaa' } }// 删除namedelete this.namelist.name;//js方法原创 2021-01-03 18:12:33 · 276 阅读 · 0 评论 -
Vue.watch 源码实现
watchvm.$watch(expOrFn,callback,[options])功能观察Vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式值接收监督的键路径参数exOrFn:要监视的$data 中的属性,可以说表达式或函数callback:数据变化后执行的函数函数:回调函数对象:具有handler属性(字符串或者函数),如果该属性为字符串则methods中相应的定义options:可选的选项deep: 布尔类型,深度监听immediate: 布尔原创 2021-01-03 18:54:31 · 359 阅读 · 0 评论 -
Vue响应式原理 - 响应式处理
响应式处理入口通过查看源码解决下面问题vm.msg = {count:3} ,重新给属性赋值,是否是响应式的?vm.arr[0] = 4,给数组元素赋值,视图是否会更新vm.arr.length = 0,修改数组的length,视图是否会更新vm.arr.push(4),视图是否会更新响应式处理的入口整个响应式处理的过程是比较复杂的,从src/core/instance/init.jsinitState(vm) vm 状态的初始化初始化了_data、_props、methods等原创 2021-01-03 17:12:45 · 408 阅读 · 1 评论 -
Vue初始化 - 实例成员
地址 :src\core\instance\index.js具体实现都是在vue的原型上增加对应的成员,属性或者方法实例化过程import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecy原创 2020-12-30 19:05:16 · 412 阅读 · 0 评论 -
Vue.mixin 源码
/* @flow */import { mergeOptions } from '../util/index'export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { // mergeOptions 的作用是将 mixin的所有成员拷贝到options // this 就是vue构造函数,全局的vue this.options = mergeOptions(thi原创 2020-12-30 17:34:45 · 151 阅读 · 0 评论 -
Vue.use 源码
Vue.use() 用来注册插件/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { // use.js导出 Vue.use = function (plugin: Function | Object) { // 给vue增加 use方法,接收plugin插件作为参数 const installedPlugins = (this._installedPl原创 2020-12-30 17:32:06 · 265 阅读 · 0 评论 -
Vue.extend 源码
Vue.entend() 基于传入的options 返回一个组件的构造函数/* @flow */import { ASSET_TYPES } from 'shared/constants'import { defineComputed, proxy } from '../instance/state'import { extend, mergeOptions, validateComponentName } from '../util/index'export function initExt原创 2020-12-30 17:43:16 · 308 阅读 · 0 评论 -
Vue 初始化-静态成员
地址:vue-dev\src\core\global-api\index.js源码地址: https://github.com/vuejs/vue/* @flow */import config from '../config'import { initUse } from './use'import { initMixin } from './mixin'import { initExtend } from './extend'import { initAssetRegisters } f原创 2020-12-30 17:58:12 · 235 阅读 · 2 评论 -
Vue响应式原理--初始化过程
目标Vue.js静态成员和实例成员的初始化过程(vue.set、vue.get、vue.extend等)首次渲染的过程数据响应式的原理准备源码地址: https://github.com/vuejs/vue结构 dist:存放打包后文件 examples:存放示例文件,例如表格的使用等 src:compile/模板编译 core:vue核心 components:存放组件,例如keep-live global-api:存放use、m原创 2021-01-02 18:46:28 · 403 阅读 · 0 评论 -
Vue set方法使用及源码解析
使用场景:实例创建之后添加新的属性到实例上,它不会触发视图更新。由于 JavaScript 的限制,Vue 不能检测以下变动的数组。通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新,vue中检测不到对象属性的添加和删除解决方案:1).data 对象就像组件状态的模式(schema)。在它上面声明所有的属性让组件代码更易于理解。2).添加一个顶级响应属性会强制所有的 watcher 重新计算,因为它之前不存在,没有 watcher 追踪它。原创 2020-12-26 18:01:07 · 346 阅读 · 0 评论