vue3 watch / computed

Vue 3中的`watch`和`computed`是两个非常重要的响应式系统，用于数据绑定和监听数据变化。

**1. `watch`**:
`watch`是一个函数或对象，可以用来监视Vue实例的数据属性。当你在`watch`中定义了一个函数，每当被观察的属性值改变时，这个函数会被调用。`watch`提供了两个模式：
- **立即调用**（immediate）: 在首次设置`watch`的时候立即执行回调。
- **深度检测**（deep）: 如果你想监听嵌套对象或数组的变化，可以开启深度检测。

示例：

data() {
  return {
    count: 0
  }
},
watch: {
  count(newCount, oldCount) {
    console.log('Count has changed:', newCount);
  },
  count: {
    handler: (newCount) => {
      // ...
    },
    deep: true
  }
}

相关问题

vue3 watch 和computed区别

Vue 3中的`watch`和`computed`都是响应式系统的一部分，用于数据的监听和计算，但它们的作用和用法有所不同：

1. **Computed（计算属性）**：
- 计算属性是基于其他属性的值来动态计算结果的。当你依赖的属性发生变化时，计算属性会自动更新其值。
- 它们通常用来封装一些逻辑复杂或有副作用的方法，例如处理数组的过滤、排序等操作，返回简洁的结果。
- Computed属性本身是惰性的，只有当它们的依赖发生改变时才会重新计算。
- 示例：`this.total = this.items.length * this.price;`

2. **Watch（监视器）**：
- Watch则更像是一个事件监听器，它可以监听任意的getter（属性）变化，并在变化时执行自定义的函数。
- Watch可以设置immediate（立即执行）和deep（深度监听）选项，前者会在创建时立即执行一次，后者会追踪对象的深层变动。
- Watch可以用于实时更新视图，比如监听用户输入后实时更新状态，或者在数据变化时执行异步操作。
- 示例：`this.$watch('inputValue', (newValue) => { this.result = newValue.toUpperCase(); })`

WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead. INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 17 warnings 09:43:57 warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'computed' was not found in 'vue' warning in ./src/router/index.js "export 'default' (imported as 'VueRouter') was not found in 'vue-router' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'defineComponent' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'getCurrentInstance' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'h' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'inject' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'nextTick' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onActivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onDeactivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onUnmounted' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'provide' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'reactive' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'ref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'shallowRef' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'unref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watch' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watchEffect' was not found in 'vue'这个报错因为什么

这个报错是因为在使用Vue Router时，导入的Vue Router版本与当前项目中的Vue版本不匹配导致的。具体来说，Vue Router中使用了Vue 3的语法而当前项目中使用的是Vue 2，所以会出现一些语法上的错误。解决方法是将Vue Router更新到与当前项目中使用的Vue版本相匹配的版本。