0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 今天,我们就抱着上面2个需求点,来实现一个基于vue的toast弹窗组件,下图是最终完成的效果图. 一. 先写一个普通的vue组件 二. 在我们需要使用的页面引入组件,方便看效果和错误 三. 实现动态加载组件 …

这是我学习整理的关于 Vue.js 系列文章的第一篇，另外还有两篇分别是关于优化和原理的。希望读完这3篇文章，你能对 Vue 有个更深入的认识。 组件通信是 Vue 的核心知识，掌握这几个知识点，面试开发一点问题都没有。 用于实现父子组件间通信。通过 props 可以把父组件的…

距离尤雨溪首次公开 Vue3 (vue-next)源码有一个多月了。青笔观察到，刚发布国庆期间，出现不少解读 Vue3 源码的文章。当然不少有追风蹭热之嫌，文章草草讲讲响应式原理，或者只是做了一些上层的导读，告诉读者应该先看哪再看哪。不能说这些文章就没有一点价值，它确实能够让你…

之前写过一篇文章，关于 Vue 属性透传的，文章中我列举了很多种方法去实现属性透传。其中包括直接设置 props，v-bind="$attrs"，render function 等方式。感兴趣，详情看 【Vue进阶】——如何实现组件属性透传？ 这让我意识到了自己对一些 Vue …

最近在看一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山，只有自己去登山，才能看到不一样的风景，体会更加深刻。今天我们就来聊聊Vue中比较重要的响应式原理以及依赖收集。 Object.defineProperty() 和 Proxy …

但是目前我们去更新数据，视图不能正常去更新，如何知道视图是否需要更新，是不是任意一组data数据修改都需要重新渲染更新视图？其实并不是，只有那些在页面被引用的数据变更后才会需要视图的更新，所以需要记录哪些数据是否被引用，被谁引用，从而决定是否更新，更新谁，这也就是依赖收集的目的…

想要搞清楚这些，不得不看一波源码了。下面，请跟我从vue源码分析vue的响应式原理 其中划重点的 initState() 方法中进行了 props、methods、data、computed以及watcher的初始化。在instance/state.js中可以看到如下代码。 划…