Vue3-Composition-API-学习笔记
01.Setup函数的体验
App.vue
<template>
<div>
<h2>当前计数：{{ counter }}h2>
<button @click="increment">+1button>
<button @click="decrement">-1button>
div>
template>
<script>
import useCounter from './hooks/useCounter'
export default {
setup(){
// const { counter,increment,decrement } = useCounter()
// return { counter,increment,decrement }
return {
...useCounter()
}
}
}
script>
<style scoped>
style>
useCounter.js
import { ref } from 'vue'
export default function useCounter(){
const counter = ref(100)
const increment = () => {
counter.value++
console.log(counter.value)
}
const decrement = () =>{
counter.value--
}
return {
counter,
increment,
decrement
}
}
02.Setup定义数据
App.vue
<template>
<div>
<form action="">
账号：<input type="text" v-model="account.username">
密码：<input type="password" v-model="account.password">
form>
div>
template>
<script>
import { reactive,ref } from 'vue';
export default{
setup(){
// 定义相应式数据：reactive
const info = ref({})
console.log(info.value)
// 1. reactive的应用场景
// 1.1 条件1：reactive的应用场景
// 1.2 条件2：多个数据之间是有关系/联系的（聚合的数据，组织在一起会有特定的数作用）
const account = reactive({
username:"coderwhy",
password:"123456"
})
return {
account
}
}
}
script>
<style scoped>
style>
App1.vue
<template>
<div>
<h2>message:{{ message }}h2>
<button @click="changeMessage">修改messagebutton>
<hr>
<h2>账号：{{ account.username }}h2>
<h2>密码：{{ account.password }}h2>
<button @click="changeAccount">修改账号button>
<hr>
<h2>当前计数：{{ counter }}h2>
<button @click="increment">+1button>
<hr>
<h2>当前计数：{{ info.counter }}h2>
<button @click="info.counter.value++">+1button>
div>
template>
<script>
import { reactive,ref } from 'vue';
export default {
setup(){
// 1.定义普通的数据
// 缺点：数据不是响应式的
let message = "Hello World"
// 2.定义响应式数据
// 2.1 reactive函数：定义复杂类型数据
const account = reactive({
username:"coderwhy",
password:"123456"
})
function changeAccount(){
account.username = "kobe"
}
function changeMessage() {
message = "你好啊，李焕英"
console.log(message)
}
// 2.2 counter定义响应式数据
// ref函数：定义简单类型的数据
const counter = ref(0)
// const counter = reactive({
// counter:0
// })
function increment(){
counter.value++
}
// 3.ref是浅层解包
const info = {
counter
}
return {
message,
changeAccount,
changeMessage,
counter,
account,
increment,
info
}
}
}
script>
<style scoped>
style>
03.setup其他函数
App.vue
<template>
<div>
<h2>Apph2>
<ShowInfo @change_name="change_name" :reinfo="reinfo" @change_rename="change_rename" :info="info">ShowInfo>
div>
template>
<script>
import { reactive,readonly } from 'vue';
import ShowInfo from './ShowInfo.vue';
export default {
components:{
ShowInfo
},
setup(){
const info = reactive({
name:'kebo',
age:18,
sex:'男'
})
const reinfo = readonly(info)
function change_name(eve){
info.name = eve
}
function change_rename(reeve){
info.name = reeve
}
return {
info,
change_name,
reinfo,
change_rename
}
},
}
script>
<style scoped>
style>
ShowInfo.vue
<template>
<div>
<h2>info: {{ info }}h2>
<button @click="change_name">改变info.namebutton>
<hr>
<h2>reinfo:{{ reinfo }}h2>
<button @click="change_rename">修改reinfo.namebutton>
div>
template>
<script>
export default {
props:{
info:{
type:Object,
default:() => ({})
},
reinfo:{
type:Object,
default:() => ({})
},
},
emits:['change_name','change_rename'],
setup(props,context){
function change_name(){
context.emit("change_name",'why')
}
function change_rename(){
context.emit("change_rename",'tom')
}
return {
change_name,
change_rename
}
},
methods:{
}
}
script>
<style scoped>
style>
04.Setup中toRefs
App.vue
<template>
<div>
<div>info:{{ info.name }} -- {{ info.age }}div>
<div>name:{{ name }}---age:{{ age }}div>
<button @click="age++">age+1button>
<hr>
<div>height:{{ height }}div>
<button @click="height++">height++button>
div>
template>
<script>
import { reactive,toRefs,toRef } from "vue";
export default {
setup(){
const info = reactive({
name:'tom',
age:18,
height:188
})
// reactive被结构将会编程普通的数据，失去响应式
const { name,age } = toRefs(info)
const height = toRef(info,"height")
return {
info,
name,
age,
height
}
}
}
script>
<style scoped>
style>
05.Setup中computed
App.vue
<template>
<div>
<div>fullname:{{ fullname }}div>
<button @click="setFullname">设置fullnamebutton>
<div>scoreLevel:{{ scoreLevel }}div>
div>
template>
<script>
import { ref,reactive,computed } from 'vue'
export default {
setup(){
// 1.定义数据
const names = reactive({
firstName:"kobe",
lastName:"bryant"
})
// const fullname = computed(()=>{
// return names.firstName +" "+ names.lastName
// })
const fullname = computed({
set:function(newValue){
const tempNames = newValue.split(" ")
names.firstName = tempNames[0]
names.lastName = tempNames[1]
},
get:function(){
return names.firstName + " " + names.lastName
}
})
console.log(fullname)
function setFullname(){
fullname.value = "coder why"
console.log(names)
}
// 2.定义score
const score = ref(89)
const scoreLevel = computed(()=>{
return score.value >= 60 ? "及格" : "不及格"
})
return {
names,
fullname,
scoreLevel,
setFullname
}
}
}
script>
<style scoped>
style>
06.Setup中ref引入元素
App.vue
<template>
<div>
<h2 ref="titleRef"> 我是标题 h2>
<button ref="btnRef">按钮button>
<ShowInfo ref="ShowInfoRef">ShowInfo>
<button @click="getElements">获取元素button>
div>
template>
<script>
import { ref,onMounted } from 'vue'
import ShowInfo from './ShowInfo.vue'
export default {
// mounted(){
// console.log(this.$refs.title)
// console.log(this.$refs.btn)
// }
components:{
ShowInfo
},
setup(){
const titleRef = ref()
const btnRef = ref()
const ShowInfoRef = ref()
// mounted的生命周期函数
onMounted(()=>{
console.log(titleRef.value)
console.log(btnRef.value)
console.log(ShowInfoRef.value)
ShowInfoRef.value.ShowInfoFoo()
})
function getElements(){
console.log(titleRef.value)
}
return {
titleRef,
getElements,
btnRef,
ShowInfoRef
}
}
}
script>
<style scoped>
style>
ShowInfo.vue
<template>
<div>
<div>ShowInfodiv>
div>
template>
<script>
export default {
// methods:{
// function ShowInfoFoo(){
// console.log("showInfo foo function")
// }
// },
setup(){
function ShowInfoFoo(){
console.log("showInfo foo function")
}
return {
ShowInfoFoo
}
}
}
script>
<style scoped>
style>
07.Setup生命周期函数
App.vue
<template>
<div>
div>
template>
<script>
import { onMounted } from 'vue'
export default {
// created(){
// },
// beforeMount(){
// },
// mounted(){
// },
// beforeUpdate(){
// },
// updated(){
// }
setup(){
// 在执行setup函数的过程中，你需要注册别的生命周期函数
onMounted(()=>{
console.log("onmounted")
})
}
}
script>
<style scoped>
style>
08.Setup-Provide-Inject
App.vue
<template>
<div>
<div>App:{{ name }} --div>
<ShowInfo>ShowInfo>
div>
template>
<script>
import ShowInfo from './ShowInfo.vue';
import { provide,ref } from 'vue'
export default {
components:{
ShowInfo
},
setup(){
const name = ref("why")
provide("name",name)
provide("age",18)
return {
name,
}
}
}
script>
<style scoped>
style>
ShowInfo.vue
<template>
<div>
<div>showInfo:{{ name }} -- {{ age }}div>
<button @click="name = 'kobe'">app btnbutton>
div>
template>
<script>
import { inject } from 'vue';
export default {
setup() {
const name = inject("name");
const age = inject("age");
return {
name,
age
};
},
}
script>
<style scoped>
style>
09.Setup-侦听数据变化
App.vue
<template>
<div>
<div>当前计数 {{ counter }}div>
<button @click="counter++">+1button>
<button @click="change_name">修改namebutton>
div>
template>
<script>
import { ref,watchEffect } from 'vue'
export default {
setup(){
const counter = ref(0);
const name = ref('why');
// 1.watchEffect传入的函数默认会直接被执行
// 2.在执行过程中，会自动的收集依赖（以来那些响应式的数据）
const stopWatch = watchEffect(()=>{
console.log("------",counter.value,name.value)
// 判断counter.value > 10
if(counter.value >= 10){
stopWatch()
}
})
function change_name(){
name.value='kobi'
}
return {
counter,
change_name,
name
}
}
}
script>
<style scoped>
style>
App-watch.vue
<template>
<div>
<h2>message:{{ message }}h2>
<button @click="change_message">修改messagebutton>
<button @click="change_info">修改infobutton>
div>
template>
<script>
// import { watch } from 'fs'
import { ref,watch,reactive } from 'vue'
export default {
setup(){
const message = ref('hello');
const info = reactive({
name:'tom',
age:18,
friend:{
name:"kobe"
}
})
function change_message(){
message.value = '你好！'
}
function change_info(){
info.name = 'hhhhh'
}
// 2.侦听变化
watch(message,(newValue,oldValue)=>{
console.log(newValue,oldValue)
})
// watch(info,(newValue,oldValue)=>{
// console.log(newValue,oldValue)
// console.log(newValue == oldValue)
// },{
// immediate:true // 深度侦听
// })
// 3.监听reactive数据变化后，获取普通对象
watch(()=>({ ...info }),(newValue,oldValue)=>{
console.log(newValue,oldValue)
},{
immediate:true,
deep:true
})
return {
change_message,
message,
info,
change_info
}
}
}
script>
<style scoped>
style>
10.Setup-Hooks练习
App.vue
<template>
<div>
<div>App:{{ counter }}div>
<button @click="increment">+1button>
<button @click="decrement">-1button>
<button @click="index_tab('首页-热门')">首页-热门button>
<button @click="index_tab('首页-流行')">首页-流行button>
<button @click="index_tab('首页-歌单')">首页-歌单button>
<hr>
<HomeCom>HomeCom>
<hr>
<AboutCom>AboutCom>
div>
template>
<script>
import HomeCom from './views/HomeCom.vue';
import AboutCom from './views/AboutCom.vue';
import useCounter from './hooks/useCounter';
import useTitle from './hooks/useTitle';
export default {
components: {
HomeCom,
AboutCom
},
setup() {
const title = useTitle("首页")
function index_tab(eve){
title.value = eve
}
return {
index_tab,
...useCounter()
}
}
}
script>
<style scoped>style>
AboutCom.vue
<template>
<div>
<div>About:{{ counter }}div>
<button @click="increment">+1button>
<button @click="decrement">-1button>
<button @click="change_title">修改titlebutton>
div>
template>
<script>
import useCounter from '../hooks/useCounter';
import useTitle from '../hooks/useTitle';
export default {
setup(){
const title = useTitle("首页")
// 监听事件点击
function change_title(){
title.value = '关于';
}
return {
change_title,
...useCounter()
}
}
}
script>
<style scoped>
style>
HomeCom.vue
<template>
<div>
<div>Home:{{ counter }}div>
<button @click="increment">+1button>
<button @click="decrement">-1button>
div>
template>
<script>
import useCounter from '../hooks/useCounter';
export default {
setup(){
return {
...useCounter()
}
}
}
script>
<style scoped>
style>
useCounter.js
import { ref,onMounted } from 'vue'
export default function useCounter(){
const counter = ref(0)
function increment(){
counter.value++
}
function decrement(){
counter.value--
}
onMounted(()=>{
setTimeout(()=>{
counter.value = 989
},1000)
})
return {
counter,
increment,
decrement
}
}
useTitle.js
import { watch,ref } from "vue"
export default function useTitle(titleValue){
// document.title = title
// 定义ref的引入数据
const title = ref(titleValue)
// 监听title的改变
watch(title,(newValue)=>{
document.title = newValue
},{
immediate:true // 第一次不执行
})
// 返回ref值
return title
}
11.script_setup语法
App.vue
<template>
<div>
<div>Appdiv>
<button @click="changeMessage">修改messagebutton>
<show-info ref="showInfoRef" @info-btn-click="infoBtnClick" name="why" :age="18">show-info>
div>
template>
<script setup>
// 1. 所以定义在顶层中的代码，都是默认暴露给template可以使用
import { onMounted,ref } from 'vue';
import ShowInfo from './ShowInfo.vue';
// 2. 定义响应式数据
const message = ref("hello world")
console.log(message)
// 3. 定义绑定的函数
function changeMessage(){
message.value = "你好，世界"
}
function infoBtnClick(eve){
console.log("监听到infoBtnClick内部的info",eve)
}
// 4. 获取组件实例
const showInfoRef = ref();
onMounted(()=>{
showInfoRef.value.foo()
console.log("showInfoRef.value.message",showInfoRef.value.message)
})
script>
<style scoped>
style>
ShowInfo.vue
<template>
<div>
message:-- {{ name }} --- {{ age }}
<button @click="showInfoBtnClick">showinfobutton>
div>
template>
<script setup>
import { defineProps,defineEmits,defineExpose } from 'vue';
const message = "hello world"
// console.log(message)
// 定义props const props =
defineProps({
name:{
type:String,
default:"默认值"
},
age:{
type:Number,
default:0
}
})
// 绑定函数，并发出事件
const emits = defineEmits(["infoBtnClick"])
function showInfoBtnClick(){
emits("infoBtnClick","showInfo内部发生了点击")
}
// 定义foo的函数
function foo(){
console.log("foo function")
}
defineExpose({
foo,
message
})
script>
<style scoped>
style>
感谢大家观看，我们下次见