# Vue3学习

**Repository Path**: web-asen/vue3_school

## Basic Information

- **Project Name**: Vue3学习
- **Description**: Vue3学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-15
- **Last Updated**: 2025-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3快速上手

### 1.Vue3简介

``` javascript
    ·2020年9月18日,vue.js发布3.0版本，代号:One Piece(海贼王)
    ·耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
    ·github上的tags地址: https:lgithub.com/vuejs/vue-nextreleases/tagv3.0.0

```

### 2.Vue3 带来了什么

#### 1.性能优化
        ``` javascript
            。打包大小减少41%
            ·初次渲染快55%,更新渲染快133%
            。内存减少54%
            ......
        ```
#### 2.源码升级
        ``` javascript
            ·使用Proxy代替defineProperty实现响应式
            ·重写虚拟DOM的实现和Tree-Shaking (术语)
            .....
    
        ```
#### 3.拥抱TypeScript
        ``` javascript
            . Vue3可以更好的支持TypeScript （微软出版的）
        ```
#### 4.新的特性
##### 1. Composition API(组合API)
        ``` javascript
            . setup配置
            . ref与reactive
            . watch与watchEffect
            . provide与inject
        ```
##### 2. 新的内置组件
        ``` javascript
            . Fragment
            . Teleport
            . suspense
        ```
##### 3.其他改变
        ``` javascript
            . 新的生命周期钩子
            . data选项应始终被声明为一个函数。
            . 移除keyCode支持作为v-on的修饰符
        ```
### 创建Vue3.0工程
#### 1. 使用vue-cli创建
 官方文档 https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

 ``` javascript
    ##查看@vue/cli版本,确保@vue/cli版本在4.5.8以上
    vue --version

    ## 安装或者升级你的@vue/cli
    npm install -g @vue/cli
    ##创建

    vue create vue_test
    ##启动

    cd vue_test
    npm run serve
 ```
 #### 2. 使用 vite 创建
 官方文档: https://v3.cn.vuejs.org/guide/installation.html#vite
 vite官网:https://vitejs.cn
 ```
    . 什么是vite?——新一代前端构建工具。
    . 优势如下:
        。开发环境中，无需打包操作，可快速的冷启动。轻量快速的热重载(HMR)。
        。轻量快速的热重载(HMR)。
        。真正的按需编译，不再等待整个应用编译完成。
    。传统构建与vite构建对比图

    ## 创建工程
    npm init  vite-app "项目名字"
    ## 进入工程
    cd 项目路径
    ## 安装依赖
    npm install
    ## 运行
    npm run dev
 ```

#### Vue3中可以 没有根标签

### 二、常用的Composition API(组合式API)
#### 1.拉开序幕setup
``` javascript
    1.理解: Vue3.0中一个新的配置项，值为一个函数。
    2.setup是所有Composition API(组合API)“表演的舞台”。
    3.组件中所用到的:数据、方法等等，均要配置在setup中。
    4.setup函数的两种返回值:
        1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )
        2.若返回一个渲染函数:则可以自定义渲染内容。(了解)
    5.注意点:
        1.尽量不要与Vue2.x配置混用
            . Vue2.x配置(data、methos、computed...）中可以访问到setup中的属性、方法。
            ·但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
            ·如果有重名, setup优先。
        2.setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性（注：后期也可以返回一个promise实例，但需要Suspense和异步组件的配合）。
    
    代码段：
        <template>
            <h1>姓名：{{name}}年龄{{age}}</h1>
            <button @click="sayhellow">说话</button>
        </template>
        setup(){
            let name = "张三",
            let age = 18

            function sayhellow(){
                alert(`我叫${name},我${age}岁`)
            }
            //若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用
            rerturn {
                name:name,
                age:age,
                sayhellow:sayhellow
            }
            //若返回一个渲染函数:则可以自定义渲染内容。
            return ()=>{ return h('标签值'，'尚硅谷')}
        }
```
### ref
```javascript
    。作用:定义—个响应式的数据
    。语法: const xxx = ref(initValue)
        。创建一个包含响应式数据的引用对象(reference对象)。
        。JS中操作数据:xxx.value
        。模板中读取数据:不需要.value，直接:<div>{{xxx}}</div>
    ·备注:
        。接收的数据可以是:基本类型、也可以是对象类型。
        。基本类型的数据:响应式依然是靠object.defineProperty()的get与set完成的。
        。对象类型的数据:内部“求助”了Vue3.0中的一个新函数——reactive函数。
    <template>
        <h1>姓名：{{name}}年龄{{age}}</h1>
    </template>
    import {ref} from "vue"
    setup(){
        let name = ref('张三')
        let age = ref(18)
        //更改ref的值
        name.value = "新值"
        age.value = "新值"
    }
```

