Vue的项目创建以及项目目录与组合式API

一.创建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

接收对象类型数据参数,返回响应式对象

如何使用:

1. 导入reactive
2. 使用reactive函数

优点:语法清晰，使用简单

缺点:只支持对象类型的数据

3.2.2.ref

接受简单数据或者对象数据类型参数,返回响应式对象

如何使用:

1. 导入ref
2. 使用ref函数

优点:支持多种数据类型，页面元素中可以直接使用引用名

缺点:脚本中需要通过value属性控制数据

reactive和ref函数的共同作用是什么?

用函数调用的发式生成响应式数据，实现双向数据绑定

reactive和ref对比谁更好?

reactive不能处理简单类型数据

ref支持更多种数据类型,需要通过value属性操作数据

ref内部是依赖reactive

3.3computed

计算属性:实现的功能与Vue2的语法一致，在Vue3中只是改变语法结构

如何使用:

1. 导入computed
2. 执行函数完成计算过程

计算属性的缺点?

计算属性在异步请求中会出现数据不匹配的情况

计算属性的特点?

计算属性用于进行运算,避免直接修改值

3.4Watch

watch函数用于监听数据变化,可以侦听一个或多个的变化

函数参数:newVal新数据。oldVal旧数据。Immediate（立即执行），deep深度侦听

如何使用:

1. 导入函数
2. 调用执行函数

作为函数的第一个参数,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

如何使用:

1. 调用工具
2. 使用函数

组合式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>