创建vue3项目

创建项目create-vue

create-vue是Vue官方的脚手架工具，底层切换到了vite（下一代前端工具链），为开发提供急速响应。
vue-cli底层基于webpack。

前提环境条件：node.js是16.0以上版本
创建一个vue应用：npm init vue@latest

在一个文件夹下打开终端，运行npm init vue@latest新建项目，设置项目环境，生产文件夹，终端进入文件夹cd ---，用代码打开文件夹code ../此时文件夹在vscode打开，打开终端运行npm install安装依赖，运行项目npm run dev

 熟悉目录文件

main.js为入口文件

 

 组合式API

入口setup（）

复杂写法：

<scrpt>
export default {
setup(){
//数据
const meg = 'this is message'
//函数
const logMessage = () => {
console.log(message)
}
return{
message,
logMessage
}
}
}
</scrpt>

语法糖写法

<scrpt setup>
const meg = 'this is message'
//函数
const logMessage = () => {
console.log(message)
}
</scrpt>

 reactive()

作用：接受对象类型数据额参数传入并返回一个响应式的对象

核心步骤：

<script setup>
//导入
import {reactive} from 'vue'
//执行函数 传入参数 变量接收
const state = reactive(对象类型数据)
//例如：
const state = reactive({
count:0
})

const setCount = () => {
state.count++
}
</script>
<template>
    <div>
        <button @click="setCount">{{ state.count }}</button>
    </div>
</template>

ref() 

作用：接受简单类型或者对象类型的数据传入并返回一个响应式的对象

<script setup>
//导入
import {ref} from 'vue'
//执行函数 传入参数 变量接收
const state =ref(简单类型+对象类型)
//例如：
const count = ref(0)

const setCount = () => {
//脚本区修改ref产生的响应式对象数据 必须通过.value属性
count.value++
}
</script>
<template>
    <div>
        <button @click="setCount">{{ count }}</button>
    </div>
</template>

ref函数的内部实现需要依赖于reactive函数 。

computed计算属性函数

计算属性基本思想与Vue2完全相同，组合式API下的计算属性只是修改了语法。

<script setup>
//导入
import {ref,computed} from 'vue'
//执行函数 变量接收 在回调参数中return计算值
const computedState = computed(() => {
    return 基于响应式数据做计算之后的值
})
//例如：
const list = ref([1,2,3,4,5,6,7,8])

const computedList = computed(() => {
    return list.value.filter(item => item>2)
})
</script>
<template>
    <div>
       初始数组-{{list}}
    </div>
    <div>
        计算属性数组-{{computedList}}
    </div>
</template>

watch() 

作用：侦听一个或多个数据的变化，数据变化时执行回调函数。

两个额外参数：1.immediate（立即执行）2.deep（深度侦听）

<script setup>
//导入
import {ref,watch} from 'vue'
const count = ref(0)
const name = ref('ll')
//调用watch 侦听变化 侦听单个数据：
watch(count,(newValue,oldValue) => {
console.log(`count发生了变化，老值为${oldValue}，新值为${
newValue}`)
})
//调用watch 侦听变化 侦听多个数据：
watch([count,name],([newCount,newName],[oldCount,oldName]) => {
console.log('count发生了变化'，[newCount,newName],[oldCount,oldName])
})
//例如：
const count = ref(0)
const setCout = () =>{
const.value++
}
//ref对象不需要加.value
watch(count,(newValue,oldValue) => {
console.log(`count发生了变化，老值为${oldValue}，新值为${
newValue}`)
})
</script>
<template>
    <div>
      <button @click="setCount">{{count}}</button>
    </div>
</template>

immediate

说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调。 

<script setup>
//导入
import {ref,watch} from 'vue'
const count = ref(0)

const setCout = () =>{
const.value++
}
//开始的时候先执行一次
watch(count,() => {
console.log(‘count发生了变化’)
},{
immediate:true
})
</script>
<template>
    <div>
      <button @click="setCount">{{count}}</button>
    </div>
</template>

deep

默认机制：通过watch监听的ref对象默认是浅层侦听 的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项。