### reactive函数
```javascript
    。作用: 定义一个对象类型的响应式数据 (基本类型别用它，用 ref 函数)
    。语法: const 代理对象= reactive(被代理对象) 接收一个对象(或数组)，返回一个代理器对象 (proxy对象)
    。reactive定义的响应式数据是“深层次的”。
    。内部基于 ES6的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

    <template>
        <h1>姓名：{{obj.name}}年龄{{obj.age}}</h1>
    </template>
    import {reactive} from "vue"
    setup(){
        let obj = ref({
            name:"小明",
            age:18
        })
        // obj 返回值是proxy
        //更改reactive的值
        obj.name = "新值"
        obj.age = "新值"
    }
```

### Vue3.0中的响应式原理
#### 1.vue2.x的响应式
```javascript
    实现原理:
        1. 对象类型: 通过 object.defineProperty() 对属性的读取、修改进行拦截(数据劫持)。
        2. 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包惠)。
        //伪代码
            Object.defineProperty(data,'count'，{
                get () {},
                set () {}
            })
    存在问题:
        1. 新增属性、删除属性,界面不会更新。
        2. 直接通过下标修改数组,界面不会自动更新。
```
#### 2.Vue3.0的响应式
```javascript
    实现原理:
        。通过Proxy(代理): 拦截对象中任意属性的变化,包括: 属性值的读写、属性的添加、属性的删除等。
        。通过Reflect (反射): 对被代理源对象的属性进行操作。
        。MDN文档中描述的Proxy与Reflect:
            Proxy: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global Objects/Proxy
            Reflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global Objects/Refleci

        //伪代码
            new Proxy(data, {
                // 拦截读取属性值
                get (target, prop) {
                    return Reflect.get(target, prop);
                },
                // 拦截设置属性值或添加新属性
                set (target, prop, value) {
                    return Reflect.set(target, prop， value)
                },
                // 拦截删除属性
                deleteProperty (target，prop) {
                    return Reflect.deleteProperty(target， prop)
                }
            })
            proxy.name = 'tom' //测试
        
```

### reactive对比ref
```javascript
    1. 从定义数据角度对比:
        。ref用来定义:基本类型数据
        。reactive用来定义:对象 (或数组)类型数据
        。备注: ref也可以用来定义对象 (或数组)类型数据它内部会自动通过 reactive 转为代理对象
    2. 从原理角度对比:
        。ref通过 object.defineProperty()的 get 与 set 来实现响应式 (数据劫持)
        。reactive通过使用Proxy来实现响应式 (数据劫持)，并通过Reflect操作源对象内部的数据
    3. 从使用角度对比:
        。ref定义的数据: 操作数据需要 value，读取数据时模板中直接读取不需要.value
        。reactive定义的数据: 操作数据与读取数据: 均不需要 value 。
```
### setup的两个注意点
```javascript
    1. setup执行的时机
        。在beforeCreate之前执行一次，this是undefined。
    2. setup的参数
        。props: 值为对象，包含: 组件外部传递过来，且组件内部声明接收了的属性
        。context:上下文对象
            1. attrs: 值为对象，包含: 组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs
            2. slots: 收到的插槽内容,相当于 this.$slots 。
                //伪代码
                父组件:
                    <Demo>
                        <template v-slot:名字>（注：不需要加引号）
                            <span>1111</span>
                        </template>
                    </Demo>
                子组件

            3. emit: 分发自定义事件的函数,相当于 this.$emit 
                //伪代码
                    子组件：
                        setup(props,context){
                            function test(){
                                context.emit('自定义事件',自定义数据)
                            }
                        }
                    父组件：
                        <template>
                            <子组件 @自定义事件="自定义事件"></子组件>
                        </template>
                        setup(){
                            自定义事件(e){

                            }
                        }
                    
```
### 计算属性 与 监听
#### 1.computed函数
    1. 与V2中的computed配置功能一样
    2.语法：
