vue3学习——CompositionAPI（三）

① Reactive API

1.如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用reactive的函数：<template><div><h4>{{ state.counter }}</h4><button @click="increment">+1</button></div></template><script> // 导入 reactiveimport { reactive } from 'vue'export default {setup() {const state = reactive({counter: 1})const increment = () => {state.counter++}return {state,increment}}} </script>

② Ref API

1.reactive API对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型：* 如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告；<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a9ac74489174c99b78dd68bce70ad2c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)2.这个时候Vue3给我们提供了另外一个API：ref API* ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是ref名称的来源；* 它内部的值是在ref的value属性中被维护的；<template><div><h4>{{ count }}</h4><button @click="increment">+1</button></div></template><script> // 导入 refimport { ref } from 'vue'export default {setup() {const count = ref(1)const increment = () => {count.value++}return {count,increment}}} </script><style scoped></style> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4H1LdTz-1660997260309)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/306617a10dc847688eba060f970d216e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]3.这里有两个注意事项：* 在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过ref.value的方式来使用；* 但是在setup 函数内部，它依然是一个ref引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式” style=“margin: auto” />

Ⅰ. Ref自动解包

1.如果我们将ref放到一个reactive的属性当中，那么在模板中使用时，它会自动解包：<h4>{{ count }}</h4><script> // 导入 refimport { ref } from 'vue'export default {setup() {const count = ref(1)console.log(count.value)return {count}}} </script> 注意： 自动解包的意思就是说，在视图中可以直接通过变量名进行展示数据，但是在script标签中，任然要使用变量名.value的形式进行展示### Ⅱ. setup中使用ref

. setup中使用ref

1.在讲解 watchEffect执行时机之前，我们先补充一个知识：在setup中如何使用ref或者元素或者组件？* 其实非常简单，我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可；<template><div><h4 ref="titleRef">liangshuang</h4></div></template><script> // 导入 ref、onMounted、watchEffectimport { ref, onMounted, watchEffect} from 'vue'export default {setup() {// 获取节点const titleRef = ref(null)// 这样直接获取的节点内容是 null，因为页面还没有挂载console.log(titleRef.value)// 第一种获取节点的方法，在生命周期中获取onMounted(() => {console.log(titleRef.value)})// 第二种获取节点的方法，通过侦听器方法// 但是注意，watchEffect 会执行两次，页面展示的时候打印一次，另一次是页面挂载的时候watchEffect(() => {console.log(titleRef.value)})return {titleRef}}} </script> 注意：* 页面刚加载的时候，直接打印节点的话，是null，因为还没有挂载。想要获取节点的话可以通过两种方法：1.在生命周期中获取节点，在节点挂载在页面之后来获取2.使用watchEffect方法，但是这个方法会调用两次，一次就是页面展示的时候，另一次就是页面挂载完毕，那么节点内容就会更新，这个时候也会调用。如果想要延迟watchEffect的调用时机，在下一章讲解。