对VUE的简单理解

对于MVVM的理解

  • MVVM 是 Model-View-ViewModel 的缩写。
  • Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
  • View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
  • ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
  • 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。
  • Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
  • ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉。
  • 因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

对于MVC的理解

  • Controller 代表控制器，是应用程序中处理用户交互的部分。
  • 一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

Vue的生命周期

  • Vue 实例从创建到销毁的过程，就是生命周期。

    从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。它可以总共分为8个阶段：初始化前/后, 载入前/后,更新前/后,销毁前/销毁后。

Vue的双向绑定原理

  • vue.js 是采用数据劫持结合发布者-订阅者模式的方式实现MVVM的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，对视图进行更新。 

    通过Object.defineProperty( )对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面，就可以实现data更新view了，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

  • js实现简单的数据绑定

    <body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

Vue组件间的参数传递

  • 父组件与子组件传值
    父组件传给子组件：子组件通过props方法接受数据;
    子组件传给父组件：$emit方法传递参数
  • 非父子组件间的数据传递，兄弟组件传值
    eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。
    vuex。
posted @ 2019-09-09 01:47  迷糊的小元宝  阅读(1047)  评论(0)    收藏  举报