vue叙述
vue 是一个用于创建用户界面的免费的javascript开源框架,为了更好的组织与简化web开发,
它所关注的是MVC中的视图层,同时它也能很好的获取数据更新,并且根据组件内部特定的方法
实现视图和模型的交互
vue核心特性
数据驱动(MVVM)
MVVM 表示的是 Model View viewModel
Model:模型层 负责处理业务逻辑以及服务端交互
View:视图层 负责将数据模型转化为UI展示出来 简单理解就是html
viewModel: 视图模型层 是模型和视图之间交流的桥梁
组件化
组件化:就是将图形、非图形的各种逻辑抽象为一个统一的概念(组件)来实现开发的模式在vue
中每一个.vue文件都可以视为一个组件
优势:
1. 降低整个系统的耦合度 易于维护
2. 调试方便,易于快速定位问题
3. 提高可复用性
指令系统
解释:指令(Directives)是带有v-前缀的特殊属性
作用:当表达式的值改变时,将产生的影响,响应式的作用于相关dom
常用的指令
- v-if 条件渲染指令
- v-for 列表渲染指令
- v-bind 属性绑定指令
- v-on 事件绑定指令
- v-model 双向数据绑定指令
vue和传统开发的区别
vue所有的界面事件,都只是去操作数据,比如JQuery时操作Dom
vue所有的界面变动,都是根据数据自动绑定出来的,JQuery时操作dom
Vue和React的对比
相同点:
- 都有组件化思想
- 都支持服务端渲染
- 都有虚拟Dom
- 都是数据驱动视图
- 都有支持native的方案: vue的weex react的 react native
- 都有自己的构建工具: vue的vue-cli、react的create React App
区别:
- 数据流向不同:react从诞生就开始推崇单向数据流,vue是双向数据流
- 数据变化实现原理不同:react实现的是不可变数据 vue是可变数据
- 组件化通信不同:
react中使用回调函数进行通信,
vue中的子组件向父组件传递信息的两种方式:事件和回调函数
- diff 算法不同
react主要是使用diff队列保存需要更新哪些dom,得到patch树再统一批量更新dom
vue 使用双向指针 边对比,边更新dom