摘要: 本文主要分以下两个部分对 Composition API 的原理进行解读: reactive API 原理 ref API 原理 reactive API 原理 打开源码可以找到reactive的入口,在composition-api/src/reactivity/reactive.ts,我们先从函 阅读全文
posted @ 2022-10-04 09:24 bb_xiaxia1998 阅读(37) 评论(0) 推荐(0)
摘要: 前言 有时候有些面试中经常会问到v-for与v-if谁的优先级高,这里就通过分析源码去解答一下这个问题。 下面的内容是在 当我们谈及v-model,我们在讨论什么?的基础上分析的,所以阅读下面内容之前可先看这篇文章。 继续从编译出发 以下面的例子出发分析: new Vue({ el:'#app', 阅读全文
posted @ 2022-10-04 09:14 bb_xiaxia1998 阅读(43) 评论(0) 推荐(0)
摘要: 一、Vue3 与 Vue2 区别详述 1. 生命周期 对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上 + “on”,功能上是类似的。不过有一点需要注意,Vue3 在组合式API(Composition API,下面展开)中使用生命周期钩子时需要先引入,而 Vue2 在选项API(Op 阅读全文
posted @ 2022-10-03 09:06 bb_xiaxia1998 阅读(141) 评论(0) 推荐(0)
摘要: 背景 看了一些自定义指令的文章,但是探究其原理的文章却不多见,所以我决定水一篇。 如何自定义指令? 其实关于这个问题官方文档上已经有了很好的示例的,我们先来温故一下。 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用 阅读全文
posted @ 2022-10-03 08:58 bb_xiaxia1998 阅读(58) 评论(0) 推荐(0)
摘要: Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用,它的作用是为对象的某个属性对外提供 get、set 方法,从而实现外部对该属性的读和写操作时能够被内部监听,实现后续的同步视图更新功能 一、实现响应式的核心API:Objec 阅读全文
posted @ 2022-10-01 10:00 bb_xiaxia1998 阅读(12) 评论(0) 推荐(0)
摘要: 写在前面 在前端中,主要涉及的基本上就是 DOM的相关操作 和 JS,我们都知道 DOM 操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的 DOM 操作便成了前端优化的重要内容。 虚拟DOM(virtual DOM) 在 jQuery 时代,基本上所有的 DOM 相关的操作都是由我 阅读全文
posted @ 2022-10-01 09:48 bb_xiaxia1998 阅读(29) 评论(0) 推荐(0)
摘要: Vue加载流程 1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就是创建vm对象的过程,当vm对象创建完成就可以通过vm对象访问到劫持的数据,比如data中的数据,metho 阅读全文
posted @ 2022-09-30 10:26 bb_xiaxia1998 阅读(71) 评论(0) 推荐(0)
摘要: 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优 阅读全文
posted @ 2022-09-30 10:09 bb_xiaxia1998 阅读(80) 评论(0) 推荐(0)
摘要: Vue3.0 和 2.0 的响应式原理区别 Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化,并且有多达 13 种拦截方法。 相关代码如下 import { mutableHandlers } from "./baseH 阅读全文
posted @ 2022-09-27 15:30 bb_xiaxia1998 阅读(83) 评论(0) 推荐(0)
摘要: delete和Vue.delete删除数组的区别? delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete直接删除了数组 改变了数组的键值。 var a=[1,2,3,4] var b=[1,2,3,4] delete a[0] cons 阅读全文
posted @ 2022-09-27 15:21 bb_xiaxia1998 阅读(56) 评论(0) 推荐(0)