Vue 3 中使用 watchEffect 监听 props 值变化

在 Vue 3 中，可以使用 watchEffect 来监听 props 值的变化。\n\nwatchEffect 是 Vue 提供的一个新的 API，它会在组件渲染时立即执行一次，并且会自动追踪其依赖的响应式数据。当这些响应式数据发生变化时，watchEffect 会再次执行。\n\n下面是一个示例代码，演示了如何使用 watchEffect 监听 props 值的变化：\n\njavascript\nimport { watchEffect } from 'vue';\n\nexport default {\n props: ['myProp'],\n setup(props) {\n watchEffect(() => {\n console.log('props.myProp changed:', props.myProp);\n });\n }\n}\n\n\n在上述代码中，我们通过 setup 函数来定义组件。在 setup 函数中，通过 watchEffect 来监听 props.myProp 的变化。当 props.myProp 发生变化时，watchEffect 的回调函数会被触发，并且会打印出新的 props.myProp 的值。\n\n需要注意的是，watchEffect 会在组件渲染时立即执行一次。如果你只想在 props.myProp 的值发生变化时执行一次回调函数，可以使用 watch 函数来替代 watchEffect。\n\njavascript\nimport { watch } from 'vue';\n\nexport default {\n props: ['myProp'],\n setup(props) {\n watch(() => props.myProp, (newValue, oldValue) => {\n console.log('props.myProp changed:', newValue);\n });\n }\n}\n\n\n在上述代码中，我们使用 watch 函数来监听 props.myProp 的变化。当 props.myProp 发生变化时，watch 的第二个回调函数会被触发，并且会打印出新的 props.myProp 的值。\n\n总的来说，watchEffect 和 watch 都可以用来监听 props 值的变化，具体使用哪一个取决于你的需求。