vue3注意点

1nextTick用法

当父组件还没渲染出来  子组件又要用到父组件的dom 可以把子组件的代码执行放到nextTick中

import { nextTick }  from  'vue'

onMounted(()=>{

      nextTick(()=>{

          init();

       })

})

2 watch

import  {watch}  from  'vue'

watch 接受的三个参数 

1观察的源

2回调

3 选项对象

const  obj=ref({name:'rice',age:12})

watch(obj,(newVla,oldVla)=>{},{deep:true,immediate:true})

常见使用场景

1. 表单输入验证：实时验证用户输入，提供反馈。
2. 异步数据请求：当某个状态变化时，触发 API 请求获取新数据。
3. 复杂计算：在数据变化时，执行复杂的计算或数据转换。

注意事项

• 性能考虑：深度观察会带来性能开销，使用时需谨慎。
• 响应性丢失：在观察对象属性时，确保使用 ref 或 reactive 包裹，以保持响应性。