```javascript
    <template>
        <span>{{fulIName}}</span>
    </template>
    import {computed} from 'vue'
    setup(){
        //计算属性--简写 (不考虑读写和的功能)
        let fulIName = computed(()=>{
            return person.firstName + '-' + person.lastName
        }
        //计算属性一完整   
        let fullName = computed({
            get(){
                return person.firstName + '-' + person.lastName
            },
            set(value){
                const nameArr = value.split('-')
                person.firstName = nameArr[0];
                person.lastName = nameArr[1]
            }
        })
        return {
            fulIName
        }
    }
```
#### 2.watch 监听
##### 2.1 情况一：监听ref所定义的一个响应式数据
```javascript
     watch(sum,(newValue,oldValue)=>{
        console.log('sum变了,newValue,oldValue)
     },immediate:true)
```
##### 2.2 情况二：监视ref所定义的多个响应式数据
```javascript
     watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变了,newValue,oldValue)
    },{immediate:true}) 
```
##### 2.3 情况三：监视reactive所定义的一个响应式数据的全部属性
```javascript
    注：
        1.注意:此处无法正确的获取oldValue
        2.注意:强制开启了深度监视 (deep配置无效)
    语法：
         watch(person,(newValue,oldValue)=>{
            console.log('person变化了 ,newValue,oldValue)
        },{deep:false}) 
```
##### 2.4 情况四：监视reactive所定义的一个响应式数据中的某个属性
```javascript
    watch(()=>person.name,(newValue,oldValue)=>{
        console.log('person的name变化了,newValue,oldValue)
    })
```
##### 2.5 情况五: 监视reactive所定义的一个响应式数据中的某些属性
```javascript
    watch([()=>person.name,()=>person.age],(newValue,oldValue)={
        console.log('person的name或age变化了,newValue,oldValue)
    })
```
##### 2.6 特殊情况
```javascript
 watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了,newValue,oldValue)
 },{deep:true})
```
#### 3.watchEffect函数
```javascript
    1. watch的套路是: 既要指明监视的属性，也要指明监视的回调。
    2. watchEfect的套路是: 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
    3. watchEffect有点像computed
        3.1 但computed注重的计算出来的值 (回调函数的返回值)，所以必须要写返回值
        3.2 而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值

    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。

    watchEffect(()=>{
        const x1 = sum.value
        const x2 = person.age
        console.log('watchEffect配置的回调执行了，)
    })
```
### 生命周期
###### 1.Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名:
    1. beforeDestroy改名为beforeunmount
    2. destroyed 改名为 unmounted
###### Vue3.0也提供了 Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:
```js
    beforeCreate ===> setup()
    created =======> setup()
    beforeMount ===> onBeforeMount
    mounted =======> onMounted
    beforeUpdate ===> onBeforeUpdate
    updated=>onUpdated
    beforeUnmount==> onBeforeUnmount
    unmounted =====> onUnmounted
```
#### 自定义hook函数
```js
    1. 什么是hook? -本质是一个函数，把setup函数中使用的Composition APi进行了封装
    2. 类似于vue2.x中的mixin。
    3. 自定义hook的优势: 复用代码,让setup中的逻辑更清楚易懂
```
### toRef
```js
    1. 作用: 创建一个ref 对象，其value值指向另一个对象中的某个属性
    2. 语法:
        const name = toRef(person(原对象), 'name(原对象的属性)')
    3. 应用:要将响应式对象中的某个属性单独提供给外部使用时
    4.  扩展: toRefs 与toRef 功能一致，但可以批量创建多个ref 对象。
    语法: 
        toRefs(person(原对象))
```
### 其它 Composition API
#### 1.shallowReactive 与 shallowRef
1. shallowReactive
    。shallowReactive: 只处理对象最外层属性的响应式 (浅响应式)
