vue源码目录 vue/src/core/util/next-tick.js nextTick 入参是一个回调函数，这个回调函数就是一个任务 每次接受任务nextTick不会立即执行，而是把它push到callbacks这个异步队列里 检查pending的值，如果为false，意味着“现在还没有一个 ...
转载
2021-10-22 16:35:00
317阅读
2评论
原文链接：https:// 把这些属性全部转为 getter/setter。Obj...
转载
2021-07-28 15:26:40
192阅读
Vue的官方说明里有深入响应式原理这一节。在此官方也提到过：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Obj...
转载
2022-04-24 00:40:31
196阅读
在Vue.js中，计算属性是一个非常实用的特性，它允许你根据其他数据动态计算出新的值，并且会缓存计算结果，只有当依赖的数据发生变化时才会重新计算。下面我们来深入解读Vue计算属性的源码实现。
整体思路
Vue的计算属性实现主要涉及到以下几个关键步骤：
初始化计算属性：在Vue实例初始化过程中，对计算属性进行配置和初始化。
创建计算属性的watcher：为每个计算属性创建一个Watcher实例，用
前面我们讲到了_init函数的执行流程，简单回顾下：初始化生命周期initLifecycle初始化事件initEvents初始化渲染函数initRender调用钩子函数beforeCreate初始化依赖注入initInjections初始化状态信息initState初始化依赖提供initProvide调用钩子函数created一共经过上面8步，init函数执行完成，开始mount渲染。初始化状态信
原创
2022-09-28 11:21:56
126阅读
后续源码分析都是依据 "version": "2.7.16" （vue2版本【最新版本】）和 "version": "3.5.12"【当前最新版本】 （vue3版本）分析的对比、 通过源码视角深入学习
VUE框架底层源代码解读------VUE框架
原创
2023-12-23 14:32:20
240阅读
点赞
在 Vue 3 中，watch 是一个非常实用的 API，用于响应式地监听数据的变化并执行相应的回调。下面我们来详细解读 watch 的源码。
前置知识
在深入源码前，需要了解一些 Vue 3 中的核心概念：
响应式系统：Vue 3 采用了 @vue/reactivity 包实现响应式，核心是 Proxy 对象来劫持数据的读写操作。
副作用函数（Effect）：effect 函数用于创建一个响应
1. watchEffect 函数入口
watchEffect 函数定义在 @vue/runtime-core 包中，以下是简化后的核心代码：
import { effect, ReactiveEffect } from '@vue/reactivity'
export function watchEffect(
effectFn: (onInvalidate: InvalidateCbRe
在最开始的章节提到过，我们在使用 vue-cli 创建项目的时候，提供了两个版本供我们使用， Runtime Only 版本和 Runtime + Compiler 版本。Runtime Only 版本是不包含编译器的，在项目打包的时候会把模板编译成 render 函数，也叫预编译。Runtime ...
转载
2021-09-28 09:11:00
246阅读
2评论
Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件，提供了一般的 H
转载
2018-03-28 20:14:00
163阅读
2评论
一般说到vue的数据绑定就是说通过Object.defineProperty方法拦截属性，把data里面每个数据的读写改为getter和setter方法，当数据更新时通
原创
2022-07-11 10:37:01
118阅读
Vue核心基础-CSDN博客数据双向绑定原理_哔哩哔哩_bilibili原理示意图编辑 前置知识reduce()方法用于链式获取对象的属性值编辑Object.defineProperty()方法Object.defineProperty(obj, prop, descriptor)obj：要定义属性的对象。prop：要定义或修改的属性的名称或 Symbol。des
原创
精选
2024-09-11 15:31:38
357阅读
点赞
新手：创建vue项目，解读vue的第一个项目看到这篇文章，应该是安装好了node
原创
2023-01-17 18:52:24
113阅读
new关键字是实例化一个对象，而Vue实际上是一个类型，类在js中是用Function来实现的 初始Vue，源码src/core/instance/index.js 初始Vue的时候调用了this._init(options)方法 function Vue (options) { if (proce ...
转载
2021-10-22 16:46:00
196阅读
2评论
之前介绍过初始化时 Vue 对数据的响应式处理是利用了Object.defifineProperty()，通过定义对象属性 getter 方法拦截对象属性的访问，进行依赖的收集，依赖收集的作用就是在数据变更的时候能通知到相关依赖进行更新。 通知更新 setter 当响应式数据发生变更时，会触发拦截的 ...
转载
2021-09-15 10:30:00
268阅读
2评论
Vue 的 _update 是实例上的一个私有方法，主要的作用就是把 VNode 渲染成真实的 DOM ,它在首次渲染和数据更新的时候被调用。在数据更新的时候会发生新 VNode 和 旧 VNode 对比，获取差异更新视图，我们常说的 diff 就是发生在此过程中。 _update // src/c ...
转载
2021-09-22 09:38:00
308阅读
2评论
例子代码本篇将要讲解domdiff，那么咱们结合下面的例子来进行讲解，这个例子是在上一篇文章的基础上，加了一个数据变更，也就是list的值发生了改变。html中增加了一个按钮change，通过点击change按钮来调用change函数，来改变list的值。例子位于源代码/packages/vue/examples/classic/目录下，下面是例子的代码：javascriptconstapp=Vu
原创
2022-09-28 11:13:27
182阅读
&
原创
2021-07-14 10:00:10
125阅读
1、前言在 Vuejs 中，内置了 KeepAlive组件用于缓存组件，可以避免组件的销毁/重建，提高性能。假设页面有一组 Tab组件，如下代码所示：<template>
<Tab v-if="currentTab === 1">...</Tab>
<Tab v-if="currentTab === 2">...</Tab>
原创
精选
2024-03-12 14:40:57
980阅读
