Vue3组合式API(基础语法使用)

1.钩子函数setup

        setup() 函数是一个新的组件选项，它是一个接受 props 和 context 作为参数的函数。

        主要用于设置组件的响应式数据、方法和计算属性等，它返回一个对象，这个对象包含了需要暴露给模板的属性。

    1.函数的普通用法

<script>
export default {
  setup() {

    return {}
  }
}
</script>

<template>
  
</template>

     2.简写使用setup

<script setup>

</script>

<template>
 
</template>

2.响应式API

setup() 函数内部可以使用 Vue 3 提供的一些 API 来创建响应式数据

        (注：在 <script setup> 内部，不能使用 this 关键字来引用组件实例)

        若要访问其他属性或方法：

                1.直接在 <script setup> 中引入它们

                2.或用 with 关键字来引入整个组件实例

1. ref函数 

<script setup> //引入ref函数
import { ref } from 'vue' 

const num = ref(0)
function add() {
  num.value++
}
</script>

<template>
  <button @click="add">
    {{ num }}
  </button>
</template>

     2.reactive函数 (对象类型数据)

与使用 ref 不同的是，reactive 可以用来创建包含多个属性的响应式对象。

<script setup>
import { reactive } from 'vue'
const num = reactive({ count: 0 })
function add() {
  num.count++
}
</script>

<template>
  <button @click="add">
    {{ num.count }}
  </button>
</template>

3.计算属性API

1. 单向响应

<script setup>
import { computed,reactive } from 'vue'
const Person=reactive({X:'张',M:'三'})
 Person.XM=computed(()=>{
  return Person.X+'-'+Person.M
 })
</script>

<template>
  姓:<input v-model="Person.X"><br>
  名:<input v-model="Person.M"><br>
  单向响应:<input v-model="Person.XM">
</template>

      2.双向响应

<script setup>
import { computed,reactive } from 'vue'
const Person=reactive({X:'张',M:'三'})
Person.AXM=computed({
  get(){
    return Person.X+'-'+Person.M
  },
  set(value){
    const arr=value.split('-')
    Person.X=arr[0]
    Person.M=arr[1]
  }
})
</script>

<template>
  姓:<input v-model="Person.X"><br>
  名:<input v-model="Person.M"><br>
  双向响应:<input v-model="Person.AXM">
</template>

4.监听属性API

watch() 函数可以监视一个响应式数据的变化，并在数据变化时执行特定的回调函数。

1. 监听整个对象

<!--  // 监听整个对象,由于是浅拷贝，他们新旧指向的是通一个对象 -->
<script setup>
import {reactive,watch} from 'vue'
const Person=reactive({name:'张三',age:18, job:{salary:20}})
      watch(Person,(newVal,oldVal)=>{
         console.log('用户信息发生了变化',newVal,oldVal);
      })
</script>

<template>
 <h2>年龄：{{Person.age}}</h2>
 <button @click="Person.age++">+1</button>
</template>

      2.监听对象中单个属性

<!-- 监听对象中单个属性,监听单个属性可以检测到新旧值 -->
<script setup>
import {reactive,watch} from 'vue'
const Person=reactive({name:'张三',age:18, job:{salary:20}})
      watch(()=>Person.age,(newVal,oldVal)=>{
         console.log('用户年龄发生了变化',newVal,oldVal);
      })
</script>

<template>
 <h2>年龄：{{Person.age}}</h2>
 <button @click="Person.age++">+1</button>
</template>

      3.监听多个对象

<!-- 监听对象中多个个属性,监听单个属性可以检测到新旧值 -->
<script setup>
import {reactive,watch} from 'vue'
const Person=reactive({name:'张三',age:18, job:{salary:20}})
      watch([()=>Person.name,()=>Person.age],(newValue,oldValue)=>{
        console.log('person.name或者person.age的值变化了',newValue,oldValue);
      })
</script>

<template>
 <h2>姓名：{{Person.name}}</h2>
 <button @click="Person.name+='~'">修改</button>
 <h2>年龄：{{Person.age}}</h2>
 <button @click="Person.age++">+1</button>
</template>

      4.监听对象中对象(深度监听)

<!-- 监听对象中对象,必须开启深度监听,一般情况不监听对象 -->
<script setup>
import {reactive,watch} from 'vue'
const Person=reactive({name:'张三',age:18, job:{salary:20}})
      watch(()=>Person.job,(newValue,oldValue)=>{
        console.log('person.job的值变化了',newValue,oldValue);
       },{
      deep:true
      })
</script>

<template>
 <h2>薪资：{{Person.job.salary}}K</h2>
 <button @click="Person.job.salary++">+1</button>
</template>