<template> {{ obj.c }} </template> <script> export default { data: { obj: { a: 1 }, }, mounted() { this.obj.c = 3 } } </script>
这个例子中,对obj上原本不存在的c
属性进行了一个赋值,但是在Vue2中,这是不会触发视图的响应式更新的,
这是因为Object.defineProperty必须对于确定的key
值进行响应式的定义,
这就导致了如果data在初始化的时候没有c
属性,那么后续对于c
属性的赋值都不会触发Object.defineProperty中对于set
的劫持,
在Vue2中,这里只能用一个额外的api Vue.set
来解决