vue笔记（二）：vue的核心思想之数据驱动

朱雀 2021-08-13 19:59 377阅读 0赞

**vue.js的核心思想**包括：数据驱动和组件化思想。

> 什么是数据驱动？  
> 什么是事件驱动？  
>   
> 1.事件驱动  
>   
> 所谓的事件驱动简单来说就是用户通过点击，修改，删除，输入等等，来操作DOM，并触发对应的事件，然后通过后台响应处理，随之更新UI。  
>   
> 2.数据驱动，更直白来说就是不操作DOM，用数据来渲染，通过虚拟的抽象数据层来直接更新页面。当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。那你要是想要实现数据驱动，你就需要去封装一套数据和dom对象操作的映射。

![avatar][]

Vue采用MVVM的设计模式，MVVM中的M—Model表示模型，是一个javascript对象；V-View是DOM也就是UI；ViewModel–表示的是一个Vue实例对象。  
如果没有中间的viewmodel，则view和model之间的渲染就需要咱们去手动操作DOM，这是一个很繁琐的过程，而且耗费性能。

![avatar][avatar 1]

在vue中viewmodel帮咱们省去了这一繁琐的过程，它通过directives指令去对DOM做封装。当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种功能自然的映射。  
而且vue还添加了事件监听，当我们修改视图时，vue会监听到这些改变，从而改变数据。这样就形成了双向数据绑定。

#### 那什么是组件化？ ####

> 那么什么是Vue组件呢？它是vue.js最强大的功能之一，是可扩展的html元素，是封装可重用的代码，同时也是Vue实例，可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子。

组件化使得代码中可重复利用的模块得以高效利用，减少了冗余代码，使得项目代码逐渐往高质量代码靠拢。在vue中任何一个div都可以被抽象成组件，但也不是说都抽象成组件才好，我们只是需要将那些需要重复利用的代码抽象出来，然后在多个页面重复利用，其他的业务代码就都放在一个大得组件中即可。  
那么使用组件得好处都有哪些呢？

> 提高开发效率  
>   
> 方便重复使用  
>   
> 简化调试步骤  
>   
> 提升整个项目的可维护性  
>   
> 便于多人协同开发  
>

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。也就是说组件是可复用的vue实例。

[avatar]: /images/20210813/383d4880637742e6aac2e2106b9216c3.png
[avatar 1]: /images/20210813/c7a71d6dcac2491e9c65306d37272f58.png