【Vue】vue3 组合式API入门

组合式API - reactive和ref函数

1、reactive()

作用： 接受对象类型数据的参数传入并返回一个响应式的对象

案例

<template>
  {{ state.msg }}
  <button @click="setState">change msg</button>
</template>
<script setup>
// 导入
import { reactive } from 'vue';
// 执行函数 传入参数 变量接收
const state = reactive({
  msg: 'this is msg'
})
const setState = () =>{
  // 修改数据更新视图
  state.msg = 'this is new msg'
}
</script>

2、ref()

作用： 接受简单类型或者对象类型的数据传入并返回一个响应式的对象

案例

<template>
  <button @click="setCount">{{ count }}</button>
</template>
<script setup>
// 导入
import { ref } from 'vue';
// 执行函数 传入参数 变量接收
const count = ref(0)
const setCount = () =>{
  // 修改数据更新视图必须加上.value
  count.value++
}
</script>

3、reactive 对比 ref

• 都是用来生成响应式数据
• 不同点
  • reactive 不能处理简单类型的数据
  • ref参数类型支持更好，但是必须通过.value做访问修改
  • ref函数内部的实现依赖于reactive函数
• 在实际工作中的推荐
  • 推荐使用ref函数，减少记忆负担

组合式API - computed

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

案例

<template>
  <p>{{ count }}</p>
  <p>{{ doubleCount }}</p>
  <p>{{ list }}</p>
  <p>{{ filterList }}</p>
</template>
<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(1)
// 计算属性
const doubleCount = computed(()=>count.value * 2)

// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(()=>{
  return list.value.filter(item=>item>2)
})
</script>

组合式API - watch

作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数

俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）

侦听单个数据

1. 导入watch函数
2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

<template>
  <button @click="add">{{count}}</button>
</template>
<script setup>
// 1.导入watch
import { ref, watch } from 'vue'
const count = ref(0)

// 2.调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
  console.log(`count发生了变化，老值为${oldValue}，新值为${newValue}`)
})

const add = () =>{
  count.value ++
}
</script>

侦听多个数据

<template>
  <button @click="add">{{count}}</button>
  <button @click="changeName">{{name}}</button>
</template>
<script setup>
// 1.导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')

// 侦听多个数据源
watch([count, name],([newCount, newName], [oldCount, oldName])=>{
  console.log('count或者name变化了，',[newCount, newName],[oldCount,oldName])
})

const add = ()=>{
  count.value ++
}
const changeName = () =>{
  name.value = name.value + Math.random()
}
</script>

immediate

上面代码一保存，就会马上执行一次回调函数。

deep

上面的代码修改state中的count时，不会触发watch监听函数，要想触发监听函数，需要开启deep

<template>
  <button @click="changeStateByCount">{{  state.count }}</button>
</template>
<script setup>
// 1.导入watch
import { ref, watch } from 'vue'
const state = ref({count:0})

watch(state, ()=> console.log('数据变化了'),{deep: true})
const changeStateByCount = ()=>{
  console.log(state);
  // 直接修改属性 -> 不会触发回调
  state.value.count++
}
</script>

注：假如用reactive创建响应式数据时，则不需要开启deep，就能触发watch

精确侦听对象的某个属性

需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

<template>
  <button @click="changeAge">{{  info.age }}</button>
  <button @click="changeName">{{  info.name }}</button>
</template>
<script setup>
// 1.导入watch
import { ref,  watch } from 'vue'

const info = ref({
  name: 'cp',
  age: 18
})
const changeAge = ()=>{
  info.value.age ++ 
}
const changeName = ()=>{
  info.value.name = info.value.name + ' ###' 
}
watch(
  ()=> info.value.age,
  ()=> console.log('age发生了变化')
)
</script>

总结

1. 作为watch函数的第一个参数，ref对象需要添加.value吗？
   答：不需要，watch会自动读取
2. watch只能侦听单个数据吗？
   答：单个或者多个
3. 不开启deep，直接修改嵌套属性能触发回调吗？
   答：不能，默认是浅层侦听
4. 不开启deep，想在某个层次比较深的属性变化时执行回调怎么做？
   答：可以把第一个参数写成函数的写法，返回要监听的具体属性

组合式API - 生命周期函数

选项式对比组合式

生命周期函数执行多次的时候，会按照顺序依次执行。

案例

总结

1. 组合式API中生命周期函数的格式是什么？
   答：on + 生命周期名字
2. 组合式API中可以使用onCreated吗？
   答：没有这个钩子函数，直接写到setup中
3. 组合式API中组件卸载完毕时执行哪个函数？
   答：onUnmounted

组合式API -父子通信 ★★★

1.父传子

基本思想
1、父组件中给子组件绑定属性
2、自组件内部通过props选项接收

2.子传父

基本思想
1、父组件中给子组件标签通过@绑定事件
2、自组件内部通过$emit方法触发事件

3.总结

父传子

1. 父传子的过程中通过什么方式接收props？
   答：defineProps( { 属性名：类型} )
2. setup语法糖中如何使用父组件传过来的数据？
   答：const props = defineProps( { 属性名：类型} )

子传父

1. 子传父的过程中通过什么方式得到emit方法？
   答：defineEmits( [‘事件名称’] )

组合式API - 模版引用

概念：通过 ref标识 获取真实的 dom对象或者组件实例对象

1.基本使用

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签

<template>
  <!-- 2. 通过ref标识绑定ref对象 -->
  <h1 ref="h1Ref">我是Dom标签h1</h1>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 1. 调用ref函数得到ref对象
const h1Ref = ref(null)
console.log(h1Ref);
// 组件挂在完毕后才能获取
onMounted(()=>{
  console.log(h1Ref.value.innerText);  // 我是Dom标签h1
})
</script>

2. defineExpose

默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问

在没使用 defineExpose 前：

输出结果：

使用了 defineExpose 后：

输出结果：

子组件的属性跟方法已经开放给父组件了

3.总结

1. 获取模板引用的时机是什么？
   答：组件挂载完毕
2. defineExpose编译宏的作用是什么？
   答：显式暴露组件内部的属性和方法

组合式API -provide和inject

作用：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

使用：

• 顶层组件通过 provide 函数提供数据
• 底层组件通过 inject 函数提供数据

案例：

页面显示：

顶层组件向底层组件传递数据或者方法，上面的案例是传递普通数据，也可以换成传递响应式数据，只需要自行更换即可