vue3 learn

一、介绍

新的特性：

支持 typescript

增加了新的 api：

setup： ref ，computed，watch ，新的生命周期函数等

没有this 概念，可以通过直接引入的方式。

二、使用

运行

使用 vue 脚手架运行项目，

npm install -g @vue/cli

vue create my-project

三、对比其他版本

不一样的使用

在文件引入上,

现在使用的是全局方法 createApp 这种格式直接引入。

以前是使用 new vue 创建一个实例的方式引入。

不需要根组件来包子组件。

setup

是一个函数，只会执行一次。

函数中没有this，

可以直接定义变量和函数，不需要使用data 和 mathod 方法写了，直接使用return可以返回出来。

有两个参数，props、context , props可以接受父组件的传值。

代替了vue2 中的 beforeCreate 和 created。

ref

作用：定义变量，包装成响应式数据（一般用来定义原始数据）

使用：const a = ref(1)

修改数据： a.value = 2 (在js 代码中)

显示数据：直接使用 {{a}} （在标签中）

如果使用ref 来定义对象、数组类型的数据，内部会自动转化成 reactive

reactive

作用：用于定义对象、数组类型的数据

使用：const a = reactive({b:1,c:2})

缺点：拆成...a 的形式return返回的话，不是对象类型的属性就不是响应式数据了

解决方法是需要使用 toRefs 方法包装一下。

toRefs

作用：对 reactive 的每个属性进行包装，每个属性就都是响应式的了。

watch

新增 watchEffect 不需要设置监听的数据了

优势

vue2

存在的问题：

不是响应式的，给对象添加、删除或者给使用数组下角标修改值，界面不会自动更新。（vue3可以）

四、原理

vue2

响应式原理：

通过 defineProperty 对对象中的存在的属性的值的读取和修改进行拦截。

通过 forEach 循环对象，然后使用defineProperty 获取对象的每一个属性进行拦截。

vue3

响应式原理：

通过 proxy 对对象的本身进行拦截，可以对属性进行读取、修改、删除，生成一个代理对象。