VUE 的坑你踩过几个

<

div>

    <span>喜欢我的话，点击上方</span>
    <span>蓝色</span>
    <span>文字关注吧:point_up_2:</span>


    <span>
        <span>不喜欢看文字的同学，点击下方:point_down:</span>
        <strong>
            <span>绿色按钮</span>
        </strong>
        <span>

，竖起耳朵:ear:听吧
。

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

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

<pre><span>export <span>default</span> {</span>

data() {

return {

list:{

stu1:{

name:“”

},

stu2:{

name:“”

}

}

}

}

}

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

export default {

  data() {

      return {

        list:{}

      }

  }

}

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

坑二

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

<pre><span><div>{{test.id}}</div></span>

export default {

data() {

return {

test : {‘name’:‘刘小妞’}

}

},

mounted() {

this.test.id = “123”

console.log(this.test)

}

}

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

    <img src="https://img1.tuicool.com/iYNZNrv.png!web">
这是因为Vue检测不到数组和对象的变化，响应式的数据必须在data对象上存在。但是，有时候我们需要给对象或者数据添加或者删除一些属性。为了解决这个问题，可以用VUE的set方法。把上面赋值代码改成如下：
<pre><span> mounted() {</span>

this.$set(this.test, ‘id’, “123”)

}

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

$set三个参数：
第一个：添加属性的对象；
第二个：添加的属性；
第三个：添加的属性值；
坑三
组件传值，父组件传给子组件的值，需要调用接口返回。在子组件的mounted和created里打印接收的值为空。

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

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

    <span>我们可以用</span>
    <span>watch。</span>


    <span>watch是用来监听数据变化的</span>
    <span>。</span>

我们可以在watch里监听父组件传过来的值。比如：
<pre><span><span>export</span> <span>default</span> {</span>

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':'刘小妞'},

      }

   }

}




//子组件



 

{{test.name}} 

</div>




export default {

     props:{test:Object},

     created: function () {

       this.test.name = "刘小妞的栖息地"

     }

}

往期 精彩
回顾

VUE组件之间的通信（语音版）

VUE兄弟组件之间的通信（语音版）

Nuxt部署的坑