VUE的坑你踩过几个（语音版）
。有时候我们踩坑，是因为一些知识点不知道，按照我们自己的逻辑思维，认为应该是这样，但结果并没有按照我们想要的输出，这个时候，我们就掉坑里了。
坑一
data里的数据是对象类型，并且有多维，需要都写出来。比如：
export default {data() {return {list:{stu1:{name:""},stu2:{name:""}}}}}
如果我们只写list，程序就会报错。比如下面的写法就会报错：
export default {{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检测不到数组和对象的变化，响应式的数据必须在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 = "刘小妞的栖息地"}}