1. Vue.set

     可以设置对象或者数组的值, 通过key或数组索引, 可以触发视图更新

    语法:

            Vue.set(target,propertyName/index, value)

            参数:  {object | Array } target  修改的数组或者对象

                       {string | number } propertyName/index     修改的对象名或者对应的下标

                       {any} value  修改成功的值

                      Vue.set(app.arr,1,'qq')

            返回值: 设置的值

            用法:

               向响应式对象中添加一个property,并确保这个新property同样是响应式的,且触发试图更新

               它必须用于向响应式对象上添加新的property,因为Vue无法探测普通的新增 property

         Vue.set(array, indexOfItem, newValue)

         this.array.$set(indexOfItem, newValue)      //数组 

        Vue.set(obj, keyItem, newValue)

        this.obj.$set(keyItem, newValue)               //对象

2. Vue.delete

     删除对象或数组中的元素, 通过key或者数组索引,可以触发视图更新 

语法:

      Vue.delete(target, key)

      参数:  {object | Array} target

                {string | number} key/index

      用法: 删除对象的属性

3. 数组对象直接修改属性,可以触发视图更新

this.array[0].show = true;

this.array.forEach(function(item) {

      item.show = true;

})

4. splice方法修改数组,可以触发视图更新

splice(index,len,[item])

参数: index: 数组下标

         len: 替换/删除的长度

         item: 替换的值,删除操作的话 item为空

//删除 

var arr = ['祁醉','丁汉白','贺朝','严娜'];

arr.splice(0,2);

console.log(arr.toString());      // ['贺朝','严娜']

//替换

var arr = ['穗禾','润玉','锦觅','旭凤'];

arr.splice(0,2, ['李云恺','柳千仁','柏海']);

console.log(arr,toString())    // ['李云恺','柳千仁','柏海',锦觅','旭凤']

//添加

var arr = ['a','b','c','d'];

arr.splice(1,0, ''ttt");

console.log(arr)    // ['a','ttt','b','c','d']

5. 数组赋值为新数组,可以触发视图更新

this.array  = this.array.filter(....)

this.array = this.array.concat(....)

     filter 过滤器

全局过滤器: Vue.filter("globalFilter", function(value) {      

})

局部过滤器

filters: {

     componentsFilter: function(value) {

    }

}

concat() 基于当前数组的所有项创建一个新数组

var arr = [`大漠`,'30','W3cplus'];
console.log(arr); // ["大漠", "30", "W3cplus"]
var arr2 = arr.concat('Blog','2014');
console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]

6. 用Object.assign或lodash.assign可以为对象添加响应式属性,可以触发视图更新

//Object.assign的单层的覆盖前面的属性,不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})

//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})

//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