Vue源码探秘

快速理解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

深度探秘：Google是如何运行的

这个故事名字叫HowGoogleWorks，网站上分了14页，非常全面地解释了Google是怎么转起来的，同时也还相当地深入－－对于报刊而言。不过它实在太长，看过后再也不想往前翻了，所以就依记忆写点有趣的吧。有任何问题都请参考原文。不过，正如文章中提到的：我们知道许多人进了Google，然后他们就消失了。这就是Google的神秘之处以及它保持神秘的方法。所以这篇文章的出处包括一些公开发表的论文，演
salasay·2022-03-15 07:51

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

一起探秘王者荣耀背后的键值数据库

“敌军即将到达战场，你集结好友准备好团战了吗？”各位召唤师们清楚，像《王者荣耀》这样国民级的游戏，玩家们时间碎片化、交互多，从中产生的数据量也是呈爆炸式增长。特别是在去年的“五五开黑节”中，《王者荣耀》的数据并发量达到了数千万的量级，相比平时增加了近50%的流量。并发量突增，每一次王者峡谷爆发的大小战役中，数据读写甚至每一次请求都不能超过10毫秒，稍有延迟，就会影响数以亿计玩家的游戏体验，这对数据
·2022-03-14 15:16

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

李飞飞论战《未来简史》作者赫拉利！2019 年最精彩 AI 论战

硅谷Live/实地探访/热点探秘/深度探讨划重点：1、赫拉利认为，AI带来的不仅是科学挑战，还是哲学挑战；当AI和生物科技结合，它将具备黑入人类大脑的能力。
硅谷密探·2022-03-08 12:48

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

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

前言这篇文章是Vue编译器的最后一部分，前两部分分别是：Vue源码解读（8）——编译器之解析、Vue源码解读（9）——编译器之优化。
李永宁·2022-03-07 10:00

前端面试笔记-Vue篇

Vue组件通信Vuediff策略Vue虚拟DOMVue计算属性vue-router实现懒加载vueloader的工作原理如果你自己设置vueloader该怎么做vue的响应式怎么实现的Vue好处的理解对vue
教练，我也想学·2022-03-05 10:53

petite-vue源码剖析-从静态视图开始

代码库结构介绍examples各种使用示例scripts打包发布脚本tests测试用例srcdirectivesv-if等内置指令的实现app.tscreateApp函数block.ts块对象context.ts上下文对象eval.ts提供v-if="count===1"等表达式运算功能scheduler.ts调度器utils.ts工具函数walk.ts模板解析若想构建自己的版本只需在控制台执行n
·2022-03-04 15:48

petite-vue源码剖析-从静态视图开始

代码库结构介绍examples各种使用示例scripts打包发布脚本tests测试用例srcdirectivesv-if等内置指令的实现app.tscreateApp函数block.ts块对象context.ts上下文对象eval.ts提供v-if="count===1"等表达式运算功能scheduler.ts调度器utils.ts工具函数walk.ts模板解析若想构建自己的版本只需在控制台执行n
^_^肥仔John·2022-03-04 14:00

Vue 源码解读（9）—— 编译器 之 优化

前言上一篇文章Vue源码解读（8）——编译器之解析详细详解了编译器的第一部分，如何将html模版字符串编译成AST。今天带来编译器的第二部分，优化AST，也是大家常说的静态标记。目
·2022-03-04 09:49

Vue 源码解读（9）—— 编译器 之 优化

前言上一篇文章Vue源码解读（8）——编译器之解析详细详解了编译器的第一部分，如何将html模版字符串编译成AST。今天带来编译器的第二部分，优化AST，也是大家常说的静态标记。
李永宁·2022-03-04 08:00

petite-vue源码剖析-为什么要读源码？

什么是petite-vue？根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。具体的使用方式请参考GitHub，在这里我想展示两个示例:示例1-在线渲染[v-cloak]{display:none;}import{createApp}from'http
·2022-03-03 14:35

petite-vue源码剖析-为什么要读源码？

什么是petite-vue？根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。具体的使用方式请参考GitHub，在这里我想展示两个示例:示例1-在线渲染[v-cloak]{display:none;}import{createApp}from'http
^_^肥仔John·2022-03-03 14:00

Vue 源码解读（8）—— 编译器 之 解析（下）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了两篇文章，本篇是对Vue源码解读（8）——编译器之解析（上）的一个补充，所以在阅读时请同时打开Vue源码解
·2022-03-03 08:08

