vue实例中的知识点

1.前端的数据存储使用window.localStorage，使用localStorage接口可以数据直接存储在浏览器里。
两个重要的方法：
localStorage.setItem(‘myCat’, ‘Tom’);//（键，值）
let cat = localStorage.getItem(‘myCat’);
localstorage的封装

/*作用：把原生的localStorage封装，使它在我们这个项目中更好用，更方便*/
/*做两个方法，并把它暴露出去*/
/*通过定义一个匿名函数，创建了一个新的函数作用域，
相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。*/
;(function(){
    /*把方法暴露出去*/
    window.ms = {
        set: set,
        get: get,
    };
    /*存数据的方法*/
    function set(key, val){
        localStorage.setItem(key, JSON.stringify(val));/*将传进来的值转换成json字符串。*/
    }
    /*取数据的方法*/
    function get(key){
        var json = localStorage.getItem(key);
        if(json)
        {
            return JSON.parse(json);
        }
    }
})();
/*在另一个文件中使用
* ms.set('name', '王花花');
* var val = ms.get('name');
* console.log(val);
* */
* 

2.Object.assign() 方法用于将所有可枚举属性的
值从一个或多个源对象复制到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);


console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

复制一个对象

add: function(){
       if(!this.current.title && this.current.title !== 0)
        {
            return;
        }else{
           /*this.list.push(this.current);*/
           /*this.current一直是个引用，并没有拷贝数据，需要用Object.assign(target,source)来拷贝一个对象*/
           var todo = Object.assign({},this.current);
           this.list.push(todo);          
            }
        }

3.组件：
watch： 监测list的变化，只要他有变化，就执行handler方法。

watch: {
            list: {
                deep: true,
                handler: function(n,o){
                    if(n)
                    {
                        ms.set('list',n)
                    }else{
                        ms.set('list',[])
                    }

                }

            }
        }

4.vue中修改数组元素的方法

Vue.set(this.list,index,copy(this.current));
/*this.list[index] = copy(this.current);*/

//给数组元素对象设置属性。
Vue.set(this.list[index], 'completed',!this.list[index].completed);
/*this.list[index].complete = !this.list[index].complete;*/

 Vue.set(me.list[i],'alert_confirm',confirmed);