Composition API 结合使用 深入学习

上一篇文章给大家 讲解了Composition API 的基本操作，入门学习，这一篇准备给大家深入讲解一下，让大家更深入的了解Composition的使用技巧。

话不多说直接上代码，基础模板

<template>
<!-- vue3.x -->
<div class='home'>
  {{msg}}
  -----
  {{title}}
  ---
  {{userinfo.username}}
  --
  {{userinfo.password}}
  <button @click="getUserName()">getUserInfo</button>
  <button @click="getTitle()">getTitle</button>
  <button @click="setUserName()">setUserInfo</button>
  <button @click="setTitle()">setTitle</button>
  <br>
  <!-- 数据的双向绑定 -->
  <input type="text" v-model="title">
</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'home',
setup(){}
},
data(){
  return {
    msg:'wuhan222'
    
  }
},

}
</script>
<style lang='less' scoped>
</style>

setup里面定义、修改属性

ref 定义响应式数据  字符串、Num bool 数组 ，reactive 定义响应式数据

  let title = ref('我是一个标题')
  let userinfo= reactive({
    username:'武汉',
    password:'123456'
  })
  // 获取reactive 里面定义的数据
  let getUserName = ()=>{
    console.log(userinfo) // {username: "武汉", password: "123456"}
  }
  // 获取ref里面定义的数据
  let getTitle = ()=>{
    console.log(title.value) // 我是一个标题
  }

   // 修改reactive 里面定义的数据
  let setUserName = ()=>{
    // console.log(userinfo) // {username: "武汉", password: "123456"}
    userinfo.username = '北京'
    userinfo.username = '45678'
  }
  // 修改ref里面定义的数据
  let setTitle = ()=>{
    title.value = '修改后的ref-title'
  }
  return{
    title,
    userinfo,
    getUserName,
    getTitle,
    setUserName,
    setTitle

toRefs解构响应式对象数据

import {ref,reactive,toRefs} from 'vue'

let article = reactive({
    discription:'123456',
    click:25,
  })
  
  return {
  ...article, // 错误的写法，会导致变量失去响应式
  ...toRefs(article)
  }

computed计算属性的使用

<template>
<!-- vue3.x -->
<div class='home'>
  {{firstName}}
  <br>
  {{lastName}}
  <br>
  {{fullName}}
</div>
</template>
<script>
<!--引入computed 属性-->
import {reactive,toRefs, computed} from 'vue'
export default {
name: 'home',
setup(){
 let userInfo = reactive({
   firstName:'firstName',
   lastName:'lastName'
 })
 // 使用computed 计算属性 
 let fullName = computed(()=>{
   return userInfo.firstName + userInfo.lastName
 })
  return{
...toRefs(userInfo),
fullName
  }
},
data(){
  return {
    msg:'wuhan222'
    
  }
},

}
</script>
<style lang='less' scoped>
</style>

readonly 可以将响应式数据改为非响应式数据 （实际项目中用的不多）

传入一个对象（响应式或普通）或ref，返回一个原始对象只读代理，一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的。

<template>
<!-- vue3.x -->
<div class='home'>
  <input type="text" v-model="object.username">
  <br>
  {{object}}
</div>
</template>
<script>
import {reactive,toRefs, computed, readonly} from 'vue'
export default {
name: 'home',
setup(){
  let object= {
    username:'李四'
  }
 object = readonly(object)
  return{
    object,
  }
},
data(){
  return {   
  }
},

}
</script>
<style lang='less' scoped>
</style>

watch、watch与watchEffect的区别

对比watchEffect、watch允许我们：

懒执行、也就是说仅在侦听的源变更时才执行回调；

更明确哪些状态会触发侦听器重新运行；

访问侦听状态变化前后的值

watchEffect

<template>
<!-- vue3.x -->
<div class='home'>
{{num}}  // 1,2,3,4，...
</div>
</template>
<script>
import {reactive, watchEffect,toRefs} from 'vue'
export default {
name: 'home',
setup(){
  let data = reactive({
    num:1
  })
  watchEffect(()=>{
    console.log(`num=${data.num}`)
  })
  setInterval(()=>{
    data.num++
  },1000)
  return{
    ...toRefs(data)
  }
},
data(){
  return {
    msg:'wuhan222'
  }
},

}
</script>
<style lang='less' scoped>
</style>

watch可以监听变化前后的数据（与2.x类似）

<template>
<!-- vue3.x -->
<div class='home'>
{{num}}
</div>
</template>
<script>
import {reactive, watch,toRefs} from 'vue'
export default {
name: 'home',
setup(){
  let data = reactive({
    num:1
  })
  watch(data,(newV,oldV)=>{
    console.log(data.num,'-----',newV,oldV)
  })
  setInterval(()=>{
    data.num++
  },1000)
  return{
    ...toRefs(data)
  }
},
data(){
  return {
    msg:'wuhan222'
  }
},

}
</script>
<style lang='less' scoped>
</style>