```js
    let obj = shallowReactive({
        a:1,
        b:2,
        c:{
            d:4
        }
    })
    obj.a = 2 //会改变
    obj.c.d = 5 //深层次不会改变
```
2. shallowRef
    。shallowRef: 只处理基本数据类型的响应式,不进行对象的响应式处理。
```js
    let x = ref({y:1})
    x.y = 2 //会改变，内部会引用reactive函数变成响应式对象

    let x = shallowRef({y:1})
    x.y = 2 //不会改变 内部会转成object对象 不会变成响应式对象

    let num = shallowRef(0)
    num++ //会改变
```
3. 什么时候使用?
    。如果有一个对象数据，结构比较深,但变化时只是外层属性变化 ===> shallowReactive.
    。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef

#### 2.readonly 与 shallowReadonly
    。readonly: 让一个 <b>响应式数据</b> 变为只读的 (深只读)
    。shallowReadonly: 让一个 <b>响应式数据</b> 变为只读的 (浅只读).
    。应用场景: 不希望数据被修改时.
```js
    let person = reactive({
        name:'张三',
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    })
    //readonly 不管多深 比如 字段salary 20--->变为21，变不了
    person = readonly(person)
   
    //shallowReadonly 只能第一层 比如（name,age）不能 更改，但是 salary字段嵌套很深，可以更改
    person = shallowReadonly(person)
```
#### 3.toRaw 与 markRaw
。toRaw:
    1. 作用:将一个由 reactive 生成的响应式对象转为普通对象
    2. 使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
```javascript
    let person = reactive({
        name:'张三',
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    });

    const sum = 10

    //将 响应式数据 person 转为原始对象
    const p = toRaw(person)

    //将 响应式数据 sum 转为原始 sum

    const sums = toRaw(sum) //值为undefined
```
。markRaw:
    。作用: 标记一个对象，使其永远不会再成为响应式对象
    。应用场景:
        1.有些值不应被设置为响应式的，例如复杂的第三方类库等
        2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能
```js
    let person = reactive({
        name:'张三',
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    });

    let car = {name:'奔驰',price:40}

    // 将 car 添加到 响应式数据 person上 使car不在响应式
    person.car = markRaw(car)

    //即使车的价格数据发生变化 ， 页面也不会有变化
    person.car.price++
```
#### 4.customRef
    。作用：创建一个自定义ref，并对其依赖项跟踪和更新触发进行显示控制
```js
    //页面
    <input v-model='keyword' />
    <h3>{{keyword}}</h3>

    //自定义一个myref函数
    function myref(value){
        /*customRef 接收一个回调
            回调有两个参数
                track:通知Vue追踪value变化（提前和get商量一下，让他认为value是有用的）
                trigger：通知Vue重新解析模板
            需要返回一个对象：
                对象里 有get、set
        */
        return customRef((track,trigger)=>{
            get(){
                console.log('有人在myref容器读取数据')
                track()
                return value
            },
            set(newValue){
                console.log('有人设置新值')
                value = newValue
                trigger()
            }
        })
    }

    let keyword = myref('hellow')
```
#### 5.provide 与 inject
。作用:实现祖孙组件间通信
。套路:父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据
。具体写法:
1. 祖组件中:
```js
    import {provide} from "vue";
    setup(){
        ..... .
        let car = reactive({name:'奔驰',price:' 40万'});
        provide('car',car)
            /*
                provide：是个函数
                    传递两个参数
                        'car':第一个值是数据自定义的名字
                        car：第二个值是自定义的数据
            */
        ......
    }
```
2. 后代组件中:
```js
    import {inject} from "vue"
    setup(props,context){
        ......
        const car = inject('car')
        return {car}
        /*
            inject:是个函数
                接收一个参数
                    'car':祖组件自定义的数据名字
        */
        ......
    }
```
### 父子组件传参