Vue 源码解读（8）—— 编译器 之 解析（下）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了两篇文章，本篇是对Vue源码解读（8）——编译器之解析（上）的一个补充，所以在阅读时请同时打开Vue源码解读（8）——编译器之解析
李永宁·2022-03-03 08:00

Vue 源码解读（8）—— 编译器 之 解析（上）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了上下两篇，所以在阅读本篇文章时请同时打开Vue源码解读（8）——编译器之解析（下）一起阅读。前言Vue源码
·2022-03-02 09:24

Vue 源码解读（8）—— 编译器 之 解析（上）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了上下两篇，所以在阅读本篇文章时请同时打开Vue源码解读（8）——编译器之解析（下）一起阅读。
李永宁·2022-03-02 08:00

解析探秘fescar分布式事务实现原理

目录前言项目说明fescar的TXC模型项目结构解析通过【examples】模块的实例看下效果第一步、第二步、第三步、fescar事务过程分析首先分析配置文件【TM】模块启动全局事务【DUBBO】全局事务XID的传递【RM】模块本地资源管理的介入PLAINEXECUTOR：UPDATEEXECUTOR、DELETEEXECUTOR、INSERTEXECUTOR：SELECTFORUPDATEEXE
·2022-02-28 17:08

Vue 源码解读（6）—— 实例方法

前言上一篇文章Vue源码解读（5）——全局API详细介绍了Vue的各个全局API的实现原理，本篇文章将会详细介绍各个实例方法的实现原理。目标深入理解以下实例方法的实现原理。vm.$set
·2022-02-28 08:08

Vue 源码解读（6）—— 实例方法

前言上一篇文章Vue源码解读（5）——全局API详细介绍了Vue的各个全局API的实现原理，本篇文章将会详细介绍各个实例方法的实现原理。目标深入理解以下实例方法的实现原理。vm.$setvm.
李永宁·2022-02-28 08:00

收藏吃灰，12 个炫酷背景特效库

vue3源码实战出来啦：在面试中，害怕被问到Vue源码，或者想通过自己对Vue源码的来秀一下面试官的，可以了解一下。1.partic
·2022-02-28 07:07

Vue源码学习-虚拟DOM+Diff算法

Vue中采用了虚拟DOM+Diff算法减少了对DOM的操作次数，大大提高了性能，那么我们今天就来详细的讲一下Vue中这一部分的实现逻辑，希望可以帮助还不理解这部分的小伙伴理解这一部分，纯手打，希望各位小伙伴点个赞支持一下！首先我们要明确的是，vnode代表本次修改后新生成的虚拟节点，oldVnode代表目前真实DOM结构所对应的虚拟节点。所以我们更新是以vnode为基准，通过oldVnode的结构
·2022-02-25 23:44

深入研究spring boot集成kafka之spring-kafka底层原理

嵌入式KafkaServer引入依赖启动服务创建新的Topic程序启动时创建TOPIC代码逻辑中创建PS:其他的方式创建TOPIC引入依赖api方式创建命令方式创建消息发送之KafkaTemplate探秘获取发送结果异步获取同步获取
·2022-02-25 19:48

探秘inter()方法

最近在阅读《深入理解Jav虚拟机》的运行时常量池章节，看到“java语言并不要求常量池一定只有编译器才能产生...运行期间也可以将新的常量放入常量池，这种特性被开发人员利用得比较多的时String类的intern()方法。"于是我便去深入了解了一下。1publicstaticvoidmain(String[]args){2Stringa="王者";3Stringb="荣耀";4Stringc=a+
今晚螃蟹下酒·2022-02-25 13:00

Vue 源码解读（5）—— 全局 API

Vue.useVue.mixinVue.componentVue.filterVue.directiveVue.extendVue.setVue.deleteVue.nextTick源码解读从该系列的第一篇文章Vue
李永宁·2022-02-25 09:00

Vue 源码解读（4）—— 异步更新

前言上一篇的Vue源码解读（3）——响应式原理说到通过Object.defineProperty为对象的每个key设置getter、setter，从而拦截对数据的访问和设置。当对数据进行
·2022-02-24 08:06

Vue 源码解读（4）—— 异步更新

前言上一篇的Vue源码解读（3）——响应式原理说到通过Object.defineProperty为对象的每个key设置getter、setter，从而拦截对数据的访问和设置。
李永宁·2022-02-24 08:00
上一页 34 35 36 37 38 39 40 41 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他