Vue - 基础篇 - 框架介绍和原理

南门酒巷

已于 2024-04-10 21:56:45 修改

阅读量716

点赞数 10

分类专栏：前端框架之Vue 文章标签： vue.js javascript 前端

于 2024-04-02 22:44:51 首次发布

本文链接：https://blog.csdn.net/weixin_46685715/article/details/137295476

版权

前端框架之Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue框架介绍和原理

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

数据绑定原理

在Vue 2中创建Vue实例：

var vm = new Vue({
    el: "#box", // element
    data: {
        myName: "Flynn" // 状态
    }
})

在Vue 3中创建Vue实例：

var obj = {
        // 函数式
        data() {
            return {
                myName: "Flynn",
                myText: "",
                classObj: {
                    aa: true,
                    bb: true,
                    cc: false
                }
            }
        },
        methods: {
            handleAdd() {
                console.log("add", this.myText)
                this.classObj.dd = true
            }
        }
    }
    var vm = Vue.createApp(obj).mount("#box")

Vue 2.x 的响应式

Object.defineProperty() 是 JavaScript 中的一个方法，用于定义新属性或修改现有属性的行为。它允许你精确地控制属性的各种特性，下面是一段模拟 Vue 2 的响应式的代码：

var obj = {};
var obox = document.getElementById("box");

// 初始化 obj.myName 的值为 obox 的初始 innerHTML
obj.myName = obox.innerHTML;

Object.defineProperty(obj, "myName", {
    get() {
        console.log('被访问了');
        return obox.innerHTML;
    },
    set(value) {
        console.log("修改", value);
        obox.innerHTML = value;
    }
});

// 使用 MutationObserver 监听 obox 的 innerHTML 属性的变化
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === "childList" || mutation.type === "characterData") {
            obj.myName = obox.innerHTML;
        }
    });
});

// 配置 MutationObserver
var config = { childList: true, subtree: true, characterData: true };

// 开始监听 obox 的变化
observer.observe(obox, config);

使用 MutationObserver 监听 obox 元素的 innerHTML 属性的变化，当 innerHTML 变化时，将更新 obj.myName 属性。使得 obj.myName 的值能够随着 obox 元素 innerHTML 的变化而自动更新。

Vue 中响应式数据的原理和更新过程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
当将一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项时，在 Vue 2.x 中，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty() 或在 Vue 3.x 中使用 Proxy 把这些属性全部转为 getter/setter。通过这样的转换，Vue 能够监测到属性的读取和修改。

在数据发生变化时，Vue 2.x 中会创建一个 Watcher 对象，负责侦听数据的变化。当数据被修改时，Watcher 将通知相关的组件或者视图进行更新。而在 Vue 3.x 中，使用的是 Reactivity API 来处理数据的响应式，Watcher 的概念略有不同，但仍然负责数据的变化侦听和相关的更新操作。

更新过程中，Vue 会创建新的虚拟 DOM 树，并通过比较新旧虚拟 DOM 树的差异，找出需要更新的部分。然后，Vue 会以最小的代价更新到实际的 DOM 中，从而确保视图与数据保持同步。这个过程中，Vue 会尽可能地优化 DOM 操作，以提高页面的渲染性能。

如何进行对比呢？

Vue 在内部使用了一种优化过的 diff 算法来比较新旧虚拟 DOM 树，diff算法保证最优的效率去对比，最小的代价去更新DOM ，层级相同才对比，层级不同不对比，按照树的结构按照层级对比。列表中靠key来对比，key一样就复用，key不一样就删了从前的再创建一份新的对比。标签一样对比，组件一样对比。如果在新老对比中发现，名字不一样，不一样会删了重新创建，标签不一样也会删了重新对比。

get和set就是关键字，它们后面各自对应一个函数。

get对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法为setter，负责设置值，在它的函数体中，一切return无效。