«

Vue中的MVVM模式原理是什么

时间：2024-8-4 06:40     作者：韩俊     分类： Javascript

这篇文章主要介绍“Vue中的MVVM模式原理是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中的MVVM模式原理是什么”文章能帮助大家解决问题。

    1. MVVM模式

    传统的组件是静态渲染，数据更新需要操作DOM。Vue框架采用了MVVM(Model-View-ViewModel)模式来管理应用程序的数据模型(Model)和视图界面(View)的交互，即数据驱动视图，从而避免了操作DOM。

    MVVM的基本思想是将模型数据和用户视图解耦(Decoupling)，即Model和View分离开来，使得它们之间的依赖关系降到最小。然后通过ViewModel来协调它们之间的通信。当Model发生变化时，我们不需要手动更新View，而是可以通过Vue的响应式机制，让Vue自动更新View。同样，当用户与View交互时，我们也不需要手动修改Model，而是可以通过Vue的指令和事件机制，让Vue自动更新Model。这种解耦机制使得我们可以更加专注于业务逻辑的实现，而不需要过多地关注View和Model之间的细节。

      Model：Vue应用程序中的数据模型，通常是一个JavaScript对象或数组。这些数据模型被存储在Vue实例的data属性中。

      View：Vue应用程序中的视图界面，通常是由HTML模板和Vue指令组成的。Vue的模板语法允许开发人员在HTML中绑定数据和表达式，以实现动态更新。

      ViewModel：ViewModel是Vue应用程序的核心，它是一个Vue实例，它充当Model和View之间的桥梁。ViewModel负责管理数据和行为，它可以将Model数据绑定到View上，同时也可以响应View上的事件和用户交互。ViewModel中包含了一个Watcher和Directive，它们可以监听Model数据的变化，并自动更新View。

    2. Vue响应式

    Vue的响应式机制是指当Vue实例中的数据发生变化时，与之关联的视图会自动更新。实现Vue响应式机制需要借助ES5的

    Object.defineProperty()
    方法，使用该方法监听对象属性的变化。

    Object.defineProperty(obj, prop, descriptor)
    用来定义对象的属性。函数中传入三个参数，
    obj
    表示要定义属性的对象，
    prop
    表示要定义的属性名，
    descriptor
    是一个包含属性描述符的对象。下面这段代码是该函数的基本使用：

    let data = {};
let name = '小明';
Object.defineProperty(data, "name", {
    get: function(){
        console.log('get')
        return name
    },
    set: function(newValue){
        console.log('set')
        name = newValue
    }
})
// 测试
console.log(data.name)
data.name = '小红'
console.log(data.name)

    3. Vue监听对象

    3.1 监听普通对象

    以下代码模拟了的监听对象的过程，当data对象中的数据发生变化时，就会调用

    updateView()
    函数，触发视图更新。

    // 触发视图更新，模拟Model变化后，View发生改变，简单起见就直接打印一个结果
function updateView(){
    console.log('视图更新')
}
// 重新定义属性，实现对数据的监听
function defineReactive(target, key, value){
    // 核心 API
    Object.defineProperty(target, key, {
        get(){
            return value
        },
        set(newValue){
            if(newValue !== value){
                value = newValue
                updateView()
            }
        }
    })
}
// 监听对象属性
function observer(target){
    // 如果监听的数据类型不是对象，直接返回原数据
    if(typeof target !== 'object' || target === null){
        return target
    }
    // 重新定义对象的每个属性
    for(let key in target){
        defineReactive(target, key, target[key])
    }
}
// 数据
let data = {
    name: '小明',
    age: 20,
    info: {
        address: '北京'
    }
}
// 监听数据
observer(data)
// 测试
data.name = '小红'
data.age = 21
data.name  // 会触发getter函数
data.age

    3.2 监听复杂对象（深度监听）

    假如数据对象中还包含对象，此时就需要进行深度监听，例如data中的

    info
    数据。只需要在上述的
    defineReactive()
    函数中，再次调用
    observer()
    函数，对传入的对象的属性值
    value
    进行监听。

    设置新值时，如果设置的值还是一个对象类型，此时还需要对新值进行监听。

    function updateView(){
    console.log('视图更新')
}
// 重新定义属性，实现对数据的监听
function defineReactive(target, key, value){
    // 再次对传入的对象的属性值调用监听函数
    observer(value)
    // 核心 API
    Object.defineProperty(target, key, {
        get(){
            return value
        },
        set(newValue){
            // 对新设置的值进行监听
            observer(newValue)
            if(newValue !== value){
                value = newValue
                updateView()
            }
        }
    })
}
// 监听对象属性
function observer(target){
    // 如果监听的数据类型不是对象，直接返回原数据
    if(typeof target !== 'object' || target === null){
        return target
    }
    // 重新定义对象的每个属性
    for(let key in target){
        defineReactive(target, key, target[key])
    }
}
// 数据
let data = {
    name: '小明',
    age: 20,
    info: {
        address: '北京'
    }
}
// 监听数据
observer(data)
// 测试
data.name = '小红'
data.age = {num: 21}
data.age.num = 22  
data.info.address = '上海'

    4. Vue监听数组

    // 触发更新视图
function updateView() {
    console.log('视图更新')
}
// // 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
// 对数常用的方法进行扩展
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
    arrProto[methodName] = function () {
        oldArrayProperty[methodName].call(this, ...arguments)
        updateView() // 触发视图更新
        Array.prototype[methodName].call(this, ...arguments)
    }
})
// 重新定义属性，监听起来
function defineReactive(target, key, value) {
    // 深度监听
    observer(value)
    // 核心 API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                // // 深度监听
                observer(newValue)
                // 设置新值
                // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
                value = newValue
                // 触发更新视图
                updateView()
            }
        }
    })
}
// 监听对象属性
function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象或数组
        return target
    }
    // 修改数组的原型
    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }
    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}
// 准备数据
const data = {
    // name: '小明',
    // age: 20,
    // info: {
    //     address: '北京' // 需要深度监听
    // },
    nums: [10, 20, 30]
}
// 监听数据
observer(data)
// 测试
data.nums.push(4) // 监听数组

    5. 使用 Object.defineProperty 监听数据的缺点

      深度监听需要对数据对象递归到底，一次性计算量大。

      如果数据新增属性和删除属性，则无法监听到，需要使用 

      Vue.set()
      和 
      Vue.delete()
      方法。

      无法原生监听数组，需要特殊处理。

    标签: javascript vue

    热门推荐

    1 vue项目遇见事件冒泡该怎么处理
    2 JavaScript常用字符串与数组扩展函数小结
    3 vue项目首次打开时加载速度很慢怎么优化
    4 javascript怎么解决base64乱码
    5 js中对象的声明方式以及数组的一些用法示例
    6 vue选项卡如何切换
    7 js 判断一个数字是不是2的n次方幂的实例
    8 JavaScript中的acos()方法使用详解
    9 jQuery 1.9.1源码分析系列（十三）之位置大小操作
    10 antd中select搜索框改变搜索值问题怎么解决

    日历

    标签

    hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

    搜索

    最新文章

    热门文章