Vue 进阶(九十七):对象动态添加属性和值
一、背景
当我们修改props
或者data
属性的时候,不能直接修改,必须使用Vue.set
方法。
Vue.set
方法用来修改对象属性。如果要增加属性所属对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新。
二、基础知识
注:所修改的对象必须为响应式对象,且操作响应式对象的属性也必须是响应式的,能够触发视图更新。否则浏览器JS
将无法解析,从而报错。
二、示例代码
这里定义了一个列表数据,将通过 2 个不同的按钮来控制列表数据。
复制代码
点击第一个按钮后,运行methods
中的 btn2Clcick 方法,将 Test one 更改为 Change Test。
值得注意的是:当写惯了JS
之后,有可能我们会想改数组中某个下标中的数据,直接 this.items[XX]就改了,如:
复制代码
进入控制台一探究竟:
这种情况,是Vue
文档中明确指出的注意事项,由于 JavaScript
的限制,Vue
不能检测出数据的改变(脏数据),所以当我们需要动态改变数据的时候,Vue.set()
完全可以满足我们的需求。
点击【为 data 新增属性】按钮,查看 console:
可以看出,Vue.set()
不仅能修改对象数据属性,还能添加对象数据属性,弥补了Vue
数组方法的不足。
拓展阅读
版权声明: 本文为 InfoQ 作者【华强】的原创文章。
原文链接:【http://xie.infoq.cn/article/ba0f519c26b0788e0833c8412】。文章转载请联系作者。
评论