对VUE的简单理解

￡神魔★判官ぃ 2023-10-11 11:38 50阅读 0赞

## 对于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变更双向绑定效果。
 *  ![1742594-20190909013733453-1938513211.png][]
 *  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。

转载于:https://www.cnblogs.com/Ingots/p/11489498.html

[1742594-20190909013733453-1938513211.png]: https://img2018.cnblogs.com/blog/1742594/201909/1742594-20190909013733453-1938513211.png