那些年VUE的坑你踩过几个？有没有从坑里出来？

程序员文章站 2022-03-15 23:20:00

...

有时候我们踩坑，是因为一些知识点不知道，按照我们自己的逻辑思维，认为应该是这样，但结果并没有按照我们想要的输出，这个时候，我们就掉坑里了。

坑一

data里的数据是对象类型，并且有多维，需要都写出来。 比如：

export default {
  data() {
      return {
        list:{
          stu1:{
            name:""
          },
          stu2:{
            name:""
          }
        }
      }
  }
}

如果我们只写list，程序就会报错。比如下面的写法就会报错：

export default {
  data() {
      return {
        list:{}
      }
  }
}

如果只有一维的话，上面的写法是没问题的。

坑二

在给一个对象添加新属性的时候，我们需要用$set，否则，新添加的属性不是响应式的。也就是JS数据变了，模版里并没有变。比如：

<div>{{test.id}}</div>
<div>{{test.name}}</div>

export default {
    data() {
      return {
        test : {'name':'刘小妞'}
      }
   },
   mounted() {
      this.test.id = "123"
      console.log(this.test)
   }
 }

我们会发现模版里并没有显示出来id值，但是，console打印test，发现是有id值的。如下图：

那些年VUE的坑你踩过几个？有没有从坑里出来？

这是因为Vue检测不到数组和对象的变化，响应式的数据必须在data对象上存在。但是，有时候我们需要给对象或者数据添加或者删除一些属性。为了解决这个问题，可以用VUE的set方法。把上面赋值代码改成如下：

 mounted() {
      this.$set(this.test, 'id', "123")
 }

这样，id就是响应式的了，模版里就会显示出id的值了。

$set三个参数：

第一个：添加属性的对象；
第二个：添加的属性；
第三个：添加的属性值；

坑三

组件传值，父组件传给子组件的值，需要调用接口返回。在子组件的mounted和created里打印接收的值为空。

这是因为，调用接口的数据是异步的，父组件传给子组件值的时候，接口数据还没返回来。但是，mounted和created只执行一遍，当接口数据返回的时候，mounted和created已经执行完了，不会再执行了，所以，打印的数据是空的。

有时候，子组件接收的数据我们需要处理一下，那怎么办呢？

我们可以用watch。
watch是用来监听数据变化的。

我们可以在watch里监听父组件传过来的值。比如：

export default {
    props:{title:String},
    watch:{
      //当title发生变化时，这个函数就会执行
      title: function(newVal,oldVal){
          //newVal是变化后的值   
          //oldVal是变化前的值 
          console.log(newVal)
      }
    }
}

坑四

组件传值的时候，如果传的是字符串或者数字，我们在子组件里修改接收到的值，父组件里相应的值不会跟随改变，但是，如果传的是对象或者数组的话，当我们在子组件修改相应的值时，父组件里相应的值也跟随改变。

这是因为数字、字符串和对象、数组在创建的时候，原理是不一样的。

有时候，我们希望改变子组件接收的值，但是，父组件里并不跟随改变。
这个怎么办呢？可以这样处理一下组件传的值。写个例子：

//父组件
<div>
{{test.name}}
</div>
<C1  :test="JSON.parse(JSON.stringify(test))" />

export default {
    data() {
      return {
        test : {'name':'刘小妞'},
      }
   }
}

//子组件
<div> 
{{test.name}} 
</div>

export default {
     props:{test:Object},
     created: function () {
       this.test.name = "刘小妞的栖息地"
     }
}