关于vue项目中踩得一些坑-1

概述

  经过1个半月的vue3开发,也算是勉强入了点门,作为前端的纯新手,自然是踩了不少坑,也有了不少的新的体会,这里主要是对自己踩的坑和心得做一个大致总结:

父子组件参数传递

  vue项目主要通过props和provide-inject进行父子组件传递,它们在子组件封装中起到了决定性的作用。我在使用props传递参数的时候,遇到了一些新手容易踩的坑:

父子参数更新

父组件更新

  父组件的参数一旦变更,是不能直接影响子组件对应的响应式数据的，props数据是不能直接打包成响应式数据进行使用。所以经常会发生这样一个状况：父组件的参数发生了变化，导致了props参数的变化，但是由于子组件一般只在渲染的时候才会将props参数赋予给对应的响应式数据，所以导致props参数已经变化，但是子组件的响应式数据并不能随之更新。后来想到了通过监听器watch对props参数进行监听，从而实时更新参数。这里又来了一个新坑：
  vue3往常一般使用如下的方式进行监听：

watch(props.xxx, ()=>{
})

但是这种方式会提示你，不能对props参数进行监听，经过查找一番才知道,vue3往往通过以下方式进行监听props的参数变化：

watch(()=>props.xxx, ()=>{
})

于是这样就成功解决了父组件向子组件传值的问题。

子组件更新

  同样，天真的我以为子组件的更新应该能实时传给父组件的吧，毕竟我也是通过v-model双向绑定的。事实上，子组件参数的更新想要实时反应给props参数，也是需要通过一些方式的，在vue3中一般是通过context.emit来实现：

props:{
xxx:Number
}
setup(props,context){
const xx = ref(xxx)
function change(){
context.emit('update:xxx',xx.value)
}
}

同步和异步执行

  作为之前只懂java开发的我，对于同步和异步只有一个大概的概念，知道又这么一回事，但是却并不理解其中到底有多大的区别，但是在进行这次前端开发的练习中，才知道js里面，这个概念特别重要。
  在vue.js中，为了提高效率，默认是异步执行函数，所以不存在所谓的“等”的概念，从而会出现一些数据获取异常的情况：
  比如在获取用户信息的时候，需要将这些信息实时地发送给后端。在这个过程中，获取信息和发送信息是两个函数来实现，但是它们必须有明确的顺序，如果不设置同步，会导致数据还未获取，就将数据发送给了后端，导致得不到想要的响应。
  在vue3中，我常常喜欢如此来实现同步执行的效果：

async function xxx(){
await fun1()
await fun2()
}

如此实现了先执行fun1，再执行fun2。

对象的拷贝

  js的拷贝也是一门学问，常规的"="在进行基础数据类型的赋值时特别好用，但是在进行对象之间的赋值的时候，就有太多的限制，往往会导致对象A的属性赋值给对象B，对象A的属性发生变化，从而对象B的相关属性也会发生变化，这就是浅拷贝，这在很多场景中其实并非我们想要的。
  在es6中，深拷贝有了很多种实现方式，其中我最常用的是：

var newObj = Object.assign({},oldObj)

当然，直接转化成字符串，然后再转化回来的方式也是可用的。

deep监听

  在vue3中，可以实现对对象数组和深度嵌套对象的监听，直接进行监听是监听不到的，所以要进行deep监听。
对象数组的监听：

    watch(()=> [...layouts.value],
    () => {
      console.log('监听布局的变化');  
      console.log(layouts.value); 
    },
    {deep: true}
  )

对象的监听：

   watch(()=> [layouts.value],
  () => {
    console.log('监听布局的变化');  
    console.log(layouts.value); 
  },
  {deep: true}
)

总结

  本人作为菜鸟一枚，也是第一次发相关的博客，只为记录自己遇到的坑，如果有访问的大神对我能有一些建议那就太好了，我也会继续努力学习相关技术，然后将它们记录下来。