vue3核心语法

type

status

date

slug

summary

语法1—reactive(用来声明响应式数据的函数)

通过reactive,我们可以传入一些对象类型的值，比如说数组对象set对象map对象，它可以对内部进行一个全响应式的处理，而且不仅是一维的，多维也是可以的

语法2—shallowReactive

shallowReactive 是 Vue 3 Composition API 提供的一个函数，用于创建一个浅层响应式对象。与 reactive 不同，shallowReactive 只会使对象的第一层属性变成响应式，而不会递归地将嵌套对象的属性变成响应式。

这意味着，如果你对返回的对象进行修改，Vue 会检测到变化并进行响应。但如果这个对象内部还有对象，对内部对象的修改不会被检测到。

语法3—ref

在 Vue3 中，ref 是一个函数，用于创建一个响应式对象。ref 主要用于包装基本数据类型（如数字、字符串、布尔值等），使其变成响应式。需要注意的是，通过 ref 创建的对象，其真正的值存储在 .value 属性中。这是因为 ref 返回的对象是一个包含 .value 属性的对象，而不是直接的值。这种封装是为了确保响应式系统可以正确地跟踪数据的变化。在上面的例子中，num 是一个 ref 创建的响应式对象，通过 .value 可以访问其值。在模板中，直接使用 num 而不需要 .value。

语法4—readonly

在 Vue 3 中，readonly 是一个函数，用于创建一个只读的响应式对象。这意味着一旦对象被创建，其属性将不能被修改。需要注意的是，readonly 可以用于包装由 reactive 创建的响应式对象，也可以直接用于普通的 JavaScript 对象。readonly 是一个有用的工具，特别是在需要确保某些数据不会被修改时，可以使用它来创建只读的数据对象。

语法5—shallowonly

shallowReadonly 是 Vue 3 中的一个函数，用于创建一个只读的、浅层次的响应式对象。与 readonly 不同，shallowReadonly 只会使对象的顶层属性变为只读，而不会递归地将所有嵌套属性都变成只读。需要注意的是，shallowReadonly 不会递归地将嵌套对象变成只读。在上面的例子中，friend 对象的属性仍然可以被修改。name/age 是一个只读的、浅层次的响应式对象，可以确保顶层属性不被修改，但嵌套属性仍然可以被修改。

语法6—computed

在 Vue 3 中，你可以使用计算属性（computed）来进行数学计算。计算属性是响应式的，当计算过程中依赖的响应式数据发生变化时，计算属性会自动重新计算其值。每次我点击按钮，就会去修改他的一个长度，虽然我进行了三次渲染，但是当我点击的时候，它每次只会修改一个值，因为只要数据有了变化，他就会将数据结果计算出来，进行缓存。所以说第一次改了后后两次会直接使用缓存结果，从而避免重复执行

语法7—watch

在Vue 3的Composition API中，watch函数用于监听响应式数据的变化。它接收两个参数：要监听的数据和当数据变化时触发的回调函数。在这个例子中，我们使用watch函数监听num的变化，当num变化时，会执行指定的回调函数。在回调函数中，你可以执行任何你需要的逻辑，这里我们简单地打印了新旧值。每次点击按钮，num都会增加，并触发watch中的回调函数。这是一个基本的watch用法，你可以根据需要进行更复杂的配置，例如监听多个变量、深度监听、立即执行回调等。

由于watch的参数支持的只是ref对象本身和reactive对象的本身(要么ref对象，reactive对象,要么就是一个函数，要么就是包裹多个值的一个数组)，如果要监听一个reactive对象的属性的话就得通过函数的方式。

同时侦听

语法8—watchEffect（作用函数）

watchEffect 是 Vue 3 中的一个 API，用于创建一个副作用函数，并在副作用函数中自动追踪其依赖。当依赖发生变化时，副作用函数会被重新执行。

上面代码中，我使用了 watchEffect 来监视 num 和 content.age 的变化。这样，每当 num 或 content.age 发生改变时，watchEffect 中的回调函数就会被调用。

你的代码示例已经很好地展示了 watchEffect 的使用。在这里，你使用 watchEffect 监听了 num 和 content.age，并在回调函数中打印了它们的值。这样，每次按钮被点击，content.age 发生变化时，都会触发这个回调函数。