一.创建Vue
1.Vue-CLI:创建Vue的脚手架工具
2.Create-vue：是Vue官方提供的脚手架之一,底层采用官方自主研发的vite,快捷，开发方便。
3.准备工作:系统中需要安装nodejs环境，在该环境中提供npm包管理器
4.创建Vue项目的命令:npm init vue@latest
5.切换至新建的项目目录下:cd vue-demol1
6.安装项目的基础依赖:npm install
7.需要注意的是：npm安装比较慢时，需要将npm镜像地切换至国内镜像，参考API
8.启动项目:npm run dev
9.默认访问界面
二.项目目录
node_models:包管理器
main.js:入口文件
index.html:挂载文件
app.vue:根组件
<script></script>
<template></template>
<style></style>
vite.config.js:项目配置文件，基于vite的配置
packege.json:项目的包文件，包含启动信息，依赖版本配置
三.组合式API
将项目中需要核心API进行封装,提供setup的语法糖
通常情况下:组合式API的优先级最高
setup选项的执行时机?
在组件加载时最先执行，优先级高于钩子函数beforeCreate()
setup写代码的特点是什么?
定义数据+函数
setup中this是否还指向组件实例?
this默认情况下指向undefined
3.2reactive和ref函数
实现双向数据绑定(响应式数据)的组合式api
3.2.1.reactive
接收对象类型数据参数,返回响应式对象
如何使用:
- 导入reactive
- 使用reactive函数
优点:语法清晰，使用简单
缺点:只支持对象类型的数据
3.2.2.ref
接受简单数据或者对象数据类型参数,返回响应式对象
如何使用:
- 导入ref
- 使用ref函数
优点:支持多种数据类型，页面元素中可以直接使用引用名
缺点:脚本中需要通过value属性控制数据
reactive和ref函数的共同作用是什么?
用函数调用的发式生成响应式数据，实现双向数据绑定
reactive和ref对比谁更好?
reactive不能处理简单类型数据
ref支持更多种数据类型,需要通过value属性操作数据
ref内部是依赖reactive
3.3computed
计算属性:实现的功能与Vue2的语法一致，在Vue3中只是改变语法结构
如何使用:
- 导入computed
- 执行函数完成计算过程
计算属性的缺点?
计算属性在异步请求中会出现数据不匹配的情况
计算属性的特点?
计算属性用于进行运算,避免直接修改值
3.4Watch
watch函数用于监听数据变化,可以侦听一个或多个的变化
函数参数:newVal新数据。oldVal旧数据。Immediate（立即执行），deep深度侦听
如何使用:
- 导入函数
- 调用执行函数
作为函数的第一个参数,ref对象需要通过value获取值吗?
不需要,watch会自动读取
Watch能侦听什么样的数据?
单个或多个数据
不开启deep,直接修改对象中的属性值会触发回调函数吗?
不会,默认浅层监听
不开启deep，需要侦听对象中的某一个属性，怎么执行回调函数?
将第一个参数传入函数，返回需要监听的属性
3.5.生命周期函数
在组件的初始化，挂载，元素加载前，更新，销毁等环节自动调用的回调函数
| 选项式API(Vue2) | 组合式API(Vue3) |
| beforeCreate/created | setup |
| beforeMount | onBeforeMount |
| mounted | onmounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
如何使用:
- 调用工具
- 使用函数
组合式API中的生命周期函数语法格式是什么?
可以像调用函数一样去使用。on+生命周期的名字
在组合式API中如何调用onCreated函数?
在组合式API中没有onCreated函数,已经集成到setup中了
beforeCreate与setup谁的优先级更高?
setup优先级更高
组合式API中,组件卸载完毕调用哪一个钩子函数?
onUnmounted
钩子（hook）函数是处理拦截在软件组件之间传递的函数调用、事件或消息的代码，本质上是用以处理系统消息的程序，通过系统调用将其挂入系统中。
四.调用setup
1.App.vue里面的<script></script>中
console.log('调用了setup')const message="今天天气不错";const logMessage=()=>{console.log(message)}在template中写
{{ message }}<button @click="logMessage">gotoLog</button>
2.使用reactive
在App.vue文件中的<script></script>中
import { reactive,ref } from 'vue'; const state=reactive({count:0})const setCount=()=>{state.count++}在template中写
<button @click="setCount">{{ state.count }}</button>
3.computed计算属性
const count=ref(0)const setCount=()=>{count.value++//ref会将值存放在value属性中,通过调用该属性获取数据}<button @click="setCount">{{ count}}</button><script setup>
//export default{// setup(){// console.log('调用了setup')// const message="今天天气不错";// const logMessage=()=>{// console.log(message)// }// return{// message,// logMessage// }// },//} // console.log('调用了setup')// const message="今天天气不错";// const logMessage=()=>{// console.log(message)// }//使用reactive()import { reactive,ref } from 'vue'; // const state=reactive({count:0})// const setCount=()=>{// state.count++// }//computed计算属性// const count=ref(0)// const setCount=()=>{// count.value++//ref会将值存放在value属性中,通过调用该属性获取数据// }// import { computed } from 'vue';// const list=ref([1,2,3,4,5,6,7,8,9])// const computedList=computed(()=>{// return list.value.filter(item=>item>2)// })// //3秒之后源list中的值增加// setTimeout(()=>{// list.value.push(10,11)// },3000)//watch侦听属性// import { watch } from 'vue';// const count=ref(0)// const setCount=()=>{// count.value++// }// const username=ref('wahaha')// const setUsername=()=>{// username.value='zhangsan'// }//侦听一个数// watch(count,(newVal,oldVal)=>{// console.log('count变化了',newVal,oldVal)// })//侦听多个数据//参数1:数组，侦听多个数据//参数2的参数1:新值//参数2的参数2:旧值// watch([count,username],([newVal,newVal1],[oldVal,oldVal1])=>{// console.log('count变化了',[newVal,newVal1],[oldVal,oldVal1])// })//立即侦听,页面渲染完毕，先执行一次侦听动作// import {ref,watch} from 'vue'// const count=ref(0)// const setCount=()=>{// count.value++// }// watch(count,()=>{// console.log('count值变化了')// },{immediate:true})//深度侦听// import {ref,watch} from 'vue'// const state=ref({count:0})// const setStateByCount=()=>{// state.value.count++// }// watch(state,()=>{// console.log('state中的count值变化了')// },{// deep:true// })//深度侦听对象数据中某一个属性(精确侦听)// import {ref,watch} from 'vue'// const info=ref({// username:'wahaha',// age:18// })// const setInfoByName=()=>{// info.value.username='张三'// }// const setInfoByAge=()=>{// info.value.age=28// }// watch(()=>// info.value.age// ,()=>{// console.log('age变化了')// })//生命周期函数// import { onMounted } from 'vue';// onMounted(()=>{// console.log('元素加载完毕执行了mounted函数1')// })// onMounted(()=>{// console.log('元素加载完毕执行了mounted函数2')// })
</script><template>this is div<div><!-- {{ message }}<button @click="logMessage">gotoLog</button> --><!-- <button @click="setCount">{{ state.count }}</button> --><!-- <button @click="setCount">{{ count}}</button> --><!-- 原值{{ list }}计算属性返回值{{ computedList }} --><!-- <button @click="setCount">{{ count}}</button> --><!-- <button @click="setUsername">{{ username}}</button> --><!-- <button @click="setCount">{{ count}}</button> --><!-- {{ state.count }}<button @click="setStateByCount">修改state中的count值</button> --><!-- {{ info.username }}{{ info.age }}<button @click="setInfoByName">修改姓名</button><button @click="setInfoByAge">修改年龄</button> --></div>
</template><style scoped></style>
