Vue3的学习

create-vue创建vue3项目

create-vue是官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供急速响应

• 前提环境条件：控制面板输入node -v，显示的是安装了16.0或更高版本的Node.js
• 创建一个Vue应用：npm init vue@latest

1. vite.config.js --- 项目的配置文件基于vite的配置
2. package.json --- 项目包文件核心依赖项是vue3
3. main.js --- 入口文件createApp函数创建应用实例
4. app.vue --- 根组件SFC单文件组件script-template
   1. 脚本script和模板template顺序调整
   2. 模板template不再要求唯一根元素
   3. 脚本script添加setup表示支持组合式API
5. index.html --- 单页入口，提供id为app的挂载点

创建项目和yun：

创建一个Vue应用：npm init vue@latest

接下来会需要输入项目名，此时输入的项目名是：vue_project

接下来输入执行下面的语句（之后如果要打开项目也是指令，终端要进入项目所在的目录）

cd vue_project

npm install

npm run dev（之后打开项目使用这条语句）

组合式API

setup

执行时，比beforeCreate还要早

setup函数中，获取不到this（this是underfined）

vue2的完整写法：

（定义数据+函数 然后以对象方式return）

<script>export default {setup(){console.log('setup函数')const message='hello'const logMessage=()=>{console.log(message)}return{message,logMessage}},beforeCreate() {console.log('beforeCreate函数')}}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>

vue3的语法糖可以简化return：

（使用组合式API）

<script setup>
//数据
const message='this is a message'
const logMessage=()=>{console.log(message)
}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>

reactive()和ref()

reactive()

接收一个对象类型的数据，返回一个响应式的对象

<script setup>import {reactive} from "vue";const state=reactive({count:100})const setCount=()=>{state.count++}
</script><template><div>{{state.count}}</div><button @click="setCount">++</button>
</template>

ref()

接收简单类型或复杂类型，返回一个响应式对象

本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型

底层：保存复杂类型之后，再借助reactive实现的响应式

注意：

• 脚本中访问数据，需要通过.value
• 在template中，.value不需要加（帮我们扒了一层）

<script setup>import {ref} from 'vue'const count =ref(简单类型或者复杂类型数据)
</script>

<script setup>// import {reactive} from "vue";// const state=reactive({//   count:100// })// const setCount=()=>{//   state.count++// }import {ref} from "vue";const count=ref(0)const setCount=()=>[count.value++]
</script><template><div>{{count}}</div><button @click="setCount">++</button>
</template>

computed

步骤：

• 导入computed函数
• 执行函数在
• 回调参数中return基于响应式数据做计算的值，用变量接收

只读写法：

可写方法：

watch函数

监听一个或多个数据的变化，数据变化时执行回调函数

监听单个数据

• 导入watch函数
• 执行watch监听传入要监听的咸阳市数据（ref对象）和回调函数

监听多个数据

不管哪个数据变化都需要监听

1.其中第三个参数可以写immediate:true，可以立刻执行（例如在打开页面时）

2.deep深度监视，默认watch进行的是浅层监视

• const ref1=ref(简单类型)可以直接监视
• const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化

3.对于对象中的单个属性，进行监视

组合式API下的数据传递

父传子

由于写了setup，所以无法直接配置props，此处借助于“编译器宏”函数defineProps接收传递的数据

defineProps原理

就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

子传父

• 父组件中给子组件标签通过@绑定事件
• 通过defineEmits编译器宏生成emit方法
• 子组件内部通过emit方法触发事件

模板引用

概念：通过ref标识获取真实的都没对象或者组件实例对象

1. 通过ref函数，生成一个ref对象 
2. 通过ref标识，进行绑定
3. 通过ref对象，value即可访问到绑定的元素

defineFxpose()

在默认情况下<script setup>语法糖组件内部的属性和方法是不开放给父组件访问的，可以通过defineFxpose编译宏指定哪些属性和方法可以访问

defineExpose({testMessage
})

project&inject

跨层组件通过provide函数提供数据

底层组件通过inject函数获取数据

新特性defineOptions

1.在vue2中用的<script>标签，其中setup，props，emits等是平级属性

2.在vue3中是用的<script setup>标签，setup属性已经没有了，无法添加与其平行的属性，所以引入了defineProps和defineFmits这两个宏。

如果要定义组件的name或其他自定义属性，还是得回到最原始的用法——再添加一个普通的<script>标签

所以引用了defineOptions宏，只要是用来定义Options API选项，可以定义defineOptions任意选项，props，emit，expose，slots除外（这些可以使用defineXXX来实现）

defindModel

要使用，在vite.config.js中加入配置，接着要重启项目

Pinia

Pinia是Vue的最新的状态管理工具，是Vuex的替代品

可以在创建Vue项目时Pinia那一栏选择Yes，也可以在该项目的终端输入指令：yarn add pinia 或者使用 npm install pinia