# vue3Study

**Repository Path**: yuleigg/vue3-study

## Basic Information

- **Project Name**: vue3Study
- **Description**: Vue3教学代码仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-15
- **Last Updated**: 2023-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3项目搭建

## 1.包管理器

### **npm包管理工具**

- 是 Node.js 的包管理工具
- 全称为 "Node Package Manager"
- 修改淘宝源：npm config set registry https://registry.npmmirror.com/
- 安装包：npm i [packg-name]
- 删除包：npm remove [packg-name]

### **pnpm包管理工具**

- 最新的 Node.js 的包管理工具
- 比yarn更快更强更稳定
- 安装 npm i pnpm -g
- 先不用更改源
- 安装包：pnpm install [packg-name]
- 删除包：pnpm remove [packg-name]

## 2.构建工具

### vite工具

vite是下一代前端开发与构建工具。 Vite意在提供开箱即用的配置，同时它的插件[API](https://baike.baidu.com/item/API/10154?fromModule=lemma_inlink)和JavaScript API 带来了高度的[可扩展性](https://baike.baidu.com/item/可扩展性/8669999?fromModule=lemma_inlink)，并有完整的类型支持。

官网地址：[Home | Vite中文网 (vitejs.cn)](https://vitejs.cn/)

**Vite是Vue的作者尤雨溪开发的Web开发构建工具**，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用

更适合vue的开发

#### 特点

vite在开发模式下，没有打包的步骤，它利用了浏览器的ES Module Imports特性，只有在真正需要时才编译文件，速度快

webpack由于其丰富的功能和扩展性，适合于大型、复杂的项目

### webpack工具

vue官网目前推荐的格式

webpack在编译过程中，会将所有模块打包为一个bundle.js文件，然后再运行这个文件，速度更慢。

#### 特点

webpack是一个静态模块打包器，可以把各种资源如JavaScript、CSS、图片等都视为模块，然后将这些模块打包成一份或多份优化的资源

webpack由于其丰富的功能和扩展性，适合于大型、复杂的项目

## 3.搭建过程

```js
//步骤式创建，按照提示操作即可，注意选择javascript项目
pnpm create vite 或者  pnpm create vite@latest
#特别注意，一旦出现创建失败报错，且出现系统目录中断，一般是因为默认用户名称包含了空格，可以重新设置pnpm create使用的缓存目录来解决
pnpm  config set cache-folder "F:\node\node_global\yarn_cache"同时别忘了添加环境变量paths F:\node\node_global
快速创建命令：pnpm create vite 项目名称 --template vue 
```

### pnpm create的方式

1. cmd进去到你想要新建项目的文件夹

2. npm 安装pnpm    命令  npm install pnpm -g

   如果出现在xxxxx.ps1的错误，找到这个文件，并且干掉它

3. 输入 pnpm create vite

4. 输入你想要的项目名称

5. 选择vue

6. cd 你输入的项目名称

7. 运行pnpm install

8. 运行pnpm run dev

## 4.项目目录

![image-20231110145901476](I:\软件工程学院\教学\2023-2024-综合实训课程\第三课vue3项目搭建和生命周期\image-20231110145901476.png)

## 5.package.json

包描述文件

```js
{
  "name": "vue-demo",  //项目名称
  "private": true,
  "version": "0.0.0",//版本号
  "type": "module",//
  "scripts": {//javascript 命令
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {//是项目的生产环境中所必须的依赖包
    "vue": "^3.3.4"
  },
  "devDependencies": {//开发阶段需要的依赖包
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}
```



## 6..gitinore

git仓库管理使用的忽略文件配置，一旦在里面配置则不会被git识别和上传到git线上仓库管理

## 7.项目入口  main.js

src文件夹下面的main.js是整个vue项目的入口

```js
import { createApp } from 'vue'//创建一个应用实例。
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')//创建一个应用实例。
/*
createApp(第一个参数，第二个参数)
第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。
*/
//#app 在哪里呢？在跟根路径的index.html里

/*
ceateApp(App) 会创建一个应用实例
ceateApp(App).mount('#app')  将应用实例挂载在一个容器元素中。
.mount('#app')  参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)
*/

```

### 组件名格式

在整个指引中，我们都使用**(大驼峰)** PascalCase 作为组件名的注册格式，这是因为：

1. PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
2. `<PascalCase />` 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。

为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 `MyComponent` 为名注册的组件，在模板中可以通过 `<MyComponent>` 或 `<my-component>` 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板



## 8.SFC语法定义（组件定义）

### SFC语法就是组件

​		一个 Vue 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

- 每一个 *.vue 文件都由三种顶层语言块构成：<template>、<script> 和 <style>，以及一些其他的自定义块：
- 每个 *.vue 文件最多可以包含一个顶层 <template> 块。
- 每个 *.vue 文件最多可以包含一个 <script> 块。(使用 <script setup> 的情况除外)
- 每个 *.vue 文件最多可以包含一个 <script setup>。(不包括一般的 <script>)
- 每个 *.vue 文件可以包含多个 <style> 标签

```js
<script >
</script>
<template>
  <div>
    <h1>helloworld</h1>
  </div>
</template>

<style >
</style>

```

## 9.基本语法

### (1) 选项式api

#### 响应式基础

##### data  数据定义 ,声明响应式状态

​		选项式 API 时，会用 `data` 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数比，对象里面的属性就是要定义的变量，并且具有响应式。Vue 将在创建新组件实例的时候调用此函数

```js
<script>
export default {
  data() {
    return {
      title: 'helloworld'
    }
  },
}
</script>
```

##### 页面输出变量内容

使用插值表达式{{}}

```js
<script >
  export default {
    data() {
      return {
        title: "helloworld",
      };
    },
  };
</script>
<template>
  <div>
    <h1>{{title}}</h1>//插值使用{{}}
  </div>
</template>
<style >
</style>
```

##### 页面元素的属性绑定

vue使用**v-bind指令给页面元素的属性响应式的绑定属性**，插值表达式{{}}不能在 HTML 的标签上面中使用。想要响应式地给标签绑定一个属性，应该使用 v-bind 指令

**v-bind的语法：  v-bind:属性名称=”变量名”**
**可以简写成：    :属性名称=”变量名”**

如果绑定的值是 null 或者 undefined，那么该 属性将会从渲染的元素上移除。

```js
<script >
  export default {
    data() {
      return {
        title: "helloworld",
      };
    },
  };
</script>
<template>
  <div>
    <h1 v-bind:id="title">{{title}}</h1>
    <h1 :id="title">{{title}}</h1> //简写
     <input type="text"
           v-bind:value="title">
  </div>
</template>
<style >
</style>

```



##### methods  方法定义 ，声明方法

​		要为组件添加方法，我们需要用到 `methods` 选项。它应该是一个包含所有方法的对象：

```js
<script>
export default {
  data() {
    return {
      count: {}
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
}
</script>
```

Vue 自动为 `methods` 中的方法绑定了永远指向组件实例的 `this`。这确保了方法在作为事件监听器或回调函数时始终保持正确的 `this`。你不应该在定义 `methods` 时使用箭头函数，因为箭头函数没有自己的 `this` 上下文。

##### 页面事件绑定

vue可以在页面绑定方法，**v-on用于监听DOM事件**，并在触发事件时执行相应的方法或逻辑。它的作用是将事件与Vue实例中的方法进行绑定，实现事件处理和响应

语法：<div v-on:事件名称=”方法名称”></div>
            简写为 
@事件名称=”方法名称”



```js
<script >
  export default {
    data() {
      return {
        title: "helloworld",
      };
    },
    methods: {
      getValue() {
        console.log("点击了");
      },
    },
  };
</script>
<template>
  <div>
    <h1 v-bind:id="title"
        v-on:click="getValue">{{title}}</h1>
    <h1 :id="title"
        @click="getValue">{{title}}</h1>
    <input type="text"
           v-bind:value="title">
  </div>
</template>
<style >
</style>
```

#### input实现双向绑定

v-bind和v-on可以实现简单的双向绑定示例

input框通过value属性和输入事件的绑定，可以实现数据与视图的双向绑定

```js
<template>
  <input type="text"
         :value="value"
         @input="changValue">
</template>

<script>
  export default {
    data() {
      return {
        value: "默认值",
      };
    },
    methods: {
      changValue(e) {
        console.log(e);
        // console.log(value);
        //this表示value实例，data定义的属性都挂在vue实例上面，
        //不能直接访问
        this.value = e.target.value;
        console.log("value的值：", this.value);
        //多次触发的时候，如果值没有发生改变就不会触发页面更新
        // 双向绑定 需要将视图输入的值赋值给数据
      },
    },
  };
</script>
```

这个是自己实现简单的双向绑定，不过vue有更简单的方式可以实现

##### v-model指令

**v-model是什么？**

v-model 是[Vue框架](https://so.csdn.net/so/search?q=Vue框架&spm=1001.2101.3001.7020)的一种内置的API指令，本质是一种语法糖写法。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

**什么场景下会使用v-model？**

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据

**v-model示例**

```js
<template>
  <!-- <input type="text"
         :value="value"
         @input="changValue"> -->
  <input type="text"
         v-model="value"
         @input="showValue">
</template>
<script>
  export default {
    data() {
      return {
        value: "默认值",
      };
    },
    methods: {
      showValue() {
        console.log("value的值：", this.value);
      },
      changValue(e) {
        console.log(e);
        // console.log(value);
        //this表示value实例，data定义的属性都挂在vue实例上面，
        //不能直接访问
        this.value = e.target.value;
        console.log("value的值：", this.value);
        //多次触发的时候，如果值没有发生改变就不会触发页面更新
        // 双向绑定 需要将视图输入的值赋值给数据
      },
    },
  };
</script>
```



#### 响应式原理

在 Vue 3 中，数据是基于 [JavaScript Proxy（代理）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 实现响应式的，数据的操作通过操作定义的属性的value值来实现变更，如果直接给属性做赋值操作，会导致属性失去响应式

```js
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}
```

当你在赋值后再访问 `this.someObject`，此值已经是原来的 `newObject` 的一个响应式代理。**这里原始的 `newObject` 不会变为响应式：请确保始终通过 `this` 来访问响应式状态**

#### 深层响应性

在 Vue 中，默认情况下，状态是深度响应的。这意味着当改变嵌套对象或数组时，这些变化也会被检测到：

```js
export default {
  data() {
    return {
      obj: {
        nested: { count: 0 },
        arr: ['foo', 'bar']
      }
    }
  },
  methods: {
    mutateDeeply() {
      // 以下都会按照期望工作
      this.obj.nested.count++
      this.obj.arr.push('baz')
    }
  }
}
```

#### DOM 更新时机

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用 [nextTick()](https://cn.vuejs.org/api/general.html#nexttick) 全局 API

```js
import { nextTick } from 'vue'

export default {
  methods: {
    async increment() {
      this.count++
      await nextTick()
      // 现在 DOM 已经更新了
    }
  }
}
```

## （2）组合式api

### 响应式基础

#### ref（）数据定义

ref()接受一个初始值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 `.value`。

```js
const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
```

ref 对象是可更改的，也就是说你可以为 `.value` 赋予新的值。它也是响应式的，即所有对 `.value` 的操作都将被追踪，并且修改会触发页面的更新

#### reactive（）对象定义

reactive()返回一个对象的响应式代理。

创建一个响应式对象

```js
const obj = reactive({ count: 0 })
obj.count++
```



#### setup（）钩子函数

配置式api使用起来太过麻烦，所以组合式api来了，首先就是数据定义的区别，组合式api刚出来的时候使用setup钩子函数来实现对属性状态的管理

Vue3中代码中必须要有这个函数，`setup()`函数会在组件初始化的时候执行，其主要目的是以原生js的方式设置组件的数据和方法等。

`setup()` 函数会返回一个对象，对象会暴露给模板和组件实例。其他的地方也可以通过组件实例this来获取 `setup()` 暴露出来的属性

```js
<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>
```

更简单的操作

#### setup语法糖

使得组件逻辑更加集中和可复用
使用setup语法糖后，不再需要写setup函数，组件只需要引入不需要注册，属性和方法也不需要再返回，可以直接在template模板中使用。

setup语法糖的作用
vue3的 template 中可以写多个子节点
vue3的setup语法糖没有this
起初 Vue3.0 暴露变量必须 return 出来，template中才能使用； 这样会导致在页面上变量会出现很多次。vue3.2只需在script标签中添加setup,可以帮助我们解决这个问题。
组件只需引入不用注册，属性和方法也不用返回， 也不用写setup函数，也不用写export default 

```js
<script setup>
  import { ref } from "vue";
  const msg = ref("这是第一条消息");
  msg.value = "变成第二条";
</script>
<template>
  <h1>{{ msg }}</h1>
</template>
<style scoped>
</style>

```

#### 插值表达式

Vue3的插值操作使用Mustache”语法 (即双大括号)来表示，其中可以包含表达式，例如加法{{ number + 1 }}或者三元不等式{{ ok ? 'Yes' : 'No' }}。
插值操作可以用于更新元素的文本值，也就是显示出一个纯文本，等价于{{}}，不能用于代码块的赋值。

```js
<h1>{{title}}</h1>
```



#### 常用的内置指令

指令是什么？
     指令是带有 v- 前缀的特殊 属性，值一般为一个 JavaScript 表达式 。
指令用来做什么？
	一个指令的任务是在其表达式的值变化时响应式地更新 页面
指令怎么使用？
	指令主要是通过在页面标签上面添加 以‘v-’开头的特殊属性绑定，来让这个标签的页面显示跟随绑定的属性发生变化

v-once指令：用于指定元素或者组件只渲染一次。当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过。
v-text指令：用于更新页面元素的文本内容（等价于{{}}）。
v-html指令：在默认情况下，如果展示的内容本身是html的，那么vue并不会对其进行特殊的解析。如果希望这个内容被Vue可以解析出来，那么可以使用v-html来展示。
v-pre指令：不对{{}}内容进行解析。用于跳过元素和它的子元素的编译过程，显示原始的Mustache（{}）标签。也就是正常显示‘{}’。
v-cloak指令：这个指令保持在元素上直到关联组件实例结束编译。
自定义指令directives：用于控制组件的自定义行为。

#### 属性绑定指令和事件绑定指令

vue3的属性绑定v-bind
将表达式的值绑定到页面元素的属性上面
插值表达式{{}}不能在 HTML 的标签上面中使用。想要响应式地给标签绑定一个属性，应该使用 v-bind 指令。

v-bind的语法：  v-bind:属性名称=”变量名”
可以简写成：    :属性名称=”变量名”



vue3的事件绑定v-on
v-on用于监听DOM事件，并在触发事件时执行相应的方法或逻辑。它的作用是将事件与Vue实例中的方法进行绑定，实现事件处理和响应。



语法：<div v-on:事件名称=”方法名称”></div>
            简写为 
@事件名称=”方法名称”

#### 条件渲染指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

​	与js的if判断类似
​	语法：<div  v-if="表达式"></div>
​	每一次显示和隐藏会创建或者销毁页面元素，支持在 <template> 元素上使用

v-else 可以为 v-if 添加一个“else 区块”，必须挨着一个v-if指令才能使用，不需要表达式

​	与js的else条件语句类似
​	语法：<div v-else></div> 
​	每一次显示和隐藏会创建或者销毁页面元素，支持在 <template> 元素上使用

v-else-if  提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用,使用于多个判断场景的判断

​	与javascript 的else if判断一样，可以存在多个

​	语法：<div v-else-if="表达式"></div>

**每一次显示和隐藏会创建或者销毁页面元素，支持在 <template> 元素上使用**



v-show
按条件显示一个元素的指令

v-show 会在 DOM 渲染中保留该元素；**v-show 仅切换了该元素上名为 display 的 CSS 属**性

语法：<div v-show="表达式"></div>

不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

#### 循环渲染指令

v-for
循环渲染数组中的元素，页面元素的循环生成

v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是循环项的别名：

语法：

```js
<h1 v-for="(item) in arr">type{{item}}</h1>
```



#### 

```js

```