Vue3 学习笔记 —— （一(1)，前端程序基础教程

• 四、Vue3 组件化（拆分+传值+注册）

• • 4.1 组件拆分

• 4.2 事件拆分

• 五、总结

Author：Gorit

Date：2021/4/24

Refer：网易云课堂

2021年发表博文： 17/30

Vue3 学习

======================================================================

学习文档

如果是第一次接触 Vue3，可以看这个 Vue3 初体验

零、Vue3.0 与 Vue2.x 的性能对比

======================================================================================

1. 框架内部做了大量的性能优化，包括虚拟 DOM，编译模板、Proxy 的新数据监听，更小的打包文件等

2. 新的组合式 API （composition-api），更适合大型项目的编写方式

3. 对 TypeScript 支持更好，去除繁琐的 this 操作，更强大的类型推导

一、搭建环境

=====================================================================

1. node 8.9.0 以上

2. 安装好 npm

3. 安装 vue

4. 安装 Vue Cli4 脚手架

二、创建项目

=====================================================================

1. vue create vue3-demo

2. 其他的选择默认配置即可

3. 安装 yarn ：cnpm i yarn -g (提升安装速度)

4. 测试：yarn --versin

项目结构介绍

• package.json 项目全局管理

• node_modules 项目依赖包，占用大量空间

• public 入口文件

• src：main.js 为入口文件，项目代码在这里编写

三、Vue3 Composition API

=====================================================================================

Vue3 是向下兼容 Vue2 API 的，但是 Vue3 中提供了一种全新的 Composition API

3.1 ref() or setup() ? reactive()

---

setup() 作为 Vue3.0 的入口函数

reactive() 作声明式渲染，用来响应数据

ref() 显示响应式数据，配合 reactve()

3.1.1 非响应式数据显示 （reactive）

直接返回数据

直接返回 state【非响应式的数据】：{{count}}

3.1.2 响应式数据显示 （reactive）

通过对象的形式

返回 state 对象 【响应式数据】{{state.count}}

3.1.3 响应式数据展示（整合 ref() ）

ref 实现响应式对象 {{ count }}

因此，我们既要响应式，又要展示数据，折中的方案是直接使用 ref

3.1.4 小案例：实现一个计数器

{{counter}}

<button @click=“increment(1)”>increment

<button @click=“decrement(1)”>decrement

3.2 toRefs() ? toRef()

---

在上面的代码中，我们使用 ref() 和 reactive() 分别可以实现响应式的数据，我们是否可以两者一起使用呢？

3.2.1 ref() 和 reactive() 连用

ref() 和 reactive() 实现响应式对象 {{ count }}

3.2.2 使用 toRefs() 和 reactive()

实现响应式对象 {{ count }}

3.2.3 使用 toRef() 和 reactive()

实现响应式对象 {{ count }}

ref 和 reactive 分别是两种响应式数据的变量风格，具体看个人情况使用

3.3 computed 计算属性

---

3.3.1 配合 ref() 使用 实现响应式

{{count}} ， {{double}}

3.3.2 配合 toRefs() 和 reactive() 实现响应式

{{count}} ， {{double}}