vue源码

Vue源码学习之模板编译

模板编译是在Vue.prototype.$mount(runtime-with-compiler.ts文件)函数中在没有render时调用触发的，生成render函数。const{render,staticRenderFns}=compileToFunctions(template,{outputSourceRange:__DEV__,shouldDecodeNewlines,shouldDeco
kgduu·2022-07-19 07:29

图解Vue 响应式流程及原理

在学习vue源码的时候发现组件化过程很绕？在响应式过程中Observer、Dep
·2022-07-08 19:38

Vue 源码中的工具函数

前言在Vue源码中，封装了很多工具函数，学习这些函数，一方面学习大佬们的实现方式，另一方面是温习基础知识，希望大家在日常工作中，简单的函数也可以自己封装，提高编码能力。
·2022-07-05 17:06

14.webpack ----Vue源码的打包

1.首先安装依赖，并且在mian.js引入import{createApp}from'vue'//vue代码constapp=createApp({template:`我是vue渲染出来的`data(){return{title:"Helloworld"}}})app.mount("#app")//挂载到某个地方2.安装vue3的版本：[email protected]对SFC(
要成为光的女人·2022-06-27 22:06

JavaScript 编写枚举的最有效方法分享

学习Vue源码前言假设有这样一个场景，我们需要统计员工的技术栈，目前我们需要标记的技术有CSS、JavaScript、HTML、WebGL。
·2022-06-22 18:28

3-2-1vue响应式数据源码

1.Vue源码解析--响应式原理最好不要太看重细枝末节支线主要看主线vue.js静态成员和实例成员初始化过程首次渲染过程数据响应式原理2.准备工作Vue源码的获取分析Vue2.6新版本发布后一段过渡时期
Rua魂·2022-06-04 18:09

Vue源码解读（一）：准备工作

最近在掘金上看到李永宁大佬的《Vue源码解读》系列文章后，又开始蠢蠢欲动了。这次主要是对核心实现的一个梳理，细节方面不会太过介绍。源码地址本次学习的Vue源码为2
明么·2022-06-04 18:03

java毕业设计论文源码介绍 基于Vue+ssm汽车租赁系统

一、源码描述这是一款javaWeb的前后端分离的Springboot和vue源码，包含论文和答辩ppt,前端vue.js,基于B/S模式,idea或者eclipse为开发工具,功能也比较全面，毕业设计使用
abo2020·2022-06-03 22:15

0215前端日报：vue源码剖析思维导图

给「前端开发博客」加星标，每天打卡学习长按二维码即可识别“进入网页”查看哟~1、vue源码剖析思维导图（一）趁这个“难得”的假期，学习了一下vue源码，说实话，对我这种小菜鸟来说非常难啃，但还咬咬牙坚持了下来
前端开发博客·2022-05-20 13:46

vue源码watcher阅读记录

1.首先从computed研究开始functioninitComputed(vm:Component,computed:Object){//首先使用连等方式，声明watchers，并给vue实例上添加_computedWatchers属性，二者指向同一对象，用来记录所有的computedconstwatchers=vm._computedWatchers=Object.create(null)//
·2022-05-13 17:04

petite-vue源码剖析-沙箱模型

在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：constevalCache:Record=Object.create(null)exportconstevaluate=(scope:any,exp:string,el?:Node)=>execute(scope,`return(
·2022-04-20 15:27

petite-vue源码剖析-沙箱模型

在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：constevalCache:Record=Object.create(null)e
^_^肥仔John·2022-04-20 15:00

petite-vue源码剖析-逐行解读@vue-reactivity之effect

当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。//./effect.tsexportfuncitoneffect(fn:()=>T,options?:ReactiveEffectOptions):ReactiveEffectRunner{if((fnasReactiveEffectRunne
·2022-04-19 10:14

petite-vue源码剖析-逐行解读@vue-reactivity之effect

当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。//./effect.tsexportfuncitoneffect(fn:()=>T,options?:R
^_^肥仔John·2022-04-19 09:00

petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive

本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。Map/WeakMap/Set/WeakSet的操作由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。Set的属性和方法size:number为访问器属性(accessorproperty)，返回Set对象中的值的个数add(
·2022-04-15 13:14

petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive

本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。Map/WeakMap/Set/WeakSet的操作由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。Set的属性和方法size:number为访问器属性(accessorproperty)，返回Set对象中的值的个数add(
·2022-04-15 10:26

petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive

本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。Map/WeakMap/Set/WeakSet的操作由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。Set的属性和方法
^_^肥仔John·2022-04-15 09:00

看Vue源码学到的实用代码！

面试常问题：判断数组和对象，下面这个方法可以快速区分var_toString=Object.prototype.toString;_toString.call(value).slice(8,-1)试试_toString.call([])和_toString.call({})的区别
·2022-04-07 14:11

02-vue源码分析之 vue3.0为何弃用Object.defineProperty而选择Proxy

前言在3.0中双向绑定将会使用Proxy来代替2.x版本的Object.defineProperty，那么我们来看一下Proxy对比defineProperty优势在哪首先这两种都是基于数据劫持实现的双向绑定什么是数据劫持当访问或者设置对象的属性的时候，触发相应的函数，并且返回或者设置属性的值。vue通过Object.defineProperty来劫持对象属性的getter和setter操作，当数
全栈若城·2022-04-07 11:48

Vue源码学习之响应式是如何实现的

目录前言一、一个响应式系统的关键要素1、如何监听数据变化2、如何进行依赖收集——实现Dep类3、数据变化时如何更新——实现Watcher类二、虚拟DOM和diff1、虚拟DOM是什么？2、diff算法——新旧节点对比三、nextTick四、总结前言作为前端开发，我们的日常工作就是将数据渲染到页面➕处理用户交互。在Vue中，数据变化时页面会重新渲染，比如我们在页面上显示一个数字，旁边有一个点击按钮，
·2022-03-27 17:54

js中的函数嵌套和闭包

实际项目中遇到的问题和解决方案、Vue源码解析、代码重构、关于数据可视化。小编也会按照这个顺序，逐步的去更新。期待着一起进步。今天就先和大家一起聊一聊我理解的闭包。
飞鹰3995·2022-03-22 19:00

petite-vue源码剖析-逐行解读@vue/reactivity之reactive

在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？@vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。一切源于Proxy我们知
·2022-03-22 08:18

petite-vue源码剖析-逐行解读@vue/reactivity之reactive

在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？@vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。一切源于Proxy我们知
^_^肥仔John·2022-03-22 08:00

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

vm.$set()关于vm.$set()用法可以看官网,这里就不赘述了。vm.$set()解决了什么问题?避免滥用在Vue.js里面只有data中已经存在的属性才会被Observe为响应式数据,如果你是新增的属性是不会成为响应式数据,因此Vue提供了一个api(vm.$set)来解决这个问题。VueDemo{{user.name}}{{user.age}}增加一个年纪字段constapp=newV
weixin_33871366·2022-03-18 21:35

Vue源码学习 -- 响应式原理之观察者模式

文章目录1.观察者模式2.Vue的响应式原理3.简要分析源码中的观察者模式部分4.简易实现1.观察者模式概念观察者模式又被称为发布-订阅模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。优点观察者与被观察者是抽象耦合的建立了一套触发机制缺点被观察者有很多的观察者时，通知更新这一过程会花费很多的时间观察者和被观察者之间存在循
来打小怪啊·2022-03-18 21:58

快速理解Vue 使用 vm.$set 解决对象新增属性不能响应的问题

Vue源码export
小小飞肖·2022-03-18 21:28

Vue源码学习-初始化、更新流程分析

本篇文章通过一个栗子来聊聊Vue初始化和更新数据的大致流程：addVue.component('child',{props:{list:{type:Array,default:()=>[]}},template:'{{list}}'})newVue({el:"#demo",data(){return{list:[1,2]}},methods:{handleAdd(){this.list.push(
·2022-03-17 09:29

Vue源码：双向绑定的实现原理

本篇博客供个人学习记录，暂时附上代码，后期进行整理。代码粘贴下来存储为html文件可直接查看效果。几种实现双向绑定的做法双向绑定可以简单的理解为：在单向绑定的基础上给可输入元素（input、textarea）添加onchange、oninput事件，来动态修改model和view。目前几种主流的mvc(vm)框架都实现了单向数据绑定，实现数据绑定的做法有大致如下几种：发布者-订阅者模式（backb
Neeky Ceng·2022-03-17 08:15

petite-vue源码剖析-优化手段template详解

什么是元素？是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为通过元素属性content获取已实例化的HTML元素(不是字符串而已)abconsttpl=document.getElementById('tpl')tpl.content//document-fragmenttpl.content.children[0].outerHTML//a以及其子节点均不可视下的img
·2022-03-16 09:00

Vue源码解析(2)-vue双向数据绑定原理

现代js框架存在的根本原因然而通常人们（自以为）使用框架是因为：它们支持组件化；它们有强大的社区支持；它们有很多（基于框架的）第三方库来解决问题；它们有很多（很好的）第三方组件;它们有浏览器扩展工具来帮助调试；它们适合做单页应用。KeepingtheUIinsyncwiththestateishard(UI与状态同步非常困难)通过（添加）观察者监测变化，如Angular和Vue.js。应用中状态的
weixin_34296641·2022-03-16 09:03

petite-vue源码剖析-优化手段template详解

什么是元素？是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为通过元素属性content获取已实例化的HTML元素(不是字符串而已)abconsttpl=document.getElementById('tpl')tpl.content//document-fragmenttpl.content.children[0].outerHTML//a以及其子节点均不可视下的img
^_^肥仔John·2022-03-16 06:00

petite-vue源码剖析-双向绑定`v-model`的工作原理

前言双向绑定v-model不仅仅是对可编辑HTML元素(select,input,textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。深入v-model工作原理exportconstmodel:Directive=(
·2022-03-15 12:28

petite-vue源码剖析-ref的工作原理

ref内部的工作原理十分简单，其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中，那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门，所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一道来吧！深入ref工作原理//文件./src/directives/ref.tsexportcons
·2022-03-15 08:36

petite-vue源码剖析-ref的工作原理

ref内部的工作原理十分简单，其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中，那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门，所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一道来吧！深入ref工作原理//文件./src/directives/ref.tsexportcons
^_^肥仔John·2022-03-15 08:00

petite-vue源码剖析-双向绑定`v-model`的工作原理

前言双向绑定v-model不仅仅是对可编辑HTML元素(select,input,textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。深入v-model工作原理exportconstmodel:Directive=(
·2022-03-14 16:00

petite-vue源码剖析-双向绑定`v-model`的工作原理

前言双向绑定v-model不仅仅是对可编辑HTML元素(select,input,textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。深入v-model工作原理exportconstmodel:Directive=(
·2022-03-14 15:45

petite-vue源码剖析-双向绑定`v-model`的工作原理

前言双向绑定v-model不仅仅是对可编辑HTML元素(select,input,textarea和附带[contenteditable=true])同时附加v-bind和v-on，而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。深入v-model工作原理exportconstmodel:Directive=(
^_^肥仔John·2022-03-14 15:00

2022-03-12

1、fastadmin.net打卡√2、写作打卡√5、vue源码视频。√3、vxe-table的一些增删改查操作。
Apbenz·2022-03-12 13:37

petite-vue源码剖析-事件绑定`v-on`的工作原理

在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive)，和其他指令类似。深入v-on的工作原理walk方法在解析模板时会遍历元素的特性集合el.attributes，当属性名称name匹配v-on或@时，则将属性名称和属性值压入defe
·2022-03-11 10:28

petite-vue源码剖析-事件绑定`v-on`的工作原理

在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive)，和其他指令类似。深入v-on的工作原理walk方法在解析模板时会遍历元素的特性集合el.attributes，当属性名称name匹配v-on或@时，则将属性名称和属性值压入defe
^_^肥仔John·2022-03-11 09:00

先掌握这 19 个 css 技巧，解决一些疑难杂症

作者：MattMaribojoc译者：前端小智来源：stackabusevue3源码实战出来啦：在面试中，害怕被问到Vue源码，或者想通过自己对Vue源码的来秀一下面试官的，可以了解一下。
@大迁世界·2022-03-11 07:30

petite-vue-源码剖析-v-for重新渲染工作原理

在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理，而这里我们将深入了解在更新渲染时v-for是如何运作的。逐行解析//文件.
^_^肥仔John·2022-03-10 16:00

petite-vue源码剖析-属性绑定`v-bind`的工作原理

关于指令(directive)属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的，那么什么是指令呢？我们一起看看Directive的定义吧。//文件./src/directives/index.tsexportinterfaceDirective{(ctx:DirectiveContext):(()=>void)|void}指令(directive)其实就是一个接受参数
·2022-03-08 17:42

petite-vue源码剖析-属性绑定`v-bind`的工作原理

关于指令(directive)属性绑定、事件绑定和v-modal底层都是通过指令(directive)实现的，那么什么是指令呢？我们一起看看Directive的定义吧。//文件./src/directives/index.tsexportinterfaceDirective{(ctx:DirectiveContext):(()=>void)|void}指令(directive)其实就是一个接受参数
^_^肥仔John·2022-03-08 17:00

Vue 源码解读（11）—— render helper

前言上一篇文章Vue源码解读（10）——编译器之生成渲染函数最后讲到组件更新时，需要先执行编译器生成的渲染函数得到组件的vnode。
·2022-03-08 13:12

Vue 源码解读（11）—— render helper

前言上一篇文章Vue源码解读（10）——编译器之生成渲染函数最后讲到组件更新时，需要先执行编译器生成的渲染函数得到组件的vnode。
李永宁·2022-03-08 12:00

petite-vue-源码剖析-v-for重新渲染工作原理

在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理，而这里我们将深入了解在更新渲染时v-for是如何运作的。逐行解析//文件.
·2022-03-07 18:49

petite-vue源码剖析-v-if和v-for的工作原理

深入v-if的工作原理import{createApp}from'https://unpkg.com/petite-vue?module'createApp({App:{$template:`OFFLINEUNKOWNONLINE`,}status:'online'}).mount('[v-scope]')人肉单步调试：调用createApp根据入参生成全局作用域rootScope，创建根上下文r
·2022-03-07 15:15

petite-vue源码剖析-v-if和v-for的工作原理

深入v-if的工作原理import{createApp}from'https://unpkg.com/petite-vue?module'createApp({App:{$template:`OFFLINEUNKOWNONLINE`,}status:'online'}).mount('[v-scope]')人肉单步调试：调用createApp根据入参生成全局作用域rootScope，创建根上下文r
^_^肥仔John·2022-03-07 14:00

Vue 源码解读（10）—— 编译器 之 生成渲染函数

前言这篇文章是Vue编译器的最后一部分，前两部分分别是：Vue源码解读（8）——编译器之解析、Vue源码解读（9）——编译器之优化。从HTML模版字符串开始，解析所有标签以及标签上
·2022-03-07 11:56
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他