Vue源码解析

最新推荐文章于 2024-09-13 14:34:15 发布
最新推荐文章于 2024-09-13 14:34:15 发布
阅读量40 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15566584342/article/details/133982966
版权

Vue工作机制

Vue.js的工作机制主要包括以下几个方面：

  1. 响应式数据绑定：Vue.js使用数据劫持和发布订阅模式来实现响应式数据绑定。当数据发生变化时，视图也会随之更新。
  2. 组件系统：Vue.js 2.0采用组件化的方式构建前端应用。组件是可重用的独立单位，可以包含模板、样式和逻辑。组件可以通过props和事件进行通信，使应用的结构更加清晰和可维护。
  3. 模板语法：Vue.js使用基于HTML的模板语法，方便开发者快速上手。模板中可以使用插值、指令和事件等语法，实现数据的动态展示和交互。
  4. 生命周期：Vue.js的生命周期指的是组件在创建、更新、销毁等不同阶段所执行的一系列方法。通过生命周期方法，我们可以对组件的状态进行控制和操作，实现复杂的业务逻辑。
  5. 指令：Vue.js提供了一些内置指令，如v-if、v-for、v-bind等，用于实现条件渲染、列表渲染、数据绑定等功能。指令可以接收参数，并且支持动态绑定。
  6. 插件系统：Vue.js 2.0的插件系统允许开发者扩展框架的功能。插件可以通过全局API或局部注册的方式使用，使应用的功能更加丰富和灵活。
  7. 组件通信：Vue.js提供了多种组件通信方式，如父子组件传递props、使用事件进行通信、使用Vuex进行状态管理等。这些通信方式使得组件之间的数据流动更加可控和可预测。
    在这里插入图片描述

Vue响应式的原理defineProperty

Vue.js 的响应式原理主要是通过ES5的Object.defineProperty方法对数据进行劫持，并利用getter和setter方法进行数据的获取和设置。当读取data中的数据时，会自动调用getter方法；当修改数据时或者数据发生改变时，会自动调用setter方法去侦听检测数据的变化。同时，会通知观察者（watcher）自动重新触发渲染。

class KVue {
    constructor(options) {
        this._data = options.data;
        this.observer(this._data);
    }
    observer(value) {
        if (!value || typeof value !== "object") {
            return;
        }
        Object.keys(value).forEach(key => {
            this.defineReactive(value, key, value[key]);
        });
    }
    defineReactive(obj, key, val) {
        Object.defineProperty(obj, key, {
            enumerable: true /* 属性可枚举 */,
            configurable: true /* 属性可被修改或删除 */,
            get() {
                return val;
            },
            set(newVal) {
                if (newVal === val) return;
                this.cb(newVal);
            }
        });
    }
    cb(val) {
        console.log("更新数据了", val);
    }
}
let o = new KVue({
    data: {
        test: "I am test."
    }
});
o._data.test = "hello,kaikeba";

依赖收集与追踪

Vue.js使用依赖收集和追踪系统来管理组件之间的依赖关系。该系统使用静态分析来查找模板中的依赖关系，并在编译期间收集依赖项。然后，这些依赖项被存储在Vue实例的__dep__数组中，用于在更新周期中追踪和触发依赖项的重新计算。
当一个依赖项发生变化时，Vue会使用__dep__数组来查找所有依赖于该依赖项的组件，并触发重新渲染。这使得Vue能够有效地更新视图，而不需要手动调用Vue实例的方法或属性。
此外，Vue还使用虚拟DOM（VNode）来比较新旧视图之间的差异，并仅更新需要更新的部分。这使得Vue在处理大量数据时能够保持高效的性能。

new Vue({
    template:
        `<div>
    <span>{{text1}}</span>
    <span>{{text2}}</span>
    <div>`,
    data: {
        text1: 'name1'
    },
    created() {
        this.text1 = "这是一段文本"
    }
});

text1被修改，所以视图更新，但是text2视图没用到，所以不需要更新，如何实现呢，就需要我们的依赖收集。

