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

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

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

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

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

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

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

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

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

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

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

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