Vue学习

响应式API

#ref

接收一个内部值，返回一个响应式的，可以更改的 ref 对象，次对象只有一个指向其内部值的属性.value。

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对.value的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref ，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，他们将被深层的解包。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

Attribute 绑定

双大括号不能再 HTML attributes 中使用。想要响应式的绑定一个 attribute，应该使用v-bind指令：

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>

布尔型 Attribute 

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

组合式API下的父传子和子传父

父传子

1.父传子的过程中通过什么方式接收props？

defineProps({ 属性名：类型 })

2.serup语法糖中如何使用父组件传过来的数据？

const props = defineProps({ 属性名：类型 }
props.xxx

 子传父

1.子传父的过程中通过什么方式得到emit方法？

defineEmits(['事件名称'])

2.怎么触发事件

emit('自定义事件名',参数)

模板引用

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

defineExpose()

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

细节：

1. 获取模板引用的时机是什么？

        我们需要在 onMounted 当中，或者点击一次按钮，至少要等我们的组件挂载完毕后才能获取模板引用。

2. defineExpose 编译宏的作用是什么？

        显示的暴露组件内部的属性和方法。

watch 函数

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

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

基础使用 - 监听单个数据

1. 导入watch函数

2. 执行watch函数传入要侦听的响应式数据（ref对象）和回调函数

基础使用 - 侦听多个数据

说明：同时侦听多个响应式数据的变化，不管哪个数据变化都要执行回调

immediate

说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调

deep

默认机制：通过watch监听的ref对象时浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

精确的侦听对象的某个属性

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

provide 和 inject

作用和场景

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

defineOptions

在 Vue3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项，props，emits，expose，slots 除外（因为这些可以使用 defineXXX 来做到）

 

Vue3跨组件传值 (依赖注入)

Vue3的生命周期 API