![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 72
对Vue相关的知识,技巧以及源码知识进行分类
全栈切图仔
这个作者很懒,什么都没留下…
展开
-
vue3源码分析之组件属性ref的分析
前言文本属于个人分析源码笔记,如果哪里不明白的话,请评论留言其实ref的实现原理比较简单,如果是使用在普通上获取的是元素el,反之如果是组件上,就是组件实例demodemo地址实例 const { render, h, getCurrentInstance } = Vue const MyComponent = { setup() { return () => h('p', {}, '123') }原创 2022-05-20 07:53:24 · 673 阅读 · 0 评论 -
vue3源码分析之slot实现原理
前言此文章为个人分析源码的笔记,如果有解释不到位的地方,尽管评论。demo地址Gitee地址实例 const { render, h } = Vue const MyComponent = { setup(props, ctx) { return () => h('div', {}, ctx.slots.default(), ctx.slots.header()) } } const原创 2022-05-19 07:41:28 · 573 阅读 · 0 评论 -
vue3中props以及emit实现原理
前言本文章属个人源码分析笔记,描述不周之处,多多海涵。废不多说,马上开始吧这里简单描述下实现原理:代码<MyComponent @clicked = () => alert('111')></MyComponent>中会解析出参数props: {onClicked: () => alert('111')}当调用emit的时候,会从实例中获取props参数。寻找onClicked参数,然后执行一句话:执行的方法会挂载到实例的props上,在props上寻找原创 2022-05-17 07:09:20 · 1194 阅读 · 0 评论 -
vue3的provide以及inject底层原理你都知道吗
纯属个人笔记,记录下断点学习vue3中provide以及inject,如果对大家有用处,麻烦点赞/ 收藏/ 关注一条龙demo地址简单说下大致原理vue2的provide以及inject跟vue3的还是很大不同的。vue2vue2中在组件实例化过程中,this上会维护上下级关系,每个this上都会有parent,而inject的原理就是一直寻找父类,直到找到或是到顶层vue3vue3中instance会存在属性provides,而每个组件在实例过程中都会将自身的provide.原创 2022-05-16 10:52:17 · 484 阅读 · 0 评论 -
vue3源码系列之监听函数watch原理剖析
前言继上次分析完computed之后,本来主要是用来分析watch的底层原理是如何实现的。大家都知道watchAPI也是开发中用的很多的api,此api用法超级简单但是细节部分很多。关于watch中的诸多细节会在这里给大家一一举例讲述。分析流程简单使用手写简单源码源码对照 (包括细节描述)什么是细节描述呢???什么时候下直接传值什么时候下需要用到函数监听ref, reactive分别执行什么场景deep的场合下该如何处理...原创 2022-05-10 10:48:48 · 324 阅读 · 0 评论 -
vue3源码系列之计算属性computed原理剖析
前言vue3诸多API中computed的作用毋庸置疑,也算是我们开发中使用比较多的API了。今天就让我们来探究下computed底层到底做了什么。如果想要学好computed个人觉得还是需要将effect有个深入的理解。这样学的东西才能融会贯通。为什么一定强调学习effect呢?因为无论是watch,computed都是以effect为基础,所以说基石很重要,如果大家看源码实在很吃力的话,个人觉得看懂我写的就够了。因为我就是按照源码一比一写出来的讲述方式:基本使用手写源码源码对照原创 2022-05-09 14:15:27 · 720 阅读 · 0 评论 -
vue3源码系列之高清版effect源码分析篇
前言本文是继上次vue3源码系列之高清版reactive源码分析篇之后,有一力作了。本文我们重点讲解几个知识点:effect实现依赖收集依赖触发简单复习响应式讲解方式:基础使用手写实现对照源码基础使用 const { reactive, effect } = Vue const data = { name: 'lixx', age: 20 } const state = reactive(data) effect(原创 2022-05-08 10:06:26 · 265 阅读 · 0 评论 -
vue3源码系列之高清版reactive源码分析篇
vue3已经出来很久了,相信很多小伙伴也在项目中使用了,但是其内部原理如何???又有哪些细节进行处理了,今天我们来一起说道说道会分析下reactive响应式模块在使用缓存策略上有什么技巧为什么说reactive 是懒代理,而不是递归代理1. 先看一段基本使用demo地址:点击这里 const { reactive, effect } = Vue const target = { name: 'lixx', age: 27 .原创 2022-05-07 10:31:11 · 760 阅读 · 0 评论 -
从“vue源码”的角度看“vue使用小技巧”
1. 定时器销毁解决方案,this.$on('hook:beforeDestroy',fn) 2. 以及多余的watch代码是如何简化的原创 2022-02-09 09:25:09 · 383 阅读 · 0 评论