vue 爬坑小记（1）

使用 vue 开发的过程中，在将 vue 实例 data 中的一个对象添加到数组中时产生了一个小问题。起初我的代码是这样的（简化版）：

export default({
           data() {
                   return{
                         arts:[],
                         newArt:{
                               "title":"";
                                }
                          }
             }
       })

具体的实现是用 v-model 将 title 绑定到一个 input 元素，在改变 input 元素后，通过按钮绑定一个点击事件，将改变了 title 的 newArt 添加到 arts 数组中。然后通过 vue 的列表渲染将 arts 展示到页面。最初将改变的对象添加到数组中的代码如下：

this.arts.push(this.newArt)

结果发现，当我添加了两个以上对象后，后面的对象全部与前面的一样。也就是说数组中的每个元素都是对同一个对象的引用。于是我将代码改为：

   var art = this.newArt;
   this.arts.push(art);

浏览器报错，没有发现 title 属性。这是因为对象不可以直接拷贝，利用 assign 函数实现了想要达到的效果：

var art = Object.assign({},this.newArt);
this.arts.push(art);

assign 函数的功能是将除了目标对象外的其他对象的可枚举属性拷贝给目标对象，并返回目标对象。第一个参数是目标对象，其余为要被拷贝的对象。

index.jpg