🗒️ vue3源码学习-9-ref的实现

在页面编写中,之前都是使用reactive来包裹对象,这样对象属性的值改变,其对应的effect包裹渲染动作就会被触发。并且通常有函数解构的操作,例如let people = reactive({name:"张三",age:24}); let {name,age} = people;。如果这么结构操作的话,name和age就会变成普通的变量,那么如果在effect中使用的话,就算改变了值也不会触发回调函数。那么为了解决例如此类的需求,vue3提供了ref、toRef、toRefs。

🗒️ vue3源码学习-8-watch

本文学习编写watch功能函数。首先,先去使用下官方的watch做一些简单的小功能测试。

🗒️ vue3源码学习-7-computed的实现

回顾上期的内容,编写了effect中的调度器,主要修改了effect.ts文件。在预览之前的代码的时候会发现一些优化的地方。 在vue代码的需求编辑中,会遇到这样一个例子。例如一个人的姓名分为姓和名,那么我希望在页面上打印出这个人的姓+名,而且在姓或者名改变的时候,页面渲染也会改变。那么就用到了vue的computed来进行操作。旧版的vue2中computed是基于watcher实现的。vue3则是基于effect来实现。另外vue3中的computed写法叫组合式API,而vue2是拿data中的属性来编写computed中的属性,这种叫选项式API(option)。具体的vue3写法如下

🗒️ Homebrew配置国内源

Homebrew 是一款自由及开放源代码的软件包管理系统,用以简化 macOS 和 linux 系统上的软件安装过程。它拥有安装、卸载、更新、查看、搜索等很多实用的功能,通过简单的一条指令,就可以实现包管理,十分方便快捷。Homebrew 主要有四个部分组成: brew、homebrew-core 、homebrew-bottles、homebrew-cask

🗒️ 原生JS编写虚拟滚动

在开发项目的过程中,偶尔会遇到很大的数据,然后设计图上又是列表还不分页的情况。为此研究了下虚拟滚动的方案。虚拟滚动大致的思路是当你往下滚动,但最后一个计算的元素出现的时候,替换上面不见了的DOM元素,将它们从渲染的HTML中剔除,同理往上滚动,一个计算的元素出现在最上面的时候,表明需要加载上面的元素信息,并隐藏下面的DOM元素。演示地址

🗒️ vue3源码学习-6-调度器

经过第5章对于分支切换的操作之后,vue的effect源码就具有了收集需要的依赖,对于改变不必要的数据,不会触发依赖的更新。那么今天就要实现vue3的调度器代码,之前effect只能同步运行代码,无法对于异步操作进行数据更新。 官方的写法是什么样子呢?

🗒️ vue3源码学习-5-分支切换

上篇回顾,核心代码逻辑是通过reactive中的Proxy()来代理一个对象,然后通过get收集依赖,主要操作放在来effect中。那么当我们回顾上一篇的问题。当用户有一个这样当操作

🗒️ vue3源码学习-4-effect编写以及依赖收集

经过上文的响应式编写之后,实现了数据包裹之后变成了响应式数据,用户修改数据的时候能监听到操作。 但是实际编写的响应式reactive.ts中最核心的是Proxy中的get和set方法。为此我们本次需要将核心代码抽离,并且编写effect副作用函数和依赖收集功能,这样函数依赖发生改变,他就重新执行。

🗒️ Http和Https学习(一)

在实际开发中,部署的项目在服务器上,通过域名来访问,是否会发现有的域名是http协议有的是https协议。那么同一个网站,他既可以http访问,又可以https访问,他们是什么呢,他们之间有什么区别呢?

🗒️ 前端实现文件下载

前端开发过程中,总会遇到点击链接下载。这个时候可以借助2种方法解决。一种是用a标签的download,第二种是按钮点击之后调用接口来下载。2种方法最好确定文件没有跨域现象。

🗒️ vue3源码学习-3-实现reactivity

经过前面的环境搭建以及项目构建,完成了基础的项目框架,下面学习实现vue3的reactivity。

🗒️ Vue项目中配置vuex版本问题错误

原本旧项目框架的问题,导致打包的内容比较大,vendor这种文件达到了4M,个人感觉是存在一些问题的,想着优化下,正巧同事做了新模版,打包之后整体文件也就在2M左右,太强了,看来vue-cli脚手架还是要研究研究。