V3-组合式API
setup/reactive/ref/computed/watch/生命周期/父子通信/模板引用/provide和inject数据传输
vue3的优势**
组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。
使用create-vue搭建Vue3项目
认识create-vue
create-vue是一个脚手架工具，用来快速创建v3的项目。（Vuecli用来创建v2的项目）
https://cli.vuejs.org/zh/guide/
create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应
使用create-vue创建项目
前置条件 - 已安装16.0或更高版本的Node.js
执行如下命令，这一指令将会安装并执行 create-vue
npm init vue@latest
效果
V3的项目目录和关键文件
package.json
vue的版本是3 + 依赖vite做底层驱动
vite.config.js
配置文件。类似vue2的vue.config.js。
业务文件夹src/main.js
new Vue() 创建vue的实例对象
createApp也是用来创建vue的实例对象
createApp(App).mount(‘#app’)
mount(‘#app’) 把vue的实例对象挂载在index.html的#app元素上
App.vue
-
script -> template -> style
-
script 上的setup是一个特殊的开关：
-
- 打开之后，就可以使用组合式api
- 不打开它，就可以继续兼容v2的写法
template中可以不需要唯一的根元素的区别
组合式API - setup选项
1. setup选项的写法和执行时机
格式
类似于生命周期钩子的写法。
<script>
export default {
setup(){
console.log('setup')
},
beforeCreate(){
console.log('beforeCreate')
}
}
</script>
执行时机
在beforeCreate钩子之前执行setup函数
2. setup中写代码的特点
在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用
<script>
export default {
setup(){
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
// 必须return才可以
return {
message,
logMessage
}
}
}
</script>
注意：vue3不再推荐使用this.data去定义和修改数据，在setup中，console.log(this)会得到undefined。
问题：
如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。2. 写一个长长return？不需要，在v3中，它提供了setup语法糖
3. script setup 语法糖
script标签添加 setup标记，不需要再写return语句，默认会添加return语句
更改代码如下：
<script setup>
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
</script>
拓展-语法糖
play.vuejs.org
组合式API - reactive和ref函数
1. reactive
作用
接收对象类型数据的参数传入并返回一个响应式的对象
步骤
- 从vue包中导入reactive函数
- 在
示例代码 (点击按钮，让数值+1的效果)
<script setup>
import { reactive } from 'vue' // 导入
const state = reactive({ // 执行函数 传入参数 变量接收
count:0
})
const add = ()=>{
state.count++ // 修改数据更新视图
}
</script>
<template>
<button @click="add">{{state.count}}</button>
</template>
注意：
- 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新
- reactive必须要传入一个类型为对象的数据，不支持基本数据类型。 vue提供了更加适用的ref函数。
2. ref
作用
接收简单类型或对象类型数据的参数传入并返回一个响应式的对象
步骤
-
从vue包中导入ref函数
-
在
示例代码
<script setup>
import { ref } from 'vue' // 导入
const setCount = ()=>{ // 执行函数 传入参数 变量接收
console.log(count)
// 修改数据更新视图必须加上.value
count.value++
}
</script>
<template>
<button @click="setCount">{{count}}</button>
</template>
3. reactive 对比 ref
-
相同点：都是用来生成响应式数据
-
不同点
-
- reactive不能处理简单类型的数据
- ref参数类型支持更好，但是必须通过.value做访问修改
- ref函数内部的实现依赖于reactive函数
https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js
function ref -> createRef -> new RefImpl -> constructor -> toReactive -> reactive
- 在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担
组合式API - computed(计算)
计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法
实现步骤
- 导入computed函数
- 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收
格式
<script setup>
// 导入
import { computed } from 'vue'
// 执行函数 变量接收 在回调参数中return计算值
const computedState = computed(() => {
return 基于响应式数据做计算之后的值
})
</script>
<script setup>
//引入
import { computed, ref } from "vue";
//定义一个响应式数据
const arr = ref([1,2,3,4,5,6,7,8])
const add10 = ()=>{
arr.value.push(10)
}
const newArr = computed(()=>{
return arr.value.filter(item=>item>2)
})
</script>
<template>
<div>
原数据:{{arr}}
<button @click="add10">加入10</button>
</div>
<div>
新数据:{{newArr}}
</div>
</template>
组合式API - watch(监听)
作用
侦听一个或者多个数据的变化，数据变化时执行回调函数。
俩个额外参数 immediate控制立刻执行，deep开启深度侦听
基础用法侦听单个数据
步骤：
- 导入watch函数
- 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
示例
<<template>
<button @click="add">
{{ count }}
</button>
</template>
<script setup>
// 1. 导入watch
import {ref, watch } from 'vue'
const count = ref(0)
const add = () => count.value++
// 2. 调用watch 侦听变化
// count: ref参数不需要加.value
++ watch(count, (newVal, oldVal) => {
++ console.log('旧值为',oldVal,'新值为',newVal )
})
</script>
侦听多个数据
侦听多个数据，第一个参数可以改写成数组的写法
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')
// 2. 调用watch 侦听变化
++ watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
++ console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
})
</script>
立即监听 immediate
在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
},
++ { immediate: true }
)
</script>
组合式API-watch监听-深度侦听-精准侦听
浅层侦听
通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state
watch(state, ()=>{
console.log('数据变化了')
})
const changeStateByCount = ()=>{
// 直接修改不会引发回调执行
state.value.count++
}
</script>
开启deep之后
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state 并开启deep
watch(state, ()=>{
console.log('数据变化了')
},{deep:true})
const changeStateByCount = ()=>{
// 此时修改可以触发回调
state.value.count++
}
</script>
开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
// 这里有两个属性
const state = ref({ count: 0, age: 18 })
// 2. 监听对象state 并开启deep
watch(state, ()=>{
console.log('数据变化了')
},{deep:true})
const changeStateByCount = ()=>{
// 此时修改可以触发回调
state.value.count++
}
</script>
精确监听
watch第一个参数变为回调函数,return处理的是对象.value.属性名
++ watch(()=>state.value.name, (newVal, oldVal) => {
console.log('name变化了')
})
组合式API - 生命周期函数
生命周期函数，从组件的创建到销毁阶段，在特定时间被自动调用的函数。
选项式对比组合式
生命周期函数基本使用
- 导入生命周期函数
- 执行生命周期函数，传入回调
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
</script>
执行多次
生命周期函数执行多次的时候，会按照顺序依次执行
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
onMounted(()=>{
// 自定义逻辑
})
</script>
组合式API - 父子通信
父传子
- 父组件中给子组件绑定属性
- 子组件内部通过props选项接收数据
父传子时.子组件js代码中使用父组件传入属性,例如:const props = defineProps({num: Number});
props.num
子传父
基本思路
-
父组件中给子组件标签通过@绑定事件
-
子组件内部通过 emit 方法触发事件
-
- const emit = defineEmits([‘事件名1’, ‘事件名2’])
- emit(‘事件名1’, 值1)
父组件
<script setup>
import { ref } from 'vue';
import MyCom1 from './MyCom1.vue'
const boolean = ref(true)
const changeBoolean = () => {
boolean.value = !boolean.value
}
const onMessage = (msg)=>{
boolean.value = msg
console.log('收到子组件传入的事件',msg);
}
</script>
<template>
<div>父组件</div>
<button @click="changeBoolean">父组件boolean</button>
<MyCom1 :boolean="boolean" @changeMessage="onMessage"></MyCom1>
</template>
子组件
<script setup>
const emit = defineEmits(['changeMessage'])
const props = defineProps({
boolean: Boolean
})
const change = ()=>{
emit('changeMessage',!props.boolean)
}
</script>
<template>
<div>子组件</div>
{{boolean}}
<button @click="change">子组件boolean</button>
</template>
组合式API - 模版引用
定义
通过ref标识获取真实的dom对象或者组件实例对象
之前使用过的应用场景
基本使用-普通元素
实现步骤:
- 调用ref函数生成一个ref对象
- 通过ref标识绑定ref对象到标签
- 组件挂载完成之后，可以拿到值
<script setup>
import { onMounted, ref } from 'vue'
// 1. 调用ref函数得到ref对象
const refDiv = ref()
// 3. 组件挂载完成之后，可以拿到值
onMounted(() => {
console.log(refDiv.value)
})
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<div ref="refDiv">标题</div>
</template>
注意，只有当组件挂载完成之后，才能获取到值
进阶使用-组件元素
App.vue
<script setup>
import MyCom2 from './my-com2.vue'
import { onMounted, ref } from 'vue'
// 1. 调用ref函数得到ref对象
const refCom2 = ref(null)
// 3. 组件挂载完成之后，可以拿到值
onMounted(() => {
console.log('com2', refCom2.value)
})
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<MyCom2 ref="refCom2" />
</template>
my-com2.vue
<script setup>
import { ref } from 'vue'
const num = ref(100)
</script>
<template>
<div>com2内部的数据{{ num }}</div>
</template>
注意：默认情况下，我们不能通过对组件的引用拿到组件内部的数据
defineExpose(父组件调用子组件)
默认情况下在 语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问
说明：指定num属性可以被访问到
组合式API - provide和inject
作用和场景
顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
跨层传递普通数据
实现步骤
- 顶层组件通过
provide函数提供数据 - 底层组件通过
inject函数提供数据
跨层传递响应式数据
在调用provide函数时，第二个参数设置为ref对象
跨层传递方法
顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据
vue3生态-router(路由)-pinia(vueX)
vue-router4
官网：https://router.vuejs.org/
安装vue-router
两种情况：
1全新项目
直接在交互工具中选择vue3的版本，再选择vue-router时，就会自动安装并配置vue-router 4
2老项目中额外添加vue-router
手动安装,不加版本号，默认安装最新的。npm i vue-router
使用
基本使用流程与vue-router3一致：
1配置router。导入组件，配置路由规则
2在main.js中使用router
3在App.vue中配置路由出口。
基本目录结构:
src
├── router
│ └── index.js
├── pages
│ ├── Home.vue
│ └── Login.vue
└── main.js
配置router
创建文件router/index.js，内容如下：
import {
createRouter,
createWebHashHistory,
createWebHistory,
} from 'vue-router'
// 1. 创建路由
const router = createRouter({
// 创建history模式的路由
// history: createWebHistory(),
// 创建hash模式的路由
history: createWebHashHistory(),
// 配置路由规则
routes: [
{ path: '/home', component: () => import('../pages/Home.vue') },
{ path: '/login', component: () => import('../pages/Login.vue') },
],
})
export default router
在main.js中导入使用
在main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
配置路由出口
App.vue中使用
<template>
<router-link to="/home">首页</router-link>
<router-link to="/login">登陆</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</template>
组件中使用route与router
在v3中，组件中无法访问this，所以也无法像之前在vue2中采用的this. r o u t e 与 t h i s . route与this. route与this.router来操作路由。
对应的调整为：
vue2 ----> vue3
this.$route ---> const route = useRoute()
this.$router ---> const router = useRouter()
useRoute获取route信息
通过useRoute()可以获取route信息
<script>
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.path)
console.log(route.fullPath)
},
}
</script>
useRouter获取router信息
通过useRouter()可以获取router信息
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const login = () => {
router.push('/home')
}
</script>
Pinia新一代状态管理工具
官方网站：https://pinia.vuejs.org/
中文文档: https://pinia.web3doc.top/introduction.html
vuex的内容：
-
state
-
mutations
-
actions
-
getters
-
modules
-
plugins
pinia的内容
- state
- actions
- getters
- modules
- plugins
pinia基本使用
实现步骤
- 安装
npm i pinia - 在main.js中use
- 定义模块
- 使用模块
在main.js中引入pinia
import { createApp } from 'vue'
import App from './App.vue'
++ import { createPinia } from 'pinia'
++ const pinia = createPinia()
++ createApp(App).use(pinia).mount('#app')
定义模块
新建文件src/store/counter.js
import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一标识
// 参数2：回调函数，类似于setup()的功能，可以提供state actions getters
import { ref } from 'vue'
const useCounterStore = defineStore('counter', () => {
// 数据（state）
const count = ref(0)
// 修改数据的方法 (action)
const addCount = () => {
count.value++
}
// 以对象形式返回
return {count, addCount}
})
export default useCounterStore
使用模块
步骤：
- 在组件中引入模块
- 调用store函数得到store
- 使用store
<script setup>
// 1. 在组件中引入模块
import useCounterStore from '@/src/store/counter'
// 2. 调用store函数得到store
const counter = useCounterStore()
console.log(counter)
</script>
<template>
// 使用store
count: {{ counter.count }}
<button @click="counter.addCount">点击增加</button>
</template>
pinia中getters的使用
pinia中的getters直接使用computed函数进行模拟，再把geterrs return出去.
定义getters(计算属性)
import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：回调函数，类似于setup()的功能，可以提供state actions getters
import { ref, computed } from 'vue'
const useCounterStore = defineStore('counter', () => {
// 数据（state）
const count = ref(0)
// 修改数据的方法 (action)
const addCount = () => {
count.value++
}
// 计算属性
++ const doubleCount = computed(() => count.value * 2)
// 以对象形式返回
return {count, addCount, doubleCount}
})
export default useCounterStore
在组件中使用
<script setup>
import useCounterStore from '@/stores/counter.js'
const counterStore = useCounterStore()
console.log(counterStore)
</script>
<template>
<div>
{{ counterStore.doubleCount }}
<button @click="counterStore.addCount">+1</button>
count: {{ counterStore.count }}
</div>
</template>
pinia中异步actions的使用
import { defineStore } from 'pinia'
import { ref } from 'vue'
++ import axios from 'axios'
export default defineStore('newList', () => {
const list = ref([])
const getList = async () => {
++ const res = await axios.get('http://api-toutiao- web.itheima.net/mp/v1_0/channels')
++ list.value = res.data.data.channels
}
++ return { list, getList }
})
在组件中使用
<script setup>
import useCounterStore from '@/stores/counter.js'
const counterStore = useCounterStore()
import { onMounted } from 'vue';
const newsListStore = useNewsListStore()
++ onMounted(() => {
++ newsListStore.getList()
++ })
</script>
<template>
<div>
{{ newsListStore.list }}
</div>
</template>
用storeToRefs来优化pinia的使用
使用storeToRefs可以保证解构出来的数据（state + getter）也是响应式的。注意： 不要对action进行结构
storeToRefs的格式
先引入,后使用
import {storeToRefs } from 'pinia'
const { state属性名1， state属性名2 } = storeToRefs(模块名)
持久化
有现成的第三方插件可以使用
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/why.html
- 安装
npm i pinia-plugin-persistedstate
2.配置
main.js
import { createPinia } from 'pinia'
// 引入持久化插件
++ import piniaPluginPersist from 'pinia-plugin-persistedstate'
++ const store = createPinia()
// 使用该插件
++ store.use(piniaPluginPersist)
app.use(store)
3.在某个store中使用
const useCounterStore = defineStore('counter', () => {
// 以对象形式返回
return {count, addCount, doubleCount}
},{
++ persist: {
++ key: 'my-custom-key' // 持久化使用的属性名,默认是 store.$id
++ storage: sessionStorage, // 默认是localStorage
++ paths: ['list', 'type'], // 要持久化的属性
}
})
用storeToRefs来优化pinia的使用
使用storeToRefs可以保证解构出来的数据（state + getter）也是响应式的。注意： 不要对action进行结构
storeToRefs的格式
先引入,后使用
import {storeToRefs } from 'pinia'
const { state属性名1， state属性名2 } = storeToRefs(模块名)
持久化
有现成的第三方插件可以使用
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/why.html
- 安装
npm i pinia-plugin-persistedstate
2.配置
main.js
import { createPinia } from 'pinia'
// 引入持久化插件
++ import piniaPluginPersist from 'pinia-plugin-persistedstate'
++ const store = createPinia()
// 使用该插件
++ store.use(piniaPluginPersist)
app.use(store)
3.在某个store中使用
const useCounterStore = defineStore('counter', () => {
// 以对象形式返回
return {count, addCount, doubleCount}
},{
++ persist: {
++ key: 'my-custom-key' // 持久化使用的属性名,默认是 store.$id
++ storage: sessionStorage, // 默认是localStorage
++ paths: ['list', 'type'], // 要持久化的属性
}
})
