随笔分类 - Vue源码解析（完整）
我的Vue源码学习之路,包括
摘要：好家伙, 0、一个例子 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Vue 父子组件通信示例</title> <script src="https://cdn.jsdelivr.net/npm/vu
阅读全文
摘要：好家伙, 0.什么是路由? 路由就是匹配到对应路径显示对应的组件！ 那么我们要如何去实现? 我们来回忆一下这router怎么用的 1. 声明式路由配置：在路由配置对象中，定义路径与组件的映射关系。例如： import AboutComponent from '../views/AboutCompon
阅读全文
摘要：好家伙，这是diff的最后一节了 0.暴力比对的使用场景 没有可复用的节点：当新旧虚拟 DOM 的结构完全不同，或者某个节点不能被复用时，需要通过暴力比对来创建新的节点，并在真实 DOM 上进行相应的插入操作。 0.1.例子一： // 创建vnode let vm1 = new Vue({ data
阅读全文
摘要：好家伙, 本节来解决我们上一章留下来的问题, 新旧节点同时有儿子的情况本章继续解决 1.要做什么? 本章将解决, 1.在相同tag下子元素的替换问题 2.使用双指针进行元素替换, 实现效果如下: let vm1 = new Vue({data:{name:'张三'}}) let render1 =
阅读全文
摘要：好家伙， 本篇将会解释要以下效果的实现 1.目标 我们要实现以下元素替换的效果 gif: 以上例子的代码: //创建vnode let vm1 = new Vue({data:{name:'张三'}}) let render1 = compileToFunction(`<a>{{name}}</a>
阅读全文
摘要：好家伙，nextTick, (...这玩意,不太常用) 1.什么是nextTick 在Vue中，nextTick是一个用于异步执行回调函数的方法。 它在Vue更新DOM后被调用，以确保在下一次DOM更新渲染完成后执行回调函数。 而事实上,我们把队列处理的操作封装到了nexrTick方法中. 实际上，
阅读全文
摘要：好家伙， 本篇讲的是数据更新请求列队处理 1.一些性能问题 数据更新的核心方法是watcher.updata方法 实际上也就是vm._updata()方法, vm._updata()方法中的patch()方法用于将新的虚拟DOM树与旧的虚拟DOM树进行比较， 并将差异更新到实际的DOM树上. 这一步
阅读全文
摘要：好家伙， 1.Computed实现原理 if (opts.computed) { initComputed(vm,opts.computed); } function initComputed(vm, computed) { // 存放计算属性的watcher const watchers = vm
阅读全文
摘要：好家伙, 前面想了好久,都没想明白为什么要dep和watcher打配合才能实现数据-视图同步 为什么要多一个依赖管理这样的东西 给每个数据绑个watcher(xxfunction),然后,数据变了,调set,然后调xxfunction,不就行了, 然后今天突然想明白了,不是为什么要这么干,而是必须这
阅读全文
摘要：好家伙,这是目前为止最绕的一章,也是十分抽象的一章 由于实在太过抽象,我只能用一个不那么抽象的实例去说服我自己 完整代码已开源https://github.com/Fattiger4399/analytic-vue.git 1.我们要做什么? 来看这个例子, index.html setTimeou
阅读全文
摘要：好家伙, Vue源码学习(七):合并生命周期(混入Vue.Mixin) 书接上回,在上一篇中,我们已经实现了合并生命周期 现在,我们要在我们的初始化过程中,注册生命周期 1.项目目录 红框为本篇涉及到的.js文件 2.先来看 /utils/index.js export const HOOKS =[
阅读全文
摘要：好家伙, 1.使用场景 现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用 1.1. .vue文件中使用 <template> <div> <h1>{{ message }}</h1> </div> </template> <script> expor
阅读全文
摘要：好家伙， 前情提要： 在上一篇我们已经成功将ast语法树转换为渲染函数 现在我们继续 1.项目目录 代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍, 胜过我解释给你听一万遍 新增文件：vnode/index.js vnode/p
阅读全文
摘要：好家伙, 昨天,在学习vue源码的过程中,看到了这个玩意 嘶,看不太懂,研究一下 1.上下文 这段出现vue模板编译的虚拟node部分 export function renderMixin(Vue) { Vue.prototype._c = function () { //创建标签 return
阅读全文
摘要：好家伙, Vue源码学习(三):<templete>渲染第二步,创建ast语法树, 在上一篇,我们已经成功将 我们的模板 转换为ast语法树 接下来我们继续进行操作 1.方法封装 由于代码太多,为了增加代码的可阅读性 我们先将代码进行封装 index.js import { generate } f
阅读全文
摘要：好家伙,书接上回 在上一篇Vue源码学习(二):<templete>渲染第一步,模板解析中,我们完成了模板解析 现在我们继续,将模板解析的转换为ast语法树 1.前情提要 代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍, 胜过我
阅读全文
摘要：好家伙， 1.<template>去哪了 在正式内容之前,我们来思考一个问题, 当我们使用vue开发页面时,<tamplete>中的内容是如何变成我们网页中的内容的? 它会经历四步: 解析模板：Vue会解析<template>中的内容，识别出其中的指令、插值表达式（{{}}），以及其他元素和属性。
阅读全文
摘要：好家伙,了解一下Vue如何实现数据劫持 1.Vue中data的使用 首先,我得搞清楚这玩意的概念,我们先从vue的使用开始吧 想想看,我们平时是如何使用vue的data部分的? 无非是这两种情况 (你可千万不要带着惊讶的表情说"啊!原来有两种写法的吗") //函数写法 data() { return
阅读全文
浙公网安备 33010602011771号