141.用vite创建vue3项目
142.项目目录
vue3中,直接导入组件就能用
不再要求唯一根元素
//createApp(App)是创建实例,.mount('#app')是在将实例往id为app的盒子上挂载 createApp(App).mount('#app') //挂载就是让实例接管一片区域
assets是存放图片或样式的目录
143.组合式API--setup选项
执行时机在beforeCreate之前
测试代码:
<script>
export default {
setup(){
console.log("setup函数")
},
beforeCreate() {
console.log('beforeCreate函数')
}
}
</script>
控制台输出:
可以看出setup函数的执行时机在beforeCreate之前
vue3基本不用this
2.setup函数里面定义的数据或者函数要想在界面中使用,需要return
setup(){
//数据
const message ='hello'
//函数
const logMessage =()=>{
console.log(message)
}
return{
message,
logMessage
}
},
只要return了就能直接在界面中使用
<template>
<div>{{message}}</div>
<button @click="logMessage"></button>
</template>
语法糖:这样就简化了代码,不再需要return,只要在<script setup>标签里面添加数据和函数就能直接在界面中使用
<script setup>
//数据
const message ='hello'
//函数
const logMessage =()=>{
console.log(message)
}
// console.log("setup函数")
</script>
3.reactive:接收一个对象类型的数据,返回一个响应式的对象
响应式的对象指的是当数据改变时,前端界面上显示的数据也随之改变
<script setup>
//reactive:接收一个对象类型的数据,返回一个响应式的对象
import {reactive} from "vue";
const user = reactive({
count:100
})
const setCount = ()=>{
user.count++;
}
</script>
<template>
<div>
<div>{{user.count}}</div>
<button @click="setCount">加一</button>
</div>
</template>
4.ref,接收简单类型或者复杂类型,返回一个响应式的对象
<script setup>
import {ref} from "vue";
const count = ref(0)
const setCount =()=>{
count.value++
}
//这里使用ref得到响应式对象后,要打印count的话要用.value才能得到count的值
console.log(count.value)
//但是在标签里面不用.value,直接count即可
//ref的原理就是将普通对象包装成复杂对象,并使用了reactive使其能响应式更新
</script>
<template>
<div>
<div>{{count}}</div>
<button @click="setCount">加一</button>
</div>
</template>
推荐以后都使用ref,因为他既能接受简单类型又能接受复杂类型
144.computed
<script setup>
//const 计算属性
import {computed,ref} from "vue";
//声明数据
const list = ref([1,2,3,4,5])
//基于list派生出一个计算属性,从list中过滤出大于2的所有数
const computedList = computed(()=>{
return list.value.filter(item=>item>2)
})
const add=()=>{
list.value.push(666);
}
</script>
<template>
<div>
<div>{{list}}</div>
<div>{{computedList}}</div>
<button @click="add">加666</button>
</div>
</template>
计算属性的优点是它们可以缓存计算结果,并且只在依赖数据发生变化时才重新计算。这有助于提高性能,并避免不必要的重复计算。
在使用computedList
时,你可以像使用普通属性一样访问它,在模板中进行绑定或在JavaScript代码中读取它。每当list
的值发生变化时,computedList
会自动更新并提供最新的计算结果。
146.watch侦听器
语法:
// 1.监听单个数据的变化 // watch(ref对象,newValue,oldValue)=>{ //})
//2.监听多个数据的变化 //watch([ref对象1,ref对象2],(newArr,oldArr)=>{ // })
//3.immediate 立即执行 // watch(count,(newValue,oldValue)=>{ // console.log(newValue,oldValue); // },{ //immediate:true, //}) //4.deep深度监视 //默认watch进行的是浅层监视 //const ref = ref(简单类型) 可以直接监视 //但是如果是复杂类型,就要使用deep属性进行升读监视 // watch(count,(newValue,oldValue)=>{ // console.log(newValue,oldValue); // },{ //immediate:true, //deep:true //})
5.不开启deep,直接监视复杂类型的某个属性,语法: watch(()=>user.value.age,(newValue,oldValue)=>{ console.log(newValue,oldValue) })
代码示例
<script setup>
import {ref,watch} from "vue";
const count = ref(0);
const name = ref("宁是");
const add=()=>{
count.value++;
}
const setName =()=>{
name.value="李四"
}
// 1.监听单个数据的变化
// watch(ref对象,newValue,oldValue)
// watch(count,(newValue,oldValue)=>{
// console.log(newValue,oldValue);
// })
//2.监听多个数据的变化
//watch([ref对象1,ref对象2],(newArr,oldArr)=>{
// })
watch([count,name],(newArr,oldArr)=>{
console.log(newArr,oldArr)
})
</script>
<template>
<div>数量:{{count}}</div>
<button @click="add">加一</button>
<div>姓名:{{name}}</div>
<button @click="setName">修改</button>
</template>
148.父子组件通信
父组件数据传到子组件:
1.在父组件中给子组件自定义属性并赋值
2.在子组件中使用defineProps来接受
3.此时就能使用父组件传过来的数据了,不过要注意:
//对于props得到的数据,在script里面要用props.car获取数据
//而模块中直接用car即可
子组件:
const props = defineProps({ car:String, money:Number })
console.log(props.car) console.log(props.money)
子组件改变父组件数据
1.父组件给子组件绑定事件,如果触发此事件就执行某方法
<SonCom //此处就是绑定了changeMoney方法,会执行changeFn方法 @changeMoney = "changeFn" car="保安吗" :money="money"> </SonCom>
2.在子组件中用defineEmits注册事件
const emit = defineEmits('changeMoney')
注册完事件后就能在方法里面使用emit通知父组件更新数据了
const buy=()=>{ //需要emit触发事件 emit('changeMoney',5) }
事件名是changeMoney,参数是5
父子通信完整代码演示
父组件:
<script setup>
import SonCom from '@/components/son-com.vue'
import {ref} from "vue";
const money = ref(100)
const addMoney =()=>{
money.value+=10;
}
const changeFn =(newMoney)=>{
money.value = money.value-newMoney
}
</script>
<template>
<div>
<h3>父组件</h3>
<!-- 给子组件以添加属性的方式传值-->
<SonCom
@changeMoney = "changeFn"
car="保安吗" :money="money"></SonCom>
<button @click="addMoney">挣钱</button>
</div>
</template>
子组件:
<script setup>
const props = defineProps({
car:String,
money:Number
})
//对于props得到的数据,在script里面要用props.car获取数据
//而组件中直接用car即可
console.log(props.car)
console.log(props.money)
//defineEmits里面的数组填写的是需要触发的事件,事件定义好了才能触发
const emit = defineEmits('changeMoney')
const buy=()=>{
//需要emit触发事件
emit('changeMoney',5)
}
</script>
<template>
<div> 我是子组件-{{car}}--{{money}}
<button @click="buy">花钱</button>
</div>
</template>
<style scoped>
</style>
149.模板引用和defineExpose
引用dom元素:
1.使用ref生成一个ref对象
const inp = ref(null);
2.在模板中给元素添加属性
<input ref="inp" type="text">
此时就绑定成功了
通过inp.value.focus()能让输入框聚焦
代码示例
父组件:
<script setup>
import TestCom from "@/components/test-com.vue";
import {ref} from "vue";
//1.调用ref函数,生成一个ref对象
//2.通过ref标识,进行绑定
//3.通过ref对象,value即可访问到绑定的元素
const inp = ref(null);
const clickFn =()=>{
inp.value.focus()
}
</script>
<template>
<div>
<input ref="inp" type="text">
<button @click="clickFn">点击使输入框聚焦</button>
</div>
<TestCom></TestCom>
</template>
子组件:
<script setup>
const count =999;
const sayHi=()=>{
console.log("打招呼")
}
defineExpose({
count,
sayHi
})
</script>
<template>
</template>
150.跨级传递数据,用procide传递,用inject接收
注意:孙子或者更低的组件得到高级组件传递的数据后,不能直接更改它的值
要想更改它的值,可以让高级组件将修改它的值的方法也传递过来
顶级组件:
<script setup>
import {inject} from "vue";
const themeColor = inject('theme-color')
const count = inject('count')
const setCount =inject('setCount')
const clickFn=()=>{
setCount(666);
}
</script>
<template>
<div>
<h3>我是底层组件-{{themeColor}}--{{count}}</h3>
<button @click="clickFn">修改Count</button>
</div>
</template>
中级组件:
<script setup>
import BottonCom from "@/components/botton-com.vue";
</script>
<template>
<div>
<h2>我是中间组件</h2>
<botton-com></botton-com>
</div>
</template>
底层组件:
<script setup>
import {inject} from "vue";
const themeColor = inject('theme-color')
const count = inject('count')
const setCount =inject('setCount')
const clickFn=()=>{
setCount(666);
}
</script>
<template>
<div>
<h3>我是底层组件-{{themeColor}}--{{count}}</h3>
<button @click="clickFn">修改Count</button>
</div>
</template>
151.defineOptions
152.defineModel
155.Pinia-最新的状态管理工具
使用Pinia
1.npm install pinia
2.在自己创建的js文件(如counter.js)里面导入Pinia
import {defineStore} from "pinia";
3.创建并导出一个状态管理函数(函数名以use开头),这个函数里面就是仓库内容,(可以声明数据,声明操作数据的方法,声明基于数据派生的计算属性)
记得一定要return
export const useCounterStore=defineStore('counter',()=>{
//声明数据
//第一个数据
const count = ref(0)
//声明操作数据的方法
const addCount=()=>count.value++
const subCount=()=>count.value--
//声明基于数据派生的计算属性
const getDoubleCount = computed(()=>count.value*2)
//第二个数据
const msg = ref('hello')
//只有return出去后,才能被页面使用
return{
count,
msg,
addCount,
subCount,
getDoubleCount
}
})
export导出后就能在其他组件中使用了
4.其他组件中使用:
import {useCounterStore}from'@/store/counter'
const counterStore = useCounterStore()
将这个状态管理函数导入即可,使用就直接用' . '来调用变量或者方法
如:
<template>
<h3>子组件1 {{counterStore.count}} - {{counterStore.getDoubleCount}}</h3>
<button @click="counterStore.addCount()">+</button>
</template>
counterStore.count 和counterStore.getDoubleCount都是从状态管理函数的返回值得到的
156.Pinia的异步方法
export const useChannelStore =defineStore('channel',()=>{
//声明数据
const channelList = ref([])
const getList = async ()=>{
const {data:{data}} =await axios.get('https://geek.itheima.net/v1_0/channels')
channelList.value = data.channels
}
return{
channelList,
getList
}
})
res默认会包装一层
158.Pinia-持久化
1.安装pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
2.在main.js里面导入
import persist from 'pinia-plugin-persistedstate'
app.use(createPinia().use(persist))
3.在store仓库中(就是一个用来保存数据的js文件)加一条属性
persist : true
import {defineStore} from "pinia";
import {computed, ref} from "vue";
import persist from "pinia-plugin-persistedstate";
//定义store
//defineStore(仓库的唯一标识(填名字就行),()=>{...})
export const useCounterStore=defineStore('counter',()=>{
//声明数据
//第一个数据
const count = ref(0)
//声明操作数据的方法
const addCount=()=>count.value++
const subCount=()=>count.value--
//声明基于数据派生的计算属性
const getDoubleCount = computed(()=>count.value*2)
//第二个数据
const msg = ref('hello')
//只有return出去后,才能被页面使用
return{
count,
msg,
addCount,
subCount,
getDoubleCount
}
},{
persist:true
})
这样,该counter里面的数据就会被自动存入本地存储
其中,这一句
export const useCounterStore=defineStore('counter',()=>{
里面的counter就是存本地存储的键名
拓展:
1.修改key
persist:{ key:'nsy-counter' }
2.更改storage
persist:{ key:'nsy-counter', storage:sessionStorage }
3.指定需要进行持久化的数据
(默认是stage里面的所有数据都持久化)
persist:{ key:'nsy-counter', storage:sessionStorage, paths:['count'] }