<script setup>
//导入
import {ref,watch} from 'vue'
const state = ref({count:0})
const state1 = ref({name:'cp',age:18})

const setCount = () =>{
state.value.count++;
}

const changeName = () =>{
state1.value.name = 'change-cp';
}
const changeAge = () =>{
state1.value.age = 20;
}

watch(state,() => {
console.log(‘count发生了变化’)
},{
deep:true
})

//只监听age，只需要在第一个参数改成函数的写法，返回要监听的具体属性
watch(
() => state1.value.age,
() => {console.log(‘age发生了变化’)
})
</script>
<template>
    <div>
      <button @click="setCount">{{state.count}}</button>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年纪</button>
    </div>
</template>

deep 性能损耗，尽量不开启deep

生命周期函数

 

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

执行多次：按代码顺序依次执行。

父子通信

父传子：

父组件：

<script setup>
import {ref} from 'vue'
import sonCon from './son-con.vue'
const count = ref(100)
</script>
<template>
<!--绑定属性message-->
<sonCon :count="count" massage='this is a message'/>
</template>

子组件： 

<script setup>
//通过defineProps“编译器宏”接受子组件传递的数据
const props = defineProps({
massage:String,
count:Number
})
</script>
<template>
{{massage}}-{{count}}
</template>

子传父： 

父组件：

<script setup>
import {ref} from 'vue'
import sonCon from './son-con.vue'
const getMessage = (msg) => {
console.log(msg)
}
</script>
<template>
<!--绑定自定义事件-->
<sonCon @get-message="getMessage"'/>
</template>

 子组件：

<script setup>
//通过defineEmits“编译器宏”生产emit方法
const emit = defineEmits([‘get-message’])
const sendMsg = () => {
//触发自定义事件，并传递参数
emit('get-message','this is a son msg')
}
</script>
<template>
<button @click="sendMsg"></button>
</template>

模板引用

通过ref标识获取真实的dom对象或者组件实例对象

如何使用（以获取dom为例 组件同理）：

1.调用ref函数生成一个ref对象

2.通过ref标识绑定ref对象到标签

<script setup>
import {ref} from 'vue'
//调用ref函数得到ref对象
const h1Ref = ref(null)
//组件挂载完毕之后才能获取
onMounted(()=>{
console.log(h1Ref.value)
})
</script>
<template>
<!--通过ref标识绑定ref对象-->
<h1 ref="h1Ref">我是dom标签h1</h1>
</template>

 provide和inject

跨层传递数据

在顶层组件通过provide函数提供数据 provide('key',顶层组件中的数据)，如果要传递响应式数据，则provide('app-key',ref对象)

底层组件通过inject函数获取数据 const message = inject('key')

跨层传递语法

顶层组件

const setCount = () =>{
count.value++
}
provide('setCount-key',setCount)

底层组件 const setCount = inject('setCount-key')

Pinia 

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

优势：

• 提供更加简单的API（去掉了mutation）
• 提供符合组合式风格的API（和vue3新语法统一）
• 去掉了modules的概念，每一个store都是一个独立的模块
• 搭配TypeScript一起使用提供可靠的类型推断

添加到项目

安装：简介 | Pinia (vuejs.org)

npm install pinia

main.js

1.导入 createPinia

import { createPinia } from 'pinia'

 2.执行方法得到实例

const pinia = createPinia()

3.把pinia实例加入到app应用中

createAPP(APP).use(pinia).mount('#app')

使用pinia存贮数据

// 管理用户数据相关

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'

export const useUserStore = defineStore('user', () => {
  // 1. 定义管理用户数据的state
  const userInfo = ref({})
  // 2. 定义获取接口数据的action函数
  const getUserInfo = async ({ account, password }) => {
    const res = await loginAPI({ account, password })
    userInfo.value = res.result
  }
  //退出时清除用户信息
  const clearUserInfo = () => {
    userInfo.value = {}
  }
  // 3. 以对象的格式把state和action return
  return {
    userInfo,
    getUserInfo,
    clearUserInfo
  }
}, {
  persist: true,
})

在需要的页面使用

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

//举例：直接调用userStore的数据或者方法
userStore.getUserInfo({account,password})