// 依赖收集
class Dep {
    constructor() {
        // 存数所有的依赖
        this.deps = []
    }
    // 在deps中添加一个监听器对象
    addDep(dep) {
        this.deps.push(dep)
    }
    // 通知所有监听器去更新视图
    notify() {
        this.deps.forEach((dep) => {
            dep.update()
        })
    }
}

class Watcher {
    constructor() {
        // 在new一个监听器对象时将该对象赋值给Dep.target，在get中会用到
        Dep.target = this
    }
    // 更新视图的方法
    update() {
        console.log("视图更新了！")
    }
}

在这里插入图片描述
我们在增加了一个 Dep 类的对象，用来收集 Watcher 对象。读数据的时候，会触发 reactiveGetter 函数把当前的Watcher 对象（存放在 Dep.target 中）收集到 Dep 类中去。
写数据的时候，则会触发 reactiveSetter 方法，通知Dep 类调用 notify 来触发所有 watcher 对象的update 方法更新对应视图。

constructor(options) {
    this._data = options.data
    this.observer(this._data)
    // 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象
    new Watcher();
    // 在这里模拟render的过程，为了触发test属性的get函数
    console.log('模拟render，触发test的getter', this._data.test);
}
defineReactive(obj, key, val) {
    const dep = new Dep()
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            // 将Dep.target（即当前的Watcher对象存入Dep的deps中）
            dep.addDep(Dep.target)
            return val
        },
        set: function reactiveSetter(newVal) {
            if (newVal === val) return
            // 在set的时候触发dep的notify来通知所有的Watcher对象更新视图
            dep.notify()
        }
    })
}

编译compile

核心逻辑 获取dom，遍历dom，获取{{}}、k-和@开头的 ，设置响应式。
在这里插入图片描述
目标功能

<body>
<div id="app">
    <body>
    <div id="app">
        <p>{{name}}</p>
        <p k-text="name"></p>
        <p>{{age}}</p>
        <p>
            {{doubleAge}}
        </p>
        <input type="text" k-model="name">
        <button @click="changeName">呵呵</button>
        <div k-html="html"></div>
    </div>
    <script src='./compile.js'></script>
    <script src='./kaikeba-vue.js'></script>
    <script>
        let kaikeba = new KVue({
            el: '#app',
            data: {
                name: "I am test.",
                age: 12,
                html: '<button>这是一个按钮</button>'
            },
            created() {
                console.log('开始啦')
                setTimeout(() => {
                    this.name = '我是蜗牛'
                }, 1500)
            },
            methods: {
                changeName() {
                    this.name = '哈喽，开课吧'
                    this.age = 1
                    this.id = 'xx'
                    console.log(1, this)
                }
            }
        })
    </script>
    </body>

    <p>{{name}}</p>
    <p k-text="name"></p>
    <p>{{age}}</p>
    <p>
        {{doubleAge}}
    </p>
    <input type="text" k-model="name">
    <button @click="changeName">呵呵</button>
    <div k-html="html"></div>
</div>
<script src='./compile.js'></script>
<script src='./kaikeba-vue.js'></script>
<script>
    let kaikeba = new KVue({
        el: '#app',
        data: {
            name: "I am test.",
            age: 12,
            html: '<button>这是一个按钮</button>'
        },
        created() {
            console.log('开始啦')
            setTimeout(() => {
                this.name = '我是蜗牛'
            }, 1500)
        },
        methods: {
            changeName() {
                this.name = '哈喽，开课吧'
                this.age = 1
                this.id = 'xx'
                console.log(1, this)
            }
        }
    })
</script>
</body>

compile.js

class Compile {
    constructor(el, vm) {
        this.$vm = vm
        this.$el = document.querySelector(el)
        if (this.$el) {
            this.$fragment = this.node2Fragment(this.$el)
            this.compileElement(this.$fragment)
            this.$el.appendChild(this.$fragment)
        }
    }

