vue的深入响应式原理、数据驱动原理、双向数据绑定原理解释

congboer

于 2019-09-25 18:12:53 发布

阅读量839

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue 双向数据绑定

本文链接：https://blog.youkuaiyun.com/congboer/article/details/101378660

Vue 专栏收录该内容

28 篇文章

订阅专栏

本文深入解析Vue.js的响应式原理，数据驱动机制及双向数据绑定机制，详细阐述了Vue如何通过数据劫持和发布订阅模式实现视图的自动更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的深入响应式原理、数据驱动原理、双向数据绑定原理解释

1、深入响应式原理：

- 数据模型仅仅是普通的javascript对象，而当你修改它们时，视图会更新

2、数据驱动原理：

- 数据改变，视图改变

3、双向数据绑定原理：

- 我们使用v-model这个指令来实现，数据改变，视图改变；视图改变，数据也随之改变。

公共答案部分：

- vue是通过数据劫持和发布订阅来实现这一功能的。数据劫持指的是vue利用ES5的
- Object.defineProperty属性对data选项中的数据进行getter和setter设置；发布订阅指
- 的是vue通过自定义事件将data的变化反应到视图上去，vue通过observe观察者对象反应
- 数据的变化，然后通知vue生成新的vdom，进而渲染视图。