vue.js踩过的一些坑

1.在vue中，数据变化本应驱动视图更新的。但有种情况下并不会，即数据为对象时，为该对象添加属性（注意是添加，不是改变或赋值），而后再改变此条属性的值时，视图则不会更新。

			<li v-for="menu in totalMenuList">
                            <span class="button level0 switch roots_open" @click="menu.open=!menu.open"></span>
                            <span class="checkbox_true_full button chk"></span>
                            <a class="level0" :title="menu.meuName">
                                <span class="button" :class="[menu.subs?(menu.open?'ico_open':'ico_close'):'ico_docu']"></span>
                                <span>{{menu.meuName}}</span>
                            </a><ul class="level0 line">
                                <li class="level1" v-for="submenu in menu.subs">
                                    <span class="button level1 switch center_docu"></span>
                                    <span class="checkbox_true_full button chk"></span>
                                    <a class="level1" :title="submenu.meuName">
                                        <span class="button ico_docu"></span>
                                        <span>{{submenu.meuName}}</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

在此段代码中，假如menu.open属性为totalMenuList赋值后再添加的，那么就会产生上述问题。

所以，应该把open属性在给totolMenuList赋值之前就加上去，如下。

//菜单列表
                        data.roleMenuManageList.forEach((item) =>{
                            item.open = true;
                        });
                        this.totalMenuList = data.roleMenuManageList;

2.在将一个对象的值用等号“=”复制给另一个对象时，实际上只是将被复制的对象的引用地址复制给了新对象。这样会产生一个问题即：改变新对象某些属性的值时，实际上也将原对象的值改了，这样可能会产生难以察觉的bug。因此，在进行对象复制时，建议采用深拷贝的方式，如Object.assign方法；angular中有angular.copy;

3.在data(){}对象中定义的变量，初始化值最好直接在data钩子中赋值。如果不在其中也不要在created钩子中赋值，因为在created钩子中赋值后会被data钩子中定义给覆盖掉。如下代码：

	data (){
            return {
                firstQuery:false,//是否第一次查询，每个组件统一保留
                routerViewIsShow:true,//页面隐藏出现，模拟刷新效果
                selectRoleId:_public.getCookie('rleId'),//查询参数
                roleManageList:[],//所有角色种类查询结果
                selectRoleIndex:0,
                roleMenuList:[],//当前角色可管理菜单查询结果
                totalMenuList:[]//所有菜单查询结果
            }
        },
        //是否重新打开的页面，是则重新获取数据，每个页面统一保留
        activated (){
            if(this.closedTab || this.firstQuery){
                return;
            }
            this.init();
        },
        created (){
            this.firstQuery = true;
            // this.selectRoleId = _public.getCookie('rleId');
            console.log(_public,this.selectRoleId);
            this.listQuery();
            console.log('a');
        },