vue.set()怎么使用?

vue.set()怎么使用?下面本篇文章给大家介绍一下Vue.set()方法的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Vue.set()方法的使用

在介绍Vue.set()方法之前,我们先了解一下vue响应式的原理。

一、vue如何追踪变化

当你把一个普通的JS对象传给vue实例的data选项时,vue将遍历此对象的所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty是ES5中一个无法shim的特性,这也就是为什么vue不支持IE8以及更低版本的浏览器。

二、为什么使用Vue.set()

因为受现代JS的限制,vue不能检测到对象属性的添加或删除。

由于vue会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在data对象上存在才能让vue转换它,这样它才能是响应的。

vue不允许在已经创建的实例上动态添加新的根级响应式属性,不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。

三、使用方法

Vue.set(object, key, value)

举个例子:

export default() {
  data() {
    food: {
      name: 'apple' 
    }
  }
}
...
Vue.set(food, 'count', 1);

更多web开发知识,请查阅 HTML中文网 !!

以上就是vue.set()怎么使用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