vueJS如何实现单向数据传递？

Question

      var vm = new Vue({
            data: {
                items: [],
                item:{}
            },
            methods: {
                //这个item 是items中的某一个
                editItem:function (item) {
                  
                    this.item = item;
                     
                    //修改item 会导致items中的数据也被修改了
                }
            }

请问下如何实现，修改item而items不变？

Answer 1

引用类型在内存中是指向同一个内存，只是用简单的this.item = item进行赋值的话两个看起来不同的变量实际上指向的是同一个内存，也就造成“双向绑定”的错觉，并非Vue造成的。
解决方案：
1、Object深拷贝:如楼上所述；
2、使用json.parse：

this.item = JSON.parse(JSON.stringify(item))

Answer 2

http://vuejs.org.cn/guide/com...

注意如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。

---

http://www.zhihu.com/question...

Answer 3

简单的做法就是直接一个个复制属性

<button type="button" v-for="item in items" @click="editItem(items[$index])">{{item.a}}</button>
<p @click="changeNewItemVal">{{item.a}}</p>
<script>
    var vm = new Vue({
        el:'body',
        data: {
            items: [{"a": 1}, {"a": 2}],
            item: {}
        },
        methods: {
            //这个item 是items中的某一个
            editItem: function (item) {
                var _item = {}
                for (var i in item) {
                    _item[i] = item[i]
                }
                this.item = _item
            },
            changeNewItemVal: function (){
                this.item.a = 4
            }
        }
    })
</script>