深入响应式原理

最新推荐文章于 2025-12-16 16:02:25 发布

原创最新推荐文章于 2025-12-16 16:02:25 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java #python #javascript #react

Vue的响应式系统基于数据劫持和依赖收集，当修改数据时，视图会自动更新。文章详细介绍了如何通过Vue.set方法为嵌套对象添加响应式属性，并指出Vue无法检测到对象属性的新增或删除。同时，它不支持在实例创建后添加新的根级响应式属性。

Vue 最显著的特性之一是响应式系统(reativity system)。

模型层(model)只是普通的JavaScript 对象，修改它则更新视图(view)。

每个组件实例都有相应的watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter 被调用时，会通知watcher 重新计算，从而致使它关联的组件得以更新。

注：Vue 不支持IE8 以及更低版本浏览器

变化检测问题

Vue 不能检测到对象属性和添加或删除。

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

 1     <script>
 2         var vm= new Vue({
 3             data:{
 4                 a:1
 5             }
 6         })
 7         // vm.a 是响应的
 8         vm.b=2
 9         //vm.b 是非相应的
10     </script>

Vue 不允许在已创建的实例上动态添加新的根级响应式属性(root-level reactive property)。

然而使用Vue.set(object, key, value) 方法将相应属性添加到嵌套对象上。

1       var vm=new Vue({
2           el:'#example',
3           data:{
4               a:'b',
5               b:[1,'b',3,4]
6           }
7       })
8       Vue.set(vm.b,1,10)
9       vm.$set(vm.b,5,11)