代码编织梦想

vue3源码解析——ref和reactive定义响应式的区别-爱代码爱编程

ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别: ref 定义单个响应式数据 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象,该对象包含一个 .value 属性,可用于获取和设置数据。底层采用Object.defineProperty()实现 re

vue源码解析—— watch/computed的实现逻辑和区别-爱代码爱编程

watch 和 computed 是 Vue 中的两个重要的响应式属性,它们在实现机制和使用上存在一些区别。 watch:用于监听数据的变化,并在数据变化时执行回调函数。可以使用 deep 配置项来开启深度监听,监听数据的子属性变化。可以使用 immediate 配置项来立即执行回调函数。computed:用于计算数据,并在数据变化时重新计算数据

vue2.x源码:data对象的劫持_vue源码数据劫持对象-爱代码爱编程

data对象的单层劫持 Vue 初始化时会调用_init 方法,_init 方法在initMixin函数中定义 function Vue(options) { this._init(options); } init

vue2.x源码:data数组劫持_vue怎么实现数组的劫持-爱代码爱编程

在数据劫持阶段 监测 data 时,进行 observe 时,判断 data 是数组时,重写数组原型刚发,执行this.observeArray(value); observeArray 主要遍历数值,执行 observ

vue2.x源码:$mount挂载原理_vue2中 $mount-爱代码爱编程

<div id="testdata"> <h1>{{msg}}</h1> <p>{{name}}</p> </div> var app =

vue2.x源码:new vue()做了啥?_vue2 new vue({ 程序入口 app-爱代码爱编程

vue源码版本vue2.5.2 例子1 <div id="app"> <div class="home"> <h1>{{title}}</h1> </

vue2.x源码:开启源码调试环境_vue2源码调试-爱代码爱编程

gitHub上克隆或者直接下载压缩包 链接:https://github.com/vuejs/vue 此次源码版本为[email protected] # 安装依赖 npm i # 安装rollup: npm i -g rollup

vue2源码解析 解析器_源代码解析器-爱代码爱编程

目录 1  解析器的作用 2  解析器内部运行原理 3  html解析器  3.1  运行原理 3.2  截取开始标签 3.3  截取结束标签 3.4  截取注释 3.5  截取条件注释 3.6  截取DOCTYPE 3.7  截取文本 3.8  纯文本内容元素的处理 3.9  使用栈维护dom层级 3.10  整体逻辑 4 

vue源码之解析指令compile_this指向里面有compilevue-爱代码爱编程

概述 上篇文章我们已经介绍了Vue的响应式原理,并实现了对数据的监听,监听的目的是为了及时更新视图,所以这篇文章就来介绍下vue解析指令并初始化视图部分。 🐸 compile 在Vue的构造函数中对根元素进行编译 c

vue2源码解析 优化器_!node.children.length-爱代码爱编程

目录 1  找出所有静态节点并标记 2  找出所有静态根节点并标记 3  总结 解析器的作用是将html模板解析成AST,而优化器的作用是:在AST中找出静态子树并打上标记。 静态子树是指那些在AST中永远不会发生变化的节点。 标记静态子树两个好处:         1.每次重新渲染时,不需要为静态子树创建新节点;         2.在

vue2源码解析 变化侦测相关的api实现原理-爱代码爱编程

目录 1  用法 2  watch的内部原理 3  deep参数的实现原理 1  用法 用法:vm.$watch( expOrFn , callback , [ options ] );           用于观察一个表达式或computed函数在vue.js实例上的变化。回调函数调用时,会从参数得到新数据和旧数据。表达式只接受以点分割的

【vue源码解读】第1~612行_typeof exports === 'object' vue-爱代码爱编程

【Vue源码解读】第1~612行 1~10行:挂载Vue11~111行:全局判断函数第112~354行:高阶函数、闭包、全局函数重点解析 355~612行总结 1~10行:挂载Vue (fun

vue2.x源码学习:options合并过程mergeoptions函数-爱代码爱编程

入口函数 export function initMixin(Vue: Class<Component>) { Vue.prototype._init = function (options?: Objec

一看就懂的vue简版源码概述_super_wanan的博客-爱代码爱编程

本文不会拆步骤对源码进行实现,只介绍vue原理及相关核心实现思想。在之前的四篇文章中已对vue进行响应实现。需要可阅读相关文章: Vue源码探索之知识小储备 ——Object.defineProperty VS proxy

vue源码之视图响应式更新_super_wanan的博客-爱代码爱编程

🔥概述 前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化,但是当数据变化时,视图还不能够跟随数据实时更新。本文就在之前的基础上介绍下视图响应式更新部分。 💐思路 统一封装更新函数待数据发生改变时调用对应的

vue源码探秘(一)——vue-router原理实现_exmaterial的博客-爱代码爱编程

在看这篇文章的几点要求:需要你先知道Vue-Router是个什么东西,用来解决什么问题,以及它的基本使用。如果你还不懂的话,建议上官网了解下Vue-Router的基本使用后再回来看这篇文章。Vue Router官网 前置知

vue源码之数据响应式_super_wanan的博客-爱代码爱编程

写在前面 阅读本文需要先了解Object.defineProperty知识,不了解的移步咱之前的文章:Vue源码探索之知识小储备 ——01.Object.defineProperty VS proxy 🌰 先看一段小例子

vue2源码解析 代码生成器_小艺同学~的博客-爱代码爱编程

目录 1  介绍 2  通过AST生成代码字符串 3  代码生成器的原理 3.1  元素节点 3.2  文本节点 3.3  注释节点 4  总结 1  介绍 代码生成器是模板编译的最后一步,它的作用是将AST转换成渲染函数中的内容,这个内容可以称为代码字符串。 代码字符串可以被包装在函数中执行,这个函数就是渲染函数。 渲染函

mini-vue之渲染系统实现(render)及diff算法_exmaterial的博客-爱代码爱编程

Vue源码之三大核心系统 事实上,Vue源码包含三大核心: Compiler模块:模板编译系统;Runtime模块:也可以称之为Render(渲染)模块,真正的渲染模块;Reactivity模块:响应式系统。 在下载后

v-for列表渲染有无key值对比-diff算法详解_exmaterial的博客-爱代码爱编程

一、前置知识 官方解读 在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。那么这个key属性有什么作用呢?我们先来看一下官方的解释: key 这个特殊的 attribute 主要作为 Vue