Vue中set的使用,Vue中set与$set的区别

Vue.set(data,key,value);
data可以是Array or Object
在Vue中直接操作数组的下标,会改变数组,但是不会更新页面真实DOM,
原因是受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的.
例如

<div id="app">
   <div v-for="(item, index)  of  list">
       {{ item }} -----  {{ index }}
   </div>
</div>

<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data: {
               list: [1,2,3]
         }
})
</script>

在浏览器中会展示出
1
2
3
在浏览器控制台运行

vm.list[3]=4

在浏览器中会展示出
1
2
3
真实数据已经更新
在浏览器控制台运行

console.log(vm.list)

浏览器会输出
[1,2,3,4]
这就是数据改变,页面不改变
使用set可以避免这种情况出现

Vue.set(vm.list,3,4)

在浏览器中会展示出
1
2
3
4
或者调用vm实例上的$set方法

vm.$set(vm.list,4,5)

或者使用数组的变异方法

vm.list.splice(4,0,5)

或者直接改变数组的引用

vm.list = [1,2,3,4,5]

想要清空数组的某一项使用
Vue.delete(data,key) 或者使用实例上的 $delete(data,key)方法
也可以使用
obj.splice(index,length,data(可选))// 从哪开始,删除多少项,删除之后添加什么

<div id="app">
   <div v-for="(item, key, index)  of  list">
       {{ item }} --- {{ key }} ----- {{ index }}
   </div>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data: {
        list:{
              name: "css3html5",
              salary: "I know"
            }
         }
})
</script>

对象 of 出三种参数,value key index
在这里插入图片描述
直接使用

vm.list.age = 26

在浏览器中会展示出
css3html5 — name ----- 0
I know — salary ----- 1

在浏览器控制台运行

console.log(vm.list)

控制台输出
{age: 26, ob: Observer}
age: 26
name: (…)
salary: (…)

数据改变页面不改变
这时候可以使用Vue.set(vm.list,“age”, 26) /// 注意使用vm.list.age添加过的对象,再次用set添加age页面响应无效

直接改变对象原有的属性,页面会响应,直接添加新属性,页面不响应,需要使用set,或者直接改变整个引用

Vue中set的使用,Vue中set与$set的区别

猜你喜欢