【前端开发】Vue3(一)

能在改变时触发更新的状态被称作是响应式的。我们可以使用 Vue 的reactive()API 来声明响应式状态。

Vue3声明式渲染

1.reactive()

reactive()只适用于对象 (包括数组和内置类型)

2.ref()

ref()则可以接受任何值类型。ref会返回一个包裹对象，并在.value属性下暴露内部值。

<script setup>在`setup()`函数中手动暴露大量的状态和方法非常繁琐。我们可以使用`<script setup>`来大幅度地简化代码。<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。

<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({hello world})
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

结果如下：

报错问题为：

const counter = reactive({hello world})

可见 reactive接受的必须是一个对象，

把他改为：

const counter = reactive(1)