数据驱动、组件系统。

简介

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

数据驱动

Vue.js 数据观测技术原理是基于 ES5Object.definedProperty 和存储器属性 gettersetter,可称之为基于依赖收集的观测机制。核心是 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

评论已关闭