10 2022 档案
摘要：这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成render Function形式的字符串compiler/index.js import { parse } from './parser/index' import { optimize } from './
阅读全文
摘要：我们先来关注一下$mount是实现什么功能的吧： 我们打开源码路径core/instance/init.js: export function initMixin (Vue: Class<Component>) { ...... initLifecycle(vm) // 事件监听初始化 initEv
阅读全文
摘要：先来看生成虚拟dom的入口文件: ... import { parse } from './parser/index' import { optimize } from './optimizer' import { generate } from './codegen/index' ... cons
阅读全文
摘要：这一章就着重讲两个点： 响应式系统如何收集依赖 响应式系统如何更新视图 我们知道通过Object.defineProperty做了数据劫持，当数据改变的时候，get方法收集依赖，进而set方法调用dep.notify方法去通知Watcher调用本身update方法去更新视图。那么我们抛开其他问题,就
阅读全文
摘要：键盘事件 在 js 中我们通常通过绑定一个事件，去获取按键的编码，再通过 event 中的 keyCode 属性去获得编码 如果我们需要实现固定的键才能触发事件时就需要不断的判断，其实很麻烦 let button = document.querySelector('button') button.o
阅读全文
摘要：模板tamplate经过parse，optimize，generate等一些列操作之后，把AST转为render function code进而生成虚拟VNode,模板编译阶段基本已经完成了，那么这一章，我们来探讨一下Vue中的一个算法策略--dom diff 首先来介绍下什么叫dom diff 什
阅读全文
摘要：背景 在 Vue 的初始化阶段，_init 方法执行的时候，会执行 initState(vm) ，它的定义在 src/core/instance/state.js 中。在初始化 data 和 props option 时我们注意 initProps 和 initData 方法中都调用了 observ
阅读全文
摘要：Vue3自定义Hooks定义： 个人理解：一些可复用的方法像钩子一样挂着，可以随时被引入和调用以实现高内聚低耦合的目标，应该都能算是hook； 为什么Vue3要用自定义Hook？： 结论：就是为了让Compoosition Api更好用更丰满，让写Vue3更畅快！像写诗一样写代码！ 其实这个问题更深
阅读全文
摘要：Vue 的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。 实现可响应对象的方式 通过可响应对象，实现对数据的侦测，从而告知外界数据变化。实现可响应对象的方式： getter 和 setter defineProperty Proxy 关于前两个 API 的使用方式不多赘述，单一的访问器
阅读全文
摘要：相信大家在写vue项目的时候，一定会发现一个神奇的api，Vue.nextTick。为什么说它神奇呢，那是因为在你做某些操作不生效时，将操作写在Vue.nextTick内，就神奇的生效了。那这是什么原因呢？ 让我们一起来研究一下。 简述 vue 实现响应式并不是数据发生变化后 DOM 立即变化，而是
阅读全文
摘要：起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用； Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。 本文章以Vue2的角度学习
阅读全文
摘要：模板tamplate经过parse，optimize，generate等一些列操作之后，把AST转为render function code进而生成虚拟VNode,模板编译阶段基本已经完成了，那么这一章，我们来探讨一下Vue中的一个算法策略--dom diff 首先来介绍下什么叫dom diff 什
阅读全文
摘要：先来看生成虚拟dom的入口文件: ... import { parse } from './parser/index' import { optimize } from './optimizer' import { generate } from './codegen/index' ... cons
阅读全文
摘要：我们先来关注一下$mount是实现什么功能的吧： 我们打开源码路径core/instance/init.js: export function initMixin (Vue: Class<Component>) { ...... initLifecycle(vm) // 事件监听初始化 initEv
阅读全文
摘要：这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成render Function形式的字符串compiler/index.js import { parse } from './parser/index' import { optimize } from './
阅读全文
摘要：这一章就着重讲两个点： 响应式系统如何收集依赖 响应式系统如何更新视图 我们知道通过Object.defineProperty做了数据劫持，当数据改变的时候，get方法收集依赖，进而set方法调用dep.notify方法去通知Watcher调用本身update方法去更新视图。那么我们抛开其他问题,就
阅读全文
摘要：相信大家在写vue项目的时候，一定会发现一个神奇的api，Vue.nextTick。为什么说它神奇呢，那是因为在你做某些操作不生效时，将操作写在Vue.nextTick内，就神奇的生效了。那这是什么原因呢？ 让我们一起来研究一下。 简述 vue 实现响应式并不是数据发生变化后 DOM 立即变化，而是
阅读全文
摘要：混入mixins 官方解释 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 简单的来说就是 Mixins 是我们可以重用的代码块，在实际开发中，如果有些代
阅读全文
摘要：本文将带大家快速过一遍Vue数据响应式原理，解析源码，学习设计思路，循序渐进。 数据初始化 _init 在我们执行new Vue创建实例时，会调用如下构造函数，在该函数内部调用this._init(options)。 import { initMixin } from "./init.js"; //
阅读全文
摘要：知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完你一定会有不一样的收获，一起学起来吧！ reactive() 基
阅读全文
摘要：准备：自定义指令介绍 除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 ———Vue官网 作为使用Vu
阅读全文
摘要：能让你首次加载更快的路由懒加载，怎么能忘？ 路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。 举个🌰，如果这样写，加载的时候会全部都加载进来。 const router = new VueRouter({ routes:[ { path: '/', name
阅读全文
摘要：前言 使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。 虚拟DOM 什么是虚拟DOM？ 虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用
阅读全文
摘要：今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异，以及 VDOM 下 Diff 算法的优化。 编译入口 了解过 Vue3 的同学肯定知道 Vue3 引入了新的组合 Api，在组件 mount 阶段会调用 setup 方法，之后会判断 render 方法是否存在，如果不存在会调用 c
阅读全文
摘要：1.动态组件 <component :is='组件名'></component> 结合v-for循环使用 使用环境 如图，这是一个v-for渲染的列表(只是目前这个版块才刚开始做，目前只有一个)，圆圈内的就是一个组件，也就是要v-for动态组件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保
阅读全文
摘要：背景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。如果你已经灵活运用，但是依然好奇它底层实现逻辑，不妨一探究竟。 Vue 组件开发 我们知道开发 Vue 插件，安装
阅读全文
摘要：键盘事件 在 js 中我们通常通过绑定一个事件，去获取按键的编码，再通过 event 中的 keyCode 属性去获得编码 如果我们需要实现固定的键才能触发事件时就需要不断的判断，其实很麻烦 let button = document.querySelector('button') button.o
阅读全文
摘要：背景 在 Vue 的初始化阶段，_init 方法执行的时候，会执行 initState(vm) ，它的定义在 src/core/instance/state.js 中。在初始化 data 和 props option 时我们注意 initProps 和 initData 方法中都调用了 observ
阅读全文
