组合式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(深度侦听)
侦听单个数据
导入watch
函数执行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>
总结
- 作为watch函数的第一个参数,ref对象需要添加.value吗?
答:不需要,watch会自动读取 - watch只能侦听单个数据吗?
答:单个或者多个 - 不开启deep,直接修改嵌套属性能触发回调吗?
答:不能,默认是浅层侦听 - 不开启deep,想在某个层次比较深的属性变化时执行回调怎么做?
答:可以把第一个参数写成函数的写法,返回要监听的具体属性
组合式API - 生命周期函数
选项式对比组合式
生命周期函数执行多次的时候,会按照顺序依次执行。
案例
总结
- 组合式API中生命周期函数的格式是什么?
答:on + 生命周期名字 - 组合式API中可以使用onCreated吗?
答:没有这个钩子函数,直接写到setup中 - 组合式API中组件卸载完毕时执行哪个函数?
答:onUnmounted
组合式API -父子通信 ★★★
1.父传子
基本思想
1、父组件中给子组件绑定属性
2、自组件内部通过props选项接收
2.子传父
基本思想
1、父组件中给子组件标签通过@绑定事件
2、自组件内部通过$emit方法触发事件
3.总结
父传子
- 父传子的过程中通过什么方式接收props?
答:defineProps( { 属性名:类型} ) - setup语法糖中如何使用父组件传过来的数据?
答:const props = defineProps( { 属性名:类型} )
子传父
- 子传父的过程中通过什么方式得到emit方法?
答:defineEmits( [‘事件名称’] )
组合式API - 模版引用
概念:通过 ref标识 获取真实的 dom对象或者组件实例对象
1.基本使用
- 调用ref函数生成一个ref对象
- 通过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.总结
- 获取模板引用的时机是什么?
答:组件挂载完毕 - defineExpose编译宏的作用是什么?
答:显式暴露组件内部的属性和方法
组合式API -provide和inject
作用:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信
使用:
- 顶层组件通过
provide
函数提供数据 - 底层组件通过
inject
函数提供数据
案例:
页面显示:
顶层组件向底层组件传递数据或者方法,上面的案例是传递普通数据,也可以换成传递响应式数据,只需要自行更换即可