Vue3-Composition-API-学习笔记

01.Setup函数的体验

App.vue

<template>
  <div>
    <h2>当前计数：{{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </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">修改message</button>
    <hr>
    <h2>账号：{{ account.username }}</h2>
    <h2>密码：{{ account.password }}</h2>
    <button @click="changeAccount">修改账号</button>
    <hr>
    <!-- 默认清空下在template中使用ref时，vue会自动进行千层解包（取出value） -->
    <h2>当前计数：{{ counter }}</h2>
    <button @click="increment">+1</button>
    <hr>
    <!-- 使用的时候 -->
    <h2>当前计数：{{ info.counter }}</h2>
    <!-- 修改的时候需要写.value -->
    <button @click="info.counter.value++">+1</button>
  </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>App</h2>
    <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.name</button>
    <hr>
    <h2>reinfo:{{ reinfo }}</h2>
    <!-- <button @click="reinfo.name='hahaha'">修改reinfo.name</button> -->
    <button @click="change_rename">修改reinfo.name</button>
  </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+1</button>
    <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">设置fullname</button>
    <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>
    <!-- 1.获取元素 -->
    <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>ShowInfo</div>
  </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 btn</button>

  </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++">+1</button>
    <button @click="change_name">修改name</button>
  </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">修改message</button>
    <button @click="change_info">修改info</button>
  </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">+1</button>
    <button @click="decrement">-1</button>

    <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">+1</button>
    <button @click="decrement">-1</button>
    <button @click="change_title">修改title</button>
  </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">+1</button>
    <button @click="decrement">-1</button>
  </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>App</div>
    <button @click="changeMessage">修改message</button>
    <show-info ref="showInfoRef" @info-btn-click="infoBtnClick" name="why" :age="18"></show-info> 
    <!-- <ShowInfo></ShowInfo>
    <ShowInfo></ShowInfo>
    <ShowInfo></ShowInfo> -->
  </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">showinfo</button>
  </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>

感谢大家观看，我们下次见