乐趣区

vue的核心思想数据驱动组件系统

jiezi

核心思想：数据驱动、组件系统 

Vue.js 是一个提供 MVVM 数据双向绑定的库，专注于 UI 层面，核心思想是：数据驱动、组件系统。
  • 数据驱动 — 双向数据绑定
    DOM 是数据的一种自然映射（数据驱动 DOM 变化）

  • 组件化 

     组件化就是扩展 HTML 元素，封装可重用的代码。页面被拆分为一个个小的区块，每个区块对应一个组件，组件相互嵌套就形成了一个完整的页面。在 Vue.js 中，每一个组件都对应一个 ViewModel，生成一个 ViewModel 树，ViewModel 树与 DOM 树一一对应。

    组件设计原则：

     1、页面上每个独立的可视 / 可交互区域视为一个组件。2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护。3、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

    组件的核心选项 

     1 模板（template）：模板声明了数据和最终展现给用户的 DOM 之间的映射关系。2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。3 接受的外部参数 (props)：组件之间通过参数来进行数据的传递和共享。4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新 2.0 版本对于生命周期函数名称改动很大。6 私有资源（assets）：Vue.js 当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

    注册一个组件 

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

    Webpack 是一个开源的前端模块构建工具，它提供了强大的 loader API 来定义对不同文件格式的预处理逻辑，这是.vue 后缀单文件组件形式的基础。
    所以在此基础上，尤大开发的 vue-loader 允许将模板、样式、逻辑三要素整合在同一个文件中，以.vue 文件后缀形成单文件组件格式，方便项目架构和开发引用。

    其他特性：

     1 异步批量 DOM 更新：当大量数据变动时，所有受到影响的 watcher 会被推送到一个队列中，并且每个 watcher 只会推进队列一次。这个队列会在进程的下一个 tick 异步执行。这个机制可以避免同一个数据多次变动产生的多余 DOM 操作，也可以保证所有的 DOM 写操作在一起执行，避免 DOM 读写切换可能导致的 layout。2 动画系统：Vue.js 提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的 CSS Transition 或 Animation 效果，还可以利用丰富的 JavaScript 钩子函数进行更底层的动画处理。3 可扩展性：除了自定义指令、过滤器和组件，Vue.js 还提供了灵活的 mixin 机制，让用户可以在多个组件中复用共同的特性。

Vue 组件中常见的三种传值方式：父传子、子传父、非父子传值。

        父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。1）父组件传递给子组件：通过 props 属性来实现。子组件通过 props 接受。父组件中：引入子组件 <child :inputName="name"></child>
        子组件：props: {inputName: String}
        2）子组件传递给父组件：通过 $emit 事件，发送事件名称
        子组件中：定义一个子组件传值的方法 childClick()
            <input type="button" value="点击触发" @click="childClick">

            methods: {
                <!--childByValue 是在父组件 on 监听的方法
                 第二个参数 this.childValue 是需要传的值 -->
              childClick () {this.$emit('childByValue', this.childValue)
              }

         父组件中：<!-- 引入子组件 定义一个 on 的方法监听子组件的状态 -->
                <child @childByValue="childByValue"></child>

                methods: {childByValue: function (childValue) {
                     <!--childValue 就是子组件传过来的值 -->
                     this.name = childValue
                 }
        3) 非父子组件进行传值：非父子组件之间传值，需要定义个公共的公共实例文件 bus.js, 作为中间仓库来传值，不然路由组件之间达不到传值的效果。
退出移动版