    node2Fragment(el) {
        // 新建文档碎片 dom接口
        let fragment = document.createDocumentFragment()
        let child
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child)
        }
        return fragment
    }

    compileElement(el) {
        let childNodes = el.childNodes
        Array.from(childNodes).forEach((node) => {
            let text = node.textContent
            // 表达式文本
            // 就是识别{{}}中的数据
            let reg = /\{\{(.*)\}\}/
            // 按元素节点方式编译
            if (this.isElementNode(node)) {
                this.compile(node)
            } else if (this.isTextNode(node) && reg.test(text)) {
                // 文本 并且有{{}}
                this.compileText(node, RegExp.$1)
            }
            // 遍历编译子节点
            if (node.childNodes && node.childNodes.length) {
                this.compileElement(node)
            }
        })
    }

    compile(node) {
        let nodeAttrs = node.attributes
        Array.from(nodeAttrs).forEach((attr) => {
            // 规定：指令以 v-xxx 命名
            // 如 <span v-text="content"></span> 中指令为 v-text
            let attrName = attr.name // v-text
            let exp = attr.value // content
            if (this.isDirective(attrName)) {
                let dir = attrName.substring(2) // text
                // 普通指令
                this[dir] && this[dir](node, this.$vm, exp)
            }
            if (this.isEventDirective(attrName)) {
                let dir = attrName.substring(1) // text
                this.eventHandler(node, this.$vm, exp, dir)
            }
        })
    }

    compileText(node, exp) {
        this.text(node, this.$vm, exp)
    }

    isDirective(attr) {
        return attr.indexOf('k-') == 0
    }

    isEventDirective(dir) {
        return dir.indexOf('@') === 0
    }

    isElementNode(node) {
        return node.nodeType == 1
    }

    isTextNode(node) {
        return node.nodeType == 3
    }

    text(node, vm, exp) {
        this.update(node, vm, exp, 'text')
    }

    html(node, vm, exp) {
        this.update(node, vm, exp, 'html')
    }

    model(node, vm, exp) {
        this.update(node, vm, exp, 'model')
        let val = vm.exp
        node.addEventListener('input', (e) => {
            let newValue = e.target.value
            vm[exp] = newValue
            val = newValue
        })
    }

    update(node, vm, exp, dir) {
        let updaterFn = this[dir + 'Updater']
        updaterFn && updaterFn(node, vm[exp])
        new Watcher(vm, exp, function (value) {
            updaterFn && updaterFn(node, value)
        })
    }

    // 事件处理
    eventHandler(node, vm, exp, dir) {
        let fn = vm.$options.methods && vm.$options.methods[exp]
        if (dir && fn) {
            node.addEventListener(dir, fn.bind(vm), false)
        }
    }

    textUpdater(node, value) {
        node.textContent = value
    }

    htmlUpdater(node, value) {
        node.innerHTML = value
    }
    
    modelUpdater(node, value) {
        node.value = value
    }
}

入口文件

class KVue {
    constructor(options) {
        this.$data = options.data
        this.$options = options
        this.observer(this.$data)
        // 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象
        // new Watcher()
        // 在这里模拟render的过程，为了触发test属性的get函数
        console.log('模拟render，触发test的getter', this.$data)
        if (options.created) {
            options.created.call(this)
        }
        this.$compile = new Compile(options.el, this)
    }

    observer(value) {
        if (!value || (typeof value !== 'object')) {
            return
        }
        Object.keys(value).forEach((key) => {
            this.proxyData(key)
            this.defineReactive(value, key, value[key])
        })
    }

    defineReactive(obj, key, val) {
        const dep = new Dep()
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get() {
                // 将Dep.target（即当前的Watcher对象存入Dep的deps中）
                Dep.target && dep.addDep(Dep.target)
                return val
            },
            set(newVal) {
                if (newVal === val) return
                val = newVal
                // 在set的时候触发dep的notify来通知所有的Watcher对象更新视图
                dep.notify()
            }
        })

    }

    proxyData(key) {
        Object.defineProperty(this, key, {
            configurable: false,
            enumerable: true,
            get() {
                return this.$data[key]
            },
            set(newVal) {
                this.$data[key] = newVal
            }
        })
    }
}

依赖收集 Dep

class Dep {
    constructor() {
        // 存数所有的依赖
        this.deps = []
    }

