变化检测
When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty. This is an ES5-only and un-shimmable feature, which is why Vue doesn’t support IE8 and below.
The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so you may want to install vue-devtools for a more inspection-friendly interface.
Every component instance has a corresponding watcher instance, which records any properties “touched” during the component’s render as dependencies. Later on when a dependency’s setter is triggered, it notifies the watcher, which in turn causes the component to re-render.
文章图片
【变化检测】Change Detection Caveats
Adding new properties to an object
Setting items on an array
Setting the length of an array
Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:
Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object
推荐阅读
- Java|Java OpenCV图像处理之SIFT角点检测详解
- 【变化】我的青椒学习之旅
- JS常见数组操作补充
- 来日方长并不长
- 最近的小变化
- 霍夫变换与直线检测
- hough变换检测的matlab程序
- Android智能手表MMI测试检测系统
- 培养习惯的倦怠期可以添加变化~74
- 『47』应对变化最好的办法就是不断学习