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 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17144.html