VUE2原理

海阔凭鱼跃学习笔记

已于 2023-02-18 20:33:44 修改

阅读量120

点赞数

分类专栏：前端学习笔记文章标签：前端 vue.js javascript

于 2023-02-18 19:21:36 首次发布

本文链接：https://blog.csdn.net/qq_37633967/article/details/129094557

版权

前端学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

系列文章目录

前言

一、MVVM

二、vue响应式

三、虚拟DOM（Virtual DOM）和diff

前言

vue原理相关

一、MVVM

MVVM，是Model-View-ViewModel三部分组成。

二、vue响应式

核心API-Object.defineProperty

Object.defineProperty缺点：

深度监听，需要递归到底，一次性计算量大
无法监听新增属性、删除属性（Vue.set Vue.delete）
无法原生监听数组，需要特殊处理

如何监听数组

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 oldArrayProperty = Array.prototype;
// 创建新对象，原型指向 oldArrayProperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push','pop','shift','unshift','splice'].forEach(methodName => {
    arrProto[methodName] = function() {
        undateView();    // 触发视图更新
        oldArrayProperty[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()
            }
        }
    )
}