浅谈 vue3 响应式原理 第二篇 记录与重放

上一篇简单讲了一下什么是响应式，实现响应式的基本套路：在变量被设置新值的时候，重新执行一次副作用。

但是副作用有很多，我们不可能把每个副作用的执行都在 Proxy 中硬编码一遍，如何设计才能管理这么多副作用，这次来讲 vue3 实现响应式需要的数据结构。

副作用的存储

要完成响应式，我们上一篇讲了在变量执行 set 操作时将副作用重放一遍。但是一个程序有这么多变量，这么多副作用，vue3 是如何管理的呢？

depsMap 是一个绑定属性与副作用的 Map。他的 key 是变量的属性名，他的 value 是属性对应的副作用。

浅谈 vue3 响应式原理 第一篇 响应式和副作用

一年前，在开课吧的视频里看到 winter、大圣还有尤大吹嘘着 vue3，各种新名词映入眼帘：watchEffect，reactive，ref，当时觉得好牛逼啊，一定要学一下（咕咕咕）。

一年后，watchEffect 是啥，reactive 是啥，ref 又是啥，怎么多了出了这么多东西，好难啊，趁现在赶紧摸索清楚。

副作用

我们经常能在尤大口中听到一个词： sideEffect。首次听这个词时，我也是一头雾水，副作用到底是什么，吃药时的副作用吗？在尤大在评论 winter 的小案例时，他讲了 winter 在组件销毁时没有清理掉之前设置的事件监听器，这会对程序产生副作用。当然，尤大此时说的是 sideEffect 是另一个方面的。

vue3中的 sideEffect 怎么理解？一些变量执行某些基本操作时，被拦截并执行一些事情，这些事情叫 sideEffect。

vue-router杂谈

简介

说到 vue-router ，首先脑海中浮现出几个对象：

1

router,routes,route

说到 route 脑海中又有了几个属性：

1

path,component,name

还有几个方法：

1

BeforeRouteUpdate()，BeforeRouteEnter()，BeforeRouteLeave()，router.beforeEach()

一、使用 vite 新建 Vue3 应用

创建 vue3 项目

使用 @vue/cli 创建 vue2/3 项目

1

vue create xxxx 

使用 vite 创建 vue3 项目

1
2
3
4
5
6
7
8
9
10
11

##创建工程
npm init vite-app xxxx
yarn create vite-app xxxx
## 进入工程目录
cd xxxx
## 安装依赖
npm install
yarn install
## 运行
npm run dev
yarn dev

进入 vue3 项目

1

cd <项目名称>

基本命令

1
2
3

yarn install //安装依赖
yarn dev //启动
yarn run build //发行

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

自定义环节

使用主题

笔者使用的是 nexT 主题

我们使用包安装命令

1

yarn add hexo-theme-next

安装完成后，将 node_modules/hexo-theme-next/_config.yml 复制一份出来，然后将文件名修改成 _config.next.yml，放置在 blog 项目的根目录。

后面我们就可以自己对主题配置文件进行自定义修改了，详细参数的用途见官网文档。