weixin_42373116的博客

前言 文本属于个人分析源码笔记，如果哪里不明白的话，请评论留言 其实ref的实现原理比较简单，如果是使用在普通上获取的是元素el，反之如果是组件上，就是组件实例 demo demo地址 实例 const { render, h, getCurrentInstance } = Vue const MyComponent = { setup() { return () => h('p', {}, '123') }

前言 此文章为个人分析源码的笔记，如果有解释不到位的地方，尽管评论。 demo地址 Gitee地址 实例 const { render, h } = Vue const MyComponent = { setup(props, ctx) { return () => h('div', {}, ctx.slots.default(), ctx.slots.header()) } } const

前言 本文章属个人源码分析笔记，描述不周之处，多多海涵。废不多说，马上开始吧 这里简单描述下实现原理： 代码<MyComponent @clicked = () => alert('111')></MyComponent>中 会解析出参数props: {onClicked: () => alert('111')} 当调用emit的时候，会从实例中获取props参数。寻找onClicked参数，然后执行 一句话：执行的方法会挂载到实例的props上，在props上寻找

纯属个人笔记，记录下断点学习vue3中provide以及inject，如果对大家有用处，麻烦点赞/ 收藏/ 关注一条龙 demo地址 简单说下大致原理 vue2的provide以及inject跟vue3的还是很大不同的。 vue2 vue2中在组件实例化过程中，this上会维护上下级关系，每个this上都会有parent，而inject的原理就是一直寻找父类，直到找到或是到顶层 vue3 vue3中instance会存在属性provides，而每个组件在实例过程中都会将自身的provide.

前言 继上次分析完computed之后，本来主要是用来分析watch的底层原理是如何实现的。大家都知道watchAPI也是开发中用的很多的api，此api用法超级简单但是细节部分很多。关于watch中的诸多细节会在这里给大家一一举例讲述。 分析流程 简单使用 手写简单源码 源码对照 (包括细节描述) 什么是细节描述呢？？？ 什么时候下直接传值 什么时候下需要用到函数 监听ref, reactive分别执行什么场景 deep的场合下该如何处理 ...

前言 vue3诸多API中computed的作用毋庸置疑，也算是我们开发中使用比较多的API了。今天就让我们来探究下computed底层到底做了什么。如果想要学好computed个人觉得还是需要将effect有个深入的理解。这样学的东西才能融会贯通。 为什么一定强调学习effect呢？因为无论是watch，computed都是以effect为基础，所以说基石很重要，如果大家看源码实在很吃力的话，个人觉得看懂我写的就够了。因为我就是按照源码一比一写出来的 讲述方式： 基本使用 手写源码 源码对照

前言 本文是继上次vue3源码系列之高清版reactive源码分析篇之后，有一力作了。 本文我们重点讲解几个知识点： effect实现 依赖收集 依赖触发 简单复习响应式 讲解方式： 基础使用 手写实现 对照源码 基础使用 const { reactive, effect } = Vue const data = { name: 'lixx', age: 20 } const state = reactive(data) effect(

vue3已经出来很久了，相信很多小伙伴也在项目中使用了，但是其内部原理如何？？？又有哪些细节进行处理了，今天我们来一起说道说道 会分析下reactive响应式模块 在使用缓存策略上有什么技巧 为什么说reactive 是懒代理，而不是递归代理 1. 先看一段基本使用 demo地址：点击这里 const { reactive, effect } = Vue const target = { name: 'lixx', age: 27 .

1. 定时器销毁解决方案，this.$on('hook:beforeDestroy',fn) 2. 以及多余的watch代码是如何简化的