vue

Vue和传统模式的区别

• 前后端分离的模式
• 模块化思想，使得层次分明，用于后期维护
• MVVM模式，使得代码耦合度不高

vue的优点

• 轻量级框架（只关注视图层）
• 双向绑定数据
• 组件化思想
• 试图、数据、结构分离
• 虚拟DOM
• 运行速度快

MVVM框架

• 是一种软件架构模式，是MVC的加强版
• Model层：模型层。数据层的域模型，主要用于抽出VM层中视图的Model
• View层: 视图层。用于数据绑定的声明、指令的声明、时间绑定的声明
• ViewModel层：数据驱动。把V层需要的数据暴露，并对V层的“数据绑定声明、指令声明、事件绑定声明”负责
• 优点：
  分离试图、模型，降低代码耦合，提高复用性
  提高可测试性
  自动更新DOM
• 缺点：
  Bug很难调试
  长期不释放内容，可能会造成性能开销
  对于大型项目，VM的构建和维护成本可能会很高

Vue的四个方法

• state：存储数据源 this.$store.state.xxx获取 (xxx 指的是全局数据的名称，自拟)
  state用于提供唯一的公共数据源，所有共享数据都要放到state中存储
• mutations:改变数据源的方法 this.$store.commit(' ')触发
  用于改变$store中的数据，在此不能写异步代码
• actions: 异步分发mutations this.$store.dispatch(' ')触发
• getters:获取数据，在compted中 this.$store.getters.xxx获取
  对store中的数据进行加工处理，形成新的数据，只用于包装数据，不会修改原数据

Vue的两个核心

• 数据驱动：ViewModel,保证数据和视图的一致性
• 组件系统：应用类UI可看作是 所有是由组件树构成的

Vue常用修饰符

• .stop：防止事件冒泡
• .prevent:防止执行预设行为
• .capture:事件捕获，由外到内，正好与冒泡事件的方向相反
• .self：只会触发自己范围内的事件，不包含子元素
• .once：只会触发一次