```js
https://juejin.cn/post/7518783423272845347
```



#### 6.响应式数据的判断

1. isRef: 检查一个值是否为一个 ref 对象
2. isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
3. isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
4. isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

### 新的组件
#### 1.Fragment
1. 在Vue2中: 组件必须有一个根标签
2. 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中
3. 好处: 减少标签层级，减小内存占用
#### 2.Teleport
。什么是Teleport?
    Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
```js
    //to:移动位置 选值：元素名例如 body html,也可以是类名
    <teleport to="移动位置">
        <div y-if="isShow" class="mask">
            <div class="dialog">
                <h3>我是一个弹窗</h3><button @click="isshow = false">关闭弹窗</button>
            </div>
        </div>
    </teleport>
```
### 3.Suspense
1. 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
2. 使用步骤:
    。异步引入组件
```js
    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue(组件的路径)'))

```
    。使用 Suspense 包裹组件，并配置好 default 与 fallback
```js
    //v-slot:default 和 v-slot:fallback 是固定值 不可变
    //v-slot:default 是成功后要显示的
    //v-slot:fallback 是成功前要显示的
    <template>
        <div class="app">
            <h3>我是App组件</h3>
            <Suspense>
                <template v-slot:default> 
                    <Child/>
                </template>
                <template v-slot:fallback>
                    <h3>加载中.....</h3>
                </template>
            </Suspense>
        </div>
    </template>
```

### 插槽

#### 1.介绍

```js
简介
在Vue3中，子组件的模板可以定义多个插槽（包括默认插槽和具名插槽等等），
而父组件在引用子组件时，可以根据需要 有选择性的为这些插槽插入内容。
如果父组件没有为某个插槽提供内容，那么子组件的模板中该插槽的位置将显示为该插槽的默认内容（如果有的话），或者简单地留空。
```

#### 2.默认插槽（Default Slot）

```js
1. 定义：没有指定名称的插槽，用于接收父组件传递的未明确指定插槽名称的内容。
2. 用法：在子组件中使用<slot></slot>定义默认插槽的位置，父组件中直接放在子组件标签内的内容会被渲染到该位置。
//父组件
	<template>
      <div>
        <!--子组件-->
        <DemoChild>
          <!--默认插槽-->
          <div>这是默认插槽的内容是，测试测试测试</div>
        </DemoChild>
      </div>
    </template>
//子组件 DemoChild.vue
<template>
  <div>
    这是子组件
    <!--默认插槽-->
    <slot></slot>
  </div>
</template>
```

####  3.具名插槽（Named Slots）

```js
1. 定义：带有名称的插槽，用于接收父组件中明确指定插槽名称的内容。
2. 用法：在子组件中使用<slot name=“插槽名称”></slot>定义具名插槽，父组件中通过<template v-slot:插槽名称>或简写为<template #插槽名称>来指定内容应该插入哪个具名插槽。
//父组件
    <template>
      <div>
        <!--子组件-->
        <DemoChild>
          <!--具名插槽-->
          <template #header>
            <div>这是 header 具名插槽的简写形式</div>
          </template>
          <template v-slot:header2>
            <div>这是 header2 具名插槽的完整形式</div>
          </template>
        </DemoChild>
      </div>
    </template>
//子组件
    <template>
      <div>
        <!--具名插槽-->
        <slot name="header"></slot>
        <slot name="header2"></slot>
      </div>
    </template>
```

#### 4. 插槽的其他的用法

```js
https://blog.csdn.net/weixin_50559423/article/details/142561395
```