关于前端:vue中-thisset的使用

4次阅读

共计 1037 个字符，预计需要花费 3 分钟才能阅读完成。

背景：在我写前端我的项目的时候，后端给咱们的一个 json 对象，并且我曾经渲染在页面上了。然而因为我本人的需要，想往返回的对象外面增加一个字段，于是我用 push 一个字段进去, 增加是增加进去了，然而页面渲染却没有变动。起初才意识到不是响应式的。如果咱们要让这个新字段是响应式的，就要应用到 this.$set 来注入数据

以后端培训技术中 vue 的 data 里边申明或者曾经赋值过的对象或者数组（数组里边的值是对象）时，向对象中增加新的属性，如果更新此属性的值，是不会更新视图的。

应用
this.$set(target, key, value) target：示意数据源，即是你要操作的数组或者对象，key：要操作的的字段，value：更改的数据

来个小案例：

给一个对象增加一个年龄属性并且让它能够响应式的进行扭转

  <p>{{list}}</p>
  <button @click="add">age++</button>

</div>

</template>
<script>
export default {

data(){
    return {list:{ name: "张三"}
    }
},
methods: {add(){if(!this.list.age){ // 如果没有 age 属性就给它增加一个 age 属性
            this.list.age=18
        }else{this.list.age++}
        console.log(this.list)
    }
}

}
</script>

当咱们没有应用 this.$set 去增加对象属性的时候，成果：

数据的确曾经增加进去了，然而页面并没有响应式的渲染 age 属性。

当咱们应用 this.$set(this.list,‘age’,18) 去增加一个属性之后。成果：

咱们能看见增加的数据是响应式的。

为什么可能响应式？
仔细观察一下，应用了 this.$set 多了 get age 和 set age 办法，这正是可能响应式的起因

剖析
Vue 的响应式原理为 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。这些 getter/setter 对用户来说是不可见的，然而在外部它们让 Vue 可能追踪依赖，在 property 被拜访和批改时告诉变更。这里须要留神的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，下图来自官网文档。

正文完