深入理解 Vue 中的 $set 概述: 在 Vue 开发中,经常会遇到一种情况:当生成 Vue 实例后,再次给数据赋值时,有时候并不会自动更新到视图上去。这是因为 Vue 在实例创建之后添加新的属性到实例上时,它不会触发视图更新。为了解决这个问题,我们需要使用 Vue 的 $set 方法或实例方法 $set 来设置数据属性。 什么是 $set? $set 是 Vue 提供的一个全局方法,用于设置对象的属性值。它可以确保在设置属性值时,触发视图的更新。$set 方法可以用于设置对象的任何属性值,无论是简单的字符串类型还是复杂的对象类型。 如何使用 $set? 使用 $set 方法非常简单, 只需要将要设置的对象和属性值传递给它即可。例如:Vue.set(data, 'sex', '男')。这将设置 data 对象的 sex 属性值为 '男',并触发视图的更新。 实例方法 $set 除了全局方法 $set 之外,Vue 还提供了实例方法 $set。它是全局方法 $set 的别名,可以用于设置实例中的数据属性。例如:this.$set('info.'+key, 'what is this?')。这将设置实例中的 info 对象的某个属性值,并触发视图的更新。 为什么需要 $set? 在 Vue 中,如果我们直接给数据赋值时,不使用 $set 方法,可能会出现视图不更新的情况。这是因为 Vue 只会在实例创建时遍历对象的属性,并将它们转换为 getter/setter。如果我们在实例创建之后添加新的属性到对象中,Vue 并不会自动将其转换为 getter/setter,导致视图不更新。使用 $set 方法可以确保在设置属性值时,触发视图的更新。 结论: 在 Vue 开发中,$set 方法是一个非常重要的工具,用于设置对象的属性值并触发视图的更新。通过使用 $set 方法或实例方法 $set,我们可以确保在设置数据属性时,视图总是更新的。
- /*----无忧----*/2021-03-09完全的标题党,只是简单讲了一下 set 方法的使用而已,和深入没有半毛钱关系,源码都没有讲到,就更不用提什么 Object.defineProperty 之类的东西了,垃圾
- 粉丝: 9
- 资源: 933
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助