vue3源码解析——watch和watcheffect区别_vue3 ditry-爱代码爱编程
watch和watchEffect是Vue 3.0中新增的两个响应式API，用于监听数据的变化。watch适用于需要获取新值和旧值，或者需要懒执行的场景，而watchEffect适用于需要监听多个数据源，并且需要立即执行的场景。它们之间的区别如下： watch是监听单个数据源，可以设置immediate和deep选项，可以获取新值和旧值；watc
vue源码解析——diff算法/双端比对/patchflag/最长递增子序列_diff 源码-爱代码爱编程
虚拟dom——virtual dom，提供一种简单js对象去代替复杂的 dom 对象，从而优化 dom 操作。virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。 diff 算法是一种优化手段，将前后两个模块进行差异化比
vue源码解析——vue如何将template转换为render函数_vue模板render-爱代码爱编程
Vue 将模板（template）转换为渲染函数（render function）是 Vue 编译器的核心功能，它是 Vue 实现响应式和虚拟 DOM 的关键步骤。在 Vue 中，模板（template）是开发者编写的类似 HTML 的代码，用于描述页面的结构和交互逻辑。渲染函数（render function）是 Vue 编译器将模板转换为Java
vue2源码解析——vue中如何进行依赖收集、响应式原理-爱代码爱编程
结合下图：vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集，就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里，所以，一个属性可能对应多个watcher。因此，在vue2中，属性要通过dep对象管理属性依赖的watcher。 get方法触发：在初始化时编译器生成ren
vue2源码解析——new vue()这个过程究竟做了什么？-爱代码爱编程
首先，new Vue这个问题是针对vue2的。因为，在 Vue 2.x 版本中，需要使用 new Vue() 来创建 Vue 实例。这是 Vue 2.x 的传统用法，通过实例化 Vue 构造函数来创建根 Vue 实例。Vue 3.x 引入了 Composition API，并且推荐使用 createApp() 来创建应用实例，而不是直接使用 new
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 此次源码版本为vue@2.5.2 # 安装依赖 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的博客-爱代码爱编程
🔥概述 前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化，但是当数据变化时，视图还不能够跟随数据实时更新。本文就在之前的基础上介绍下视图响应式更新部分。 💐思路 统一封装更新函数待数据发生改变时调用对应的