数据驱动、组件系统。

简介

Vue.js 是一套用于构建用户界面的渐进式框架，核心思想是：数据驱动、组件系统。

数据驱动

Vue.js 数据观测技术原理是基于 ES5 的 Object.definedProperty 和存储器属性 getter、setter，可称之为基于依赖收集的观测机制。核心是 VM（View Model），保证视频数据一致性。

基于依赖收集的观测机制原理：

  • 将原生数据改造成『可观察对象』。通过 Object.definedProperty 改变 data 对象中的数据为存储器属性。
  • 在 watcher 求值过程中（解析模板），每个被取值的 可观察对象 都会将当前 watcher 注册为自己的一个 订阅者（consumer） 并成为当前 watcher 的一个依赖
  • 当一个被依赖的 可观察对象 被赋值时，它会通知（notify）所有订阅自己的 watcher 重新求值并触发相应的更新

优点

精确、主动监测数据变化。

缺点

受 ES5 语言特性所限，对数组数据的监测并不完美。

组件系统

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

任意类型的应用界面都可以抽象为一个组件树

注册组件

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String    
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

组件核心

  • 模板（template）
  • 数据（data）
  • 参数（props）
  • 方法（methods）
  • 生命周期函数（lifecycle hooks）
  • 私有资源（assets），自定义指令、过滤器、组件等

生命周期

vue-2.0-生命周期图.png

其它特性

异步批量 DOM 更新

异步批量 DOM 更新，当大量数据变动时，所有受影响的 watcher 会被推送到一个队列中，每个 watcher 只会被推进一次，这个队列会在下一个进程 tick 时被执行。这个机制可以避免同一个数据多次变动产生的多余 DOM 操作，也可以保证所有的 DOM 操作在一起执行，避免频繁操作 DOM 带来的额外性能开销。

动画系统

Vue 提供了简单却强大的动画系统，可以通过 CSS 或 Javascript 来实现。

可扩展性

除了自定义指令、过滤器、组件，vue 还提供了灵活的 mixin 机制，让用户可以在多个组件中共用特性。

附议

  • vue.js
  • vuex
  • vue-router
  • axios
  • ElementUI
  • webpack

来源：https://www.cnblogs.com/liutie1030/p/6008869.html

标签: none

评论已关闭