对于vue的理解

191 阅读2分钟

vue叙述

vue 是一个用于创建用户界面的免费的javascript开源框架,为了更好的组织与简化web开发,
它所关注的是MVC中的视图层,同时它也能很好的获取数据更新,并且根据组件内部特定的方法
实现视图和模型的交互 

vue核心特性

数据驱动(MVVMMVVM 表示的是 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