Vue3 组合式API

Vue3 组合式API

定义 : 组合式API ( Composition API ) 是一系列API 的集合,是我们可以使用函数而不是声明选项的方式书写Vue组件

1. setup 语法糖 : script标签添加 setup标记，不需要再写return语句，默认会添加return语句

2. 响应式数据 : reactive 和 ref

   a. reactive

   1. 在script中导入 import { reactive } from ‘vue’
   2. 作用 : 接收对象类型数据的参数传入并返回一个响应式的对象

     <script setup>
      import { reactive } from 'vue'  // 导入
      
      const state = reactive({       // 执行函数 传入参数 变量接收
        count:0
      })
      const add = ()=>{
        state.count++ // 修改数据更新视图
      }
     </script>
     
     <template>
       <button @click="add">{{state.count}}</button>
     </template>
   

   b. ref

   1. 在script中导入 import { ref } from ‘vue’

   2. 作用 : 接收简单类型或对象类型数据的参数传入并返回一个响应式的对象

   3. ref 在模板中取值 直接 {{ 属性名 }}

   4. ref 在代码中修改值要加上 属性名.value , 如果响应式数据是一个对象则为 : 对象.value.属性名
      示例代码 :

      <script setup>
      // setup 语法糖
      
      // 响应式数据 ref
      import { ref } from 'vue'
      
      const name = ref('田田')
      const nickName = ref({
        name : '甜甜'
      })
      //定义函数
      const clickHandler = () => {
        name.value = '小田田'
        nickName.value.name = '小甜甜'
      }
      </script>
      
      
      <template>
        setup: {{name}}
        setup: {{nickName.name}}
      <button @click="clickHandler">Click me</button>
      </template>
      
      <style>
      </style>
      

   c. 计算属性 computed

   1. 在script中 使用 import { computed } 导入

   2. 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

   3. 示例代码

      <script setup>
      // 计算属性  通过计算属性对响应式数据进行计算
      // 需求 筛选出大于2的新数组
      import { ref, computed } from 'vue'
      const arr = ref([1, 2, 3, 4, 5])
      const filterArr = computed(() => {
        return arr.value.filter(item => item >2)
      })
      
      const add = () =>{
        arr.value.push(10)
      }
      </script>
      
      <template>
        <div>
          原数组: {{arr}}
          <button @click.once="add" >加10进入原数组</button>
        </div>
      			//  @click.once 只点击一次
        <div>
          计算属性: {{filterArr}}
        </div>
      </template>
   

   d. 侦听器 watch

   1. 在script中 使用import { watch } from ‘vue’
   2. 侦听器默认是浅层侦听
   3. 使用方法,示例代码

<script setup>
// watch 侦听器
import { ref, watch } from 'vue'
const count = ref(0)
const age = ref(19)
const add = () => {
count.value++
age.value++
}
// watch 侦听器
// 1. 侦听一个值的变化
watch(count, (newVal, oldVal) => {
    console.log(newVal, oldVal)
    })

// 2. 侦听多个值的变化
watch([count,age], (newVal, oldVal) => {
console.log(newVal, oldVal)
})

// 3 . 立即侦听 : 先执行watch中的回调函数
watch(count, (newVal, oldVal) => {
    console.log(newVal, oldVal)
    },{immediate: true })// 立即侦听

</script>

<template>
  <div>
  	<p>count: {{count}}</p>
  	<p>age: {{age}}</p>
  	<button @click="add">加加</button>
  </div>
</template>

e. watch 深度侦听

<script setup>
  // watch 侦听器
import { ref, watch } from 'vue'
const info = ref({
  name: '小田',
  age: 19,
  address: '武汉'
})
const changeAge = () => {
  info.value.age++
}
const changeAddress = () => {
  info.value.address = '上海'
}
// 开启 deep 深度侦听
// 通过watch第三个参数配置项开启
// 坏处 
// 1. 它会遍历每一个属性去监听,性能不好
// 2. 任意一个属性变化都会去触发
watch(info,()=>{
  console.log('info变化了')
},{deep: true})

// 需求 在不开启deep深度侦听的情况下,能不能只侦听某一个指定的属性?
// 通过watch第一个参数配置项 配置回调函数的返回值
watch(()=> info.value.age,()=>{
  console.log('age变化了')
})
</script>

<template>
  	<div>
  		<button @click="changeAge">{{ info.age }}</button>
  		<button @click="changeAddress">{{ info.address }}</button>
 	 </div>
</template>