Vue3新特性解析：watch、ref与组件交互

"Vue3的语法更新和特性" Vue3作为Vue.js框架的最新版本，引入了许多新特性和语法优化，提高了开发效率和性能。以下是Vue3中的一些关键知识点： 一、Watch监视 Vue3中的`watch` API提供了更加灵活的监视数据的方式。它可以监视`ref`、`reactive`、函数返回值，甚至是一个包含这些类型的数组。 1. 监视`ref`： - 默认情况下，监视`ref`对象会跟踪整个对象的引用变化。 - 深度监视（deep）：若要监听对象内的属性，需设置`deep: true`。 - 停止监视：通过返回的`stopwatch`函数可以停止监视。 - 立即触发：使用`immediate`选项使监视器在创建时立即执行。 2. 监视`reactive`： - `reactive`对象默认开启深度监视，无法关闭。 3. 监视单个属性： - 基本类型：使用函数式监视。 - 对象类型：推荐使用函数式并添加`deep: true`。 4. 监视多个数据： - 可以通过数组传递多个监视值，并设置`deep: true`。 5. `watchEffect`： - 自动追踪依赖，无需显式指定监视的数据。 二、`ref`与元素引用 `ref`不再仅限于数据绑定，它也可以用来获取DOM元素。例如，`<input ref="inputRef" />`，然后在脚本中使用`this.inputRef.value`获取或设置元素的值。 三、局部样式 使用`<script scoped>`可以限制CSS样式只在当前组件内生效，避免样式冲突。 四、页面传值 - `defineProps`用于定义组件的属性（props），它允许你声明属性类型、默认值等信息，以便在组件内部通过props访问父组件传递的值。 - `withDefaults`函数可以方便地为`defineProps`定义默认值。 五、`defineExpose` - `defineExpose`用于暴露组件内部的属性或方法，使得父组件可以直接访问。例如，如果你想让父组件能够调用组件内的`increment`方法，可以这样做： ```javascript <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } defineExpose({ increment }) </script> ``` 六、Composition API Vue3引入了Composition API，允许开发者更自由地组合功能。例如，`ref`和`reactive`用于响应式数据，`setup`函数用于组件的初始化逻辑。 Vue3的这些改进使得代码更加模块化，提升了可维护性，并降低了学习曲线。通过深入理解和应用这些新特性，开发者可以更高效地构建Vue3应用程序。