vue源码

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

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

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

前言上一篇文章Vue源码解读（5）——全局API详细介绍了Vue的各个全局API的实现原理，本篇文章将会详细介绍各个实例方法的实现原理。目标深入理解以下实例方法的实现原理。vm.$set
·2022-02-28 08:08
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他