vue3笔记

一、创建vue3

1.使用vue-cli（@vue/cli 在4.5.0以上）

2.使用vite（新一代前端构建工具，之前前端依赖于webpack）

二、分析工程结构

不兼容之前代码

2.创建应用实例对象app(类似于之前vue2中的vm，但app中的对象和方法更少）对比

三、常用组合API

1.setup

（1）vue3中新的配置项，值为一个函数

（2）组件中所用到的数据、方法等均要配置在setup中（使用vue2中的形式也可以，最好不要混用）

（3）setup的两种返回值

1.若返回一个对象，则其中的属性、方法在模板中均可直接使用

2.渲染函数，则可以自定义渲染内容（了解即可）

先引入import {h} from 'vue'

return ()=>{return h('h（元素）',’（内容）‘)}

可写成return ()=>h('h','xx')

直接替换template中内容

3.setup用法

注：

1. vue2的配置中可以获取vue3中的数据、方法，vue3的setup配置无法读取vue2中的数据、方法

2. vue2、vue3同时使用，如果重名，setup优先

3. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。后期也可以返回一个promise实例，但需要suspense和异步组件的配合。

2.ref函数（原来的ref仍存在）

引入

改为响应式（不用ref，则数据改了，但页面不改）

（1）处理数据类型

(2)处理对象类型

注：

2.基本数据类型：响应式依然是靠Object.defineProperty()的get、set完成

3.对象类型的数据：内部“求助”了vue3中的新函数-reactive函数

3.reactive函数

定义一个对象类型的响应式数据

注：

1.const 代理对象 = reactive（源对象）接收一个对象或数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

2.定义的响应式数据是“深层次的”，即可以读取对象套对象，不论多深都能挖出来

4.vue3中的响应式原理

（1）在vue2中，新增、删除属性，页面不会更新，只能使用如下方法

或

(2)直接通过下标修改数组，页面不会更新，只能使用如下方法

（2）Reflect

(3)实现原理

• 通过Proxy（代理）：拦截对象中任意属性的变化，包括属性值的读写，属性的添加，属性的删除等

• 通过Reflect（反射）：对源对象的属性进行操作

5.reactive对比ref

• 从定义数据角度对比：

  • ref 用来定义：基本类型数据。
  • reactive 用来定义：对象（或数组）类型数据。
  • 备注： ref 也可以用来定义对象（或数组）类型数据，它内部会自动通过 reactive 转为代理对象。

• 从原理角度对比：

  • ref 通过 Object . defineProperty (）的 get 与 set 来实现响应式（数据劫持）。
  • reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect 操作源对象内部的数据。

• 从使用角度对比：

  • ref 定义的数据：操作数据需要 .value ，读取数据时模板中直接读取不需要 ．value
  • reactive 定义的数据：操作数据与读取数据：均不需要 .value

6.setup的两个注意点

• setup 执行的时机
  • 在 beforeCreate 之前执行一次， this 是 undefined .
• · setup 的参数
  • props ：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context ：上下文对象
    • attrs :值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性，相当于 this .$ attrs
    • slots ：收到的插槽内容，相当于 this .$ slots
    • emit ：分发自定义事件的函数，相当于 this . $emit

7.计算属性与监视

（1）computed函数

可以用vue2中方式（配置项），但不建议

(2)watch函数

vue2中

vue3中

注：监视reactive定义的响应式数据中某个属性（且是一个对象）时：deep配置有效，如上述特殊情况

watch时value问题：

(3)watchEffect函数

用到谁，谁就被监视，也就是调watchEffect一次

• watch 的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect 的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect 有点像 computed :

  • 但 computed 注重计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。

8.生命周期

使用生命周期钩子

1.通过配置项的形式使用（如vue2中）

2.通过组合式API(1.2.同时使用，2.比配置项更早执行)

9.自定义hook函数

在src下创建文件夹hooks，放置函数

• 什么是 hook ?

  本质是一个函数，把 setup 函数中使用的 Composition API 行了封装。

• 自定义 hook 的优势：复用代码，让 setup 中的逻辑更清楚易懂。

• 类似于vue2.x中的 mixin

10.toRef

• 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性值。

• 语法： const name = toRef ( person ,' name ')

• 应用：要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展： toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法： toRefs ( person )