    // 在deps中添加一个监听器对象
    addDep(dep) {
        this.deps.push(dep)
    }

    depend() {
        Dep.target.addDep(this)
    }

    // 通知所有监听器去更新视图
    notify() {
        this.deps.forEach((dep) => {
            dep.update()
        })
    }
}

监听器

class Watcher {
    constructor(vm, key, cb) {
        // 在new一个监听器对象时将该对象赋值给Dep.target，在get中会用到
        // 将 Dep.target 指向自己
        // 然后触发属性的 getter 添加监听
        // 最后将 Dep.target 置空
        this.cb = cb
        this.vm = vm
        this.key = key
        this.value = this.get()
    }

    get() {
        Dep.target = this
        let value = this.vm[this.key]
        return value
    }

    // 更新视图的方法
    update() {
        this.value = this.get()
        this.cb.call(this.vm, this.value)
    }
}

总结

以上就是Vue.js的源码分析了，希望对大家有所帮助。

Fairytale_peng
关注
vue 源码解析
wanglun_的博客
07-14 3360
watch：watcher解析表达式，收集依赖，在依赖（表达式值）改变时触发回调（handler）；调用所有watcher的update更新。数据双向绑定：用Object.defineProperty方法重写data中每个数据的get，set方法，在get中执行依赖收集（执行 Dep.depend 方法）和set中派发更新通知（执行 Dep.notify 方法）。computed。
vue源码解析
weixin_47964837的博客
06-12 6476
vue源码解析
vue源码解析视频
拥抱城市的你
05-17 2723
点击 vue源码解析下载百度网盘下
VUE源码解析（持续更新）
编码世界
05-22 1162
src\core\observer\index.js export class Observer { } Observer这个类会被附加在每一个可观察对象上 export function defineReactive ( } 利用 Object.defineProperty 函数作用于对象属性的值，进行取值和赋值操作时的拦截和处理 数组对象中的每一个key设置dep，为什么在Observer里声明dep？（给每个对象加一个dep呢） 1.obeject里面有新增或者删除属性 2.array中有变更
vue源码解析-实现
weixin_45730243的博客
05-24 1514
一、真实DOM渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D
Vue源码解析（详细篇）
weixin_46996561的博客
12-19 4437
vue数据观测实现原理，模版编译过程，模版挂载过程分析
ruoyi-vue源码解析 day1
weixin_44245332的博客
03-01 558
ruoyi-vue源码解析。
Vue 源码解析
Sandy_zhi的博客
09-30 147
Vue 源码解析框架地址 https://www.processon.com/view/link/5d1eb5a0e4b0fdb331d3798c#map
Vue源码解析（尚硅谷）
m0_46403734的博客
04-12 455
模板引擎是将数据要变为视图最优雅的解决方案历史上曾经出现的数据变为视图的方法Vue源码解析之虚拟DOM和diff算法。
vue源码解析.zip
05-13
本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码实现。 首先，Vue.js 的核心特性包括双向数据绑定、组件系统、指令系统和虚拟DOM。双向数据绑定通过`v-...
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定，解析指令等。 几种实现双向绑定的做法 目前几种主流的mvc（vm）框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向...
VUE源码解析
06-21
这些年来，前端行业一直在飞速发展，行业的进步，导致对从业人员的要求不断攀升。放眼未来，虽然只会用某些框架还可以找到...上最流行Web框架Vue.js源码背后的思想，让你亲身体验从“知其然”到“知其所以然”的蜕变!
vue源码解析.txt
08-06
Vue源码解析, 有需要的小伙伴可以下载下来看一看，一起学习
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1244
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 983
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 876
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 546
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
el-input设置type=‘number‘和v-model.number的区别
weixin_46394325的博客
09-11 433
el-input设置type=‘number’和.number修饰符的区别
Vue源码解析011：入门与runtime理解
在本篇Vue源码解析文章中，我们将深入探讨03 Vue源码剖析第11章的内容，主要围绕目标环境的搭建、源码学习方法以及Vue的初始化过程进行讲解。首先，为了进行源码研究，你需要从官方GitHub仓库克隆Vue项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值