摘要: 背景 在 Vue 的初始化阶段,_init 方法执行的时候,会执行 initState(vm) ,它的定义在 src/core/instance/state.js 中。在初始化 data 和 props option 时我们注意 initProps 和 initData 方法中都调用了 observ 阅读全文
posted @ 2022-11-08 15:44 yyds2026 阅读(119) 评论(0) 推荐(0)
摘要: 这一章就着重讲两个点: 响应式系统如何收集依赖 响应式系统如何更新视图 我们知道通过Object.defineProperty做了数据劫持,当数据改变的时候,get方法收集依赖,进而set方法调用dep.notify方法去通知Watcher调用本身update方法去更新视图。那么我们抛开其他问题,就 阅读全文
posted @ 2022-11-08 15:44 yyds2026 阅读(42) 评论(0) 推荐(0)
摘要: 起初 Vue3.0 暴露变量必须 return 出来,template 中才能使用; Vue3.2 中 只需要在 script 标签上加上 setup 属性,组件在编译的过程中代码运行的上下文是在 setup() 函数中,无需 return,template 可直接使用。 本文章以Vue2的角度学习 阅读全文
posted @ 2022-11-07 15:15 yyds2026 阅读(116) 评论(0) 推荐(0)
摘要: Vue3自定义Hooks定义: 个人理解:一些可复用的方法像钩子一样挂着,可以随时被引入和调用以实现高内聚低耦合的目标,应该都能算是hook; 为什么Vue3要用自定义Hook?: 结论:就是为了让Compoosition Api更好用更丰满,让写Vue3更畅快!像写诗一样写代码! 其实这个问题更深 阅读全文
posted @ 2022-11-07 15:14 yyds2026 阅读(248) 评论(0) 推荐(0)
摘要: Vue 的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图。 实现可响应对象的方式 通过可响应对象,实现对数据的侦测,从而告知外界数据变化。实现可响应对象的方式: getter 和 setter defineProperty Proxy 关于前两个 API 的使用方式不多赘述,单一的访问器 阅读全文
posted @ 2022-11-07 15:13 yyds2026 阅读(230) 评论(0) 推荐(0)
摘要: 背景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。如果你已经灵活运用,但是依然好奇它底层实现逻辑,不妨一探究竟。 Vue 组件开发 我们知道开发 Vue 插件,安装 阅读全文
posted @ 2022-11-04 12:22 yyds2026 阅读(45) 评论(0) 推荐(0)
摘要: 今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异,以及 VDOM 下 Diff 算法的优化。 编译入口 了解过 Vue3 的同学肯定知道 Vue3 引入了新的组合 Api,在组件 mount 阶段会调用 setup 方法,之后会判断 render 方法是否存在,如果不存在会调用 c 阅读全文
posted @ 2022-11-04 12:20 yyds2026 阅读(126) 评论(0) 推荐(0)
摘要: 相信大家在写vue项目的时候,一定会发现一个神奇的api,Vue.nextTick。为什么说它神奇呢,那是因为在你做某些操作不生效时,将操作写在Vue.nextTick内,就神奇的生效了。那这是什么原因呢? 让我们一起来研究一下。 简述 vue 实现响应式并不是数据发生变化后 DOM 立即变化,而是 阅读全文
posted @ 2022-11-04 12:16 yyds2026 阅读(64) 评论(0) 推荐(0)
摘要: 本文将带大家快速过一遍Vue数据响应式原理,解析源码,学习设计思路,循序渐进。 数据初始化 _init 在我们执行new Vue创建实例时,会调用如下构造函数,在该函数内部调用this._init(options)。 import { initMixin } from "./init.js"; // 阅读全文
posted @ 2022-11-02 09:34 yyds2026 阅读(33) 评论(0) 推荐(0)
摘要: 能让你首次加载更快的路由懒加载,怎么能忘? 路由懒加载可以让我们的包不需要一次把所有的页面的加载进来,只加载当前页面的路由组件就行。 举个🌰,如果这样写,加载的时候会全部都加载进来。 const router = new VueRouter({ routes:[ { path: '/', name 阅读全文
posted @ 2022-11-02 09:34 yyds2026 阅读(27) 评论(0) 推荐(0)