Vue源码分析(响应式化)

最新推荐文章于 2024-10-03 16:14:13 发布
最新推荐文章于 2024-10-03 16:14:13 发布
阅读量117 收藏
点赞数 1
分类专栏： vuejs 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44749729/article/details/108282406
版权

概念

使用步骤
1.编写 页面 模板
    1.直接在HTML标签中写
    2.使用template
    3.使用单文件（<template>）
2.创建Vue实例
    1.在Vue 的构造函数中：data,methods,computer,watcher,props,...
3.将Vue挂载到页面中（mount）

数据驱动模型
Vue执行流程
    1.获得模板：模板中有‘坑’
    2.利用Vue构造函数提供的数据来‘填坑’，就可以得到页面显示的'标签'了
    3.替换原来有坑的标签
Vue 利用 我们提供的数据 和 页面的 模板 生成了一个新的HTML标签（node元素），替换到了 页面中 放置模板的位置


虚拟DOM
    目标：
    1. 怎么将真正的DOM转换为虚拟DOM
    2.怎么将虚拟DOM转换为真正的DOM

    思路与深拷贝类似

概念
    1.柯里化： 一个函数原本有多个参数 只传入一个参数生成一个新函数 ，由新函数接受到新的参数运行得到的结构
    2.偏函数： 参考柯里化， 传入一部分参数
    3.高阶函数： 一个函数参数是一个函数，该函数对参数这个函数进行加工，得到一个函数，这个加工用的函数就是高阶函数

    为什么要使用柯里化
    为了提升性能  使用柯里化可以缓存一部分能力

    使用两个例子说明

    1.判断元素

    Vue 本质上是使用HTML的字符串作为模板，将字符串的 模板 转换为AST 再转换为VNode 
        1.模板-AST  
        2.AST-VNode
        3.VNode-DOM

    最消耗性能的
    是模板-AST
    例子 字符串 1 + 2 * ( 3 + 4 )  解析该表达式，得到结果
    一般将此转换为 ‘波兰式’ 表达式 然后用栈进行运算

    在Vue中每一个标签可以是真正的HTML标签，也可以是自定义组件，怎么区分
    在vue源码中，将所有可用的HTML标签 已经存起来，
    假设这里只考虑 几个标签
    ```js
        let tags = 'div,p,a,img'.split(',')
    ```
    一个函数，判断标签名是否为 内置标签
    ```js
    function isHTML( tagName ){
        tagName = tagName.toLowerCase()
        //tags.indexOf(tagName) >-1 return true
        for(let i=0;i<...){
            if(tagName === tags[i])return true
        }
        return false
    }//也可以用indexOf判断
    ```
    模板是任意编写的，可以写的很简单，也可以写的很复杂，indexOf内部也要循环

    如果有6个内置标签 模板有10个，就得循环60次

    使用柯里化
    ```js
     let tags = 'div,p,a,img'.split(',')
        function makeMap( keys ) {
            let set = {}
            keys.forEach(key => {
                set[key] = true
            });
            return function ( tagName ) {
                //!!改为boolean
                return !!set[ tagName.toLowerCase() ]
            }
        }

        let isHTML = makeMap( tags )
        //不用再做循环
    ```
    


    2.虚拟DOM 的render

    vue 项目 模板 转换为AST 转换几次？
        1.页面加载渲染 一次
        2.每一个属性（响应式）数据发生变化 要渲染
        3.watch computed 等等

    render的作用是将 虚拟DOM 转换为 真正的DOM 加载到页面中

    //虚拟DOM 可以降级为AST
    一个项目运行时 模板不会变  抽象语法树不会变

    我们可以将代码优化  将虚拟DOM 缓存起来 生成函数  函数只需要传入数据  得到真正的DOM

响应式原理
    vue 赋值属性获得属性都是直接使用的Vue实例
    我们在设置属性时，页面的数据要更新

    对于对象可以响应式化  递归
    数组
        push
        pop
        shift
        unshift
        reverse
        sort
        splice
    
    1.在改变数组的数据时，需要发出通知
        1.vue2中的缺陷  数据发生变化 ，设置length 没法通知  （在vue3中使用proxy 解决了问题）
    2.加入的元素应该变成响应式的

    技巧：如果一个函数已经定义了，我们要扩展其功能
        1.使用一个临时的函数名存储函数
        2.重新定义原来的函数
        3.定义扩展的功能
        4.调用临时的函数


    扩展数组方法 push 和 pop
        直接修改prototype  不行  所有数组变化

        修改要进行响应式的数组的原型（__proto__）

        已经将对象改成响应式的了，但是如果直接给对象赋值另外一个对象，那么就不是响应式的




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <div>{{name}}</div>
            <div>{{age}}</div>
            <div>{{sex}}</div>
        </div>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <script>

        //虚拟dom 构造函数
        class VNode {
            constructor(tag, data, value, type,) {
                this.tag = tag && tag.toLowerCase()
                this.data = data
                this.value = value
                this.type = type
                this.children = []
            }

            appendChild(vnode) {
                this.children.push(vnode)
            }

        }

        //由真正的dom 生成虚拟dom 将该函数 当作complier函数 
        function getVNode(node) {
            let nodeType = node.nodeType
            let _vnode = null
            if (nodeType === 1) {
                //元素
                let nodeName = node.nodeName
                let attrs = node.attributes
                let _attrObj = {}
                //遍历属性节点 nodeType=2 
                for (let i = 0; i < attrs.length; i++) {
                    _attrObj[attrs[i].nodeName] = attrs[i].nodeValue
                }
                _vnode = new VNode(nodeName, _attrObj, undefined, nodeType)

                //考虑 node的子元素
                //递归
                let childNodes = node.childNodes
                for (let i = 0; i < childNodes.length; i++) {
                    _vnode.appendChild(getVNode(childNodes[i]))
                }
            } else if (nodeType === 3) {
                _vnode = new VNode(undefined, undefined, node.nodeValue, nodeType)
            }
            return _vnode
        }

        //根据路径访问成员
        function getValueByPath(obj, path) {
            let paths = path.split('.')
            //先取得 xxx 再取得结果中的yyy
            let res = obj
            let prop
            while (prop = paths.shift()) {
                res = res[prop]
            }

            return res

        }

        //将带坑的vdom 与数据data结合 得到 带有数据的vdom  模板 AST-》 vnode
        function combine(vNode, data) {
            let _type = vNode.type
            let _data = vNode.data
            let _value = vNode.value
            let _tag = vNode.tag
            let _children = vNode.children

            let _vnode = null

            let rex = /\{\{(.+?)\}\}/g
            if (_type === 3) {
                _value = _value.replace(rex, function (_, g) {
                    let path = g.trim()//双花括号里面的东西
                    let value = getValueByPath(data, path)
                    //将值替换{{}}
                    return value
                })
                _vnode = new VNode(_tag, _data, _value, _type)
            } else if (_type === 1) {
                _vnode = new VNode(_tag, _data, _value, _type)
                _children.forEach((_subVNode) => {
                    _vnode.appendChild(combine(_subVNode, data))
                });
            }

            return _vnode
        }


        //将VNode 转换为真正的dom
        function parseVNode(vnode) {
            let type = vnode.type
            let _node = null
            if (type === 3) {
                return document.createTextNode(vnode.value)
            } else if (type === 1) {

                _node = document.createElement(vnode.tag)

                //属性
                //data 键值对
                let data = vnode.data
                Object.keys(data).forEach((key) => {
                    let attrName = key
                    let attrValue = data[key]
                    _node.setAttribute(attrName, attrValue)
                })

                //子元素
                //递归转换子元素 （虚拟dom）
                let children = vnode.children
                children.forEach(subvnode => {
                    _node.appendChild(parseVNode(subvnode))
                })
            }
            return _node
        }

        function MVue(options) {
            this._options = options
            this._data = options.data
            let elm = document.querySelector(options.el) //vue是字符串
            this._template = elm
            this._parent = elm.parentNode

            reactify(this._data,this)

            this.mount()
        }

        //响应式部分
        let ARRAY_METHOD = [
            'push',
            // 'pop',
            'shift',
            'unshif',
            'revers',
            'sort',
            'splice',
        ]

        let array_methods = Object.create(Array.prototype)

        ARRAY_METHOD.forEach(method => {
            array_methods[method] = function () {
                //将数据进行响应式化
                for (let i = 0; i < arguments.length; i++) {
                    reactify(arguments[i])
                }

                let res = Array.prototype[method].apply(this, arguments)
                return res
            }
        })


        function defineReactive(target, key, value, enumerable) {
            //this指向vue实例
            let that = this
            if (typeof value === 'object' && value != null && !Array.isArray(value)) {
                reactify(value)
            }

            Object.defineProperty(target, key, {
                configurable: true,
                enumerable: !!enumerable,
                get() {
                    return value
                },
                set(newValue) {
                    value = newValue

                    //模板刷新
                    //vue 实例获取  watcher
                    that.mountComponent()

                }
            })
        }

        //将对象响应式花化
        function reactify(o, vm) {
            let keys = Object.keys(o)
            for (let i = 0; i < keys.length; i++) {
                let key = keys[i] //属性名
                let value = o[key]
                if (Array.isArray(value)) {
                    //数组
                    value.__proto__ = array_methods
                    for (let j = 0; j < value.length; j++) {
                        reactify(value[j], vm)
                    }
                } else {
                    //对象或值类型
                    defineReactive.call(vm, o, key, value, true)
                }
            }
        }

        MVue.prototype.mount = function () {
            //需要提供render方法：生成虚拟dom
            this.render = this.createRenderFn()
            this.mountComponent()
        }

        //生成render函数 缓存抽象语法树  使用虚拟dom模拟
        MVue.prototype.createRenderFn = function () {
            let ast = getVNode(this._template)
            //将AST + data =》 vnode
            //带坑的 vnode + data =》 含有数据的vnode
            return function render() {
                //将带坑的vdom 转换为带数据的vdom
                let _temp = combine(ast, this._data)
                return _temp
            }
        }

        MVue.prototype.mountComponent = function () {
            //执行mountcomponent（）
            let mount = () => { //函数 this 默认是全局  
                this.update(this.render())
            }

            mount.call(this) //本质上交给watcher来调用


            //为什么不直接
            //this.update( this.render()) //使用发布订阅模式，渲染和计算的行为应该交给watcher完成
        }

        //将虚拟dom 渲染到页面中  diff算法
        MVue.prototype.update = function (VNode) {
            //简化 直接生成HTML dom  replaceChild 到页面
            //父元素。replaceChild（新元素，旧元素）
            let realDom = parseVNode(VNode)
            this._parent.replaceChild(realDom, document.querySelector('#app'))
            //每次将页面中的dom 全部替换
        }

        //在真正的vue中使用了二次提交的 设计结构
        //1.在页面中的dom  和虚拟dom 一一对应
        //2.在每次数据变化时， 生成一个新的vdom（render）
        //3.将开始真实dom 对应的vdom 与 新的vdom 比较  就是diff算法
        //4.相同的不变  不同的更新到 真实dom 对应的vdom 上  也就更新真正的dom（update）


        let app = new MVue({
            el: '#app',
            data: {
                name: 'xa',
                age: 12,
                sex: 'man',
                dates:[
                    {info:'111'},
                    {info:'2222'},
                    {info:'333'}
                ]
            }
        })

        //修改数据模板刷新

    </script>
</body>

</html>
XINGAO丨
关注
专栏目录
详细分析vue响应式原理
10-15
Vue响应式原理是Vue.js框架中的核心概念之一，它主要实现了数据驱动视图更新的机制。在Vue中，这一原理主要是通过数据劫持（data劫持）的方式完成的，通过定义一个对象的属性为响应式，当属性值变化时，视图会自动...
vue 源码解析
wanglun_的博客
07-14 3434
watch：watcher解析表达式，收集依赖，在依赖（表达式值）改变时触发回调（handler）；调用所有watcher的update更新。数据双向绑定：用Object.defineProperty方法重写data中每个数据的get，set方法，在get中执行依赖收集（执行 Dep.depend 方法）和set中派发更新通知（执行 Dep.notify 方法）。computed。
Vue源码系列（一）：Vue源码解读的正确姿势
Ningdz的博客
12-10 1万+
作为一名开发人员，阅读源码是非常好的学习方式，尤其Vue又是当下很受欢迎的前端框架，随着用的人越来越多，不断推动着源码地完善。在源码中有着各位大佬多年积淀下来的精华，而这些精华就非常值得我们学习。
vue源码解析（源码解析学习大纲）
最新发布
轻风细雨_林木木
10-03 1549
虚拟DOM的使用使得Vue能够高效地管理DOM操作，提升应用性能。基本组件：通过Vue.extend或使用单文件组件（.vue 文件）定义。组件可以包含模板、脚本和样式。Props：组件可以通过props接收父组件传递的数据。Vue的组件系统使得开发者能够构建可维护和可复用的代码，增强了应用的结构化。Vue Router：用于管理应用中的导航和路由。Vuex：用于集中管理应用的状态，方便组件之间共享数据。这两者结合使用，可以有效地管理大型应用的复杂性。
vue源码
qq_41256253的博客
06-23 2466
这里写目录标题01-vue源码学习-柯里化函数一、概念:二、代码实现三、柯里化函数原理其实是闭包02-vue源码学习-vue的基本执行流程和简单渲染模型03-vue源码学习-响应式原理(对象和数组) 01-vue源码学习-柯里化函数 一、概念: 柯里化: 一个函数原本有多个参数, 之传入一个参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 偏函数: 一个函数原本有多个参数, 之传入一部分参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 高阶函数: 一个函数参数是一个函数, 该
Vue源码解析
weixin_43132396的博客
12-20 6374
主要目录结构 scripts：构建相关的脚本和配置文件 dist：构建后的文件 flow：Flow的类型声明 packages：vue-server-render 和 vue-template-compiler，它们作为单独的NPM包发布 test：所有的测试代码 examples：实例代码 types：TypeScript 类型定义 src：源代码 compiler ： 与模版编译相关的代码 core ： Vue核心库（通用的、与平台无关的运行时代码） observer ：实现变化侦测的代码 vdom
Vue源码解析（详细篇）
weixin_46996561的博客
12-19 5370
vue数据观测实现原理，模版编译过程，模版挂载过程分析
Vue 源码分析之 Observer实现过程
08-27
当Vue实例化时，会对传入的`data`选项进行处理，将数据转化为响应式的。在这个过程中，`Observer`的主要任务是对数据对象进行深度遍历，将每个属性转化为可观察的属性，从而实现数据变化时依赖的自动更新。 首先，...
vue原理 vue源码分析
05-27
#### Vue源码分析 ##### 响应式系统 Vue的响应式系统主要由Observer（观察者）、Dep（依赖收集器）和Watcher（观察者）三部分组成： - **Observer**：主要负责将数据对象转化为响应式的，即通过`Object....
Vue源码解读
m0_73442777的博客
04-18 2666
本文主要介绍了Vue.js的源代码解读相关的步骤和技巧，包括安装Vue.js源代码、学习Vue.js的架构、阅读Vue.js的源代码、参考Vue.js的文档和社区资源，以及尝试修改Vue.js的源代码等内容。如果你想深入学习Vue.js的实现原理和内部机制，阅读本文可以为你提供一定的参考和帮助。
vue源码解析
weixin_47964837的博客
06-12 6498
vue源码解析
Vue2.0 源码：11个重要源码原理一览
青轩桃李能几何，流光欺人忽蹉跎
08-06 861
这个过程会生成一段 JavaScript 代码，该代码可以在运行时根据动态数据生成真实的虚拟 DOM。在生成 render 函数的过程中，编译器会生成一系列的代码片段来描述模板的结构和逻辑。这些代码片段包括创建元素（createElement）、设置属性（setAttribute）、添加子节点（appendChild）等操作。通过组合这些代码片段，最终生成一个 render 函数，该函数接受一个参数作为数据输入，并返回一个虚拟 DOM 节点（VNode）作为输出。
vue3源码详细分析
一步一个脚印，踏实努力，向着目标前进
06-10 5715
Vue 3是目前比较流行和使用的一种现代化JavaScript框架，其源码分析对于加深对前端框架的理解和开发能力有很大帮助。Vue 3源码主要由以下几个模块组成：Compiler模块：解析Vue模板，将其转换为渲染函数。Renderer模块：将组件渲染为真实的DOM元素。Reactivity模块：实现了响应式数据绑定。Runtime-core模块：实现了Vue组件的实例化、生命周期、事件等核心功能。Shared模块：包含了一些公共的工具函数。
史上最全的vue.js源码解析最终篇（四）
qq_43237014的博客
08-29 1338
虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。 一、4000~6200代码有哪些内容？： 1.invokeCreateHooks：原生事件绑定的入口 2.initAssetRegisters：创建组件、指令、过滤器 3.initGlobalAPI:初始化全局api 4.renderClass,mergeClassDat.
vue3项目源码汇集
前端-尔嵘
02-18 1万+
vue3学习项目参考
约2万字-Vue源码解读汇总篇(续更)
布知什么
02-21 1558
未完待续...Vue源码解读：06Vue3探索篇Vue源码解读：05生命周期篇Vue源码解读：04模板编译篇Vue源码解读：03虚拟Dom篇Vue源码解读：02变化侦测篇Vue源码解读：01核心思想篇Vue源码解读：前言篇从写下的代码，到用户见到界面，大致经历以下几个流程：模板字符串=》ast树=》render函数=》vnode=》用户见到的界面。将开发者写下的模板字符串，经过一些列处理，生成render函数的这一过程就是模板编译。简单地说，模板编译解析就是为了得到render函数。
《Vue》源码，2024年最新分享前端资深架构师的成长之路
2401_84140506的博客
04-11 1406
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
Vue源码解析(一)
热门推荐
vv_bug
12-11 2万+
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却步了,小伙伴是不是也跟我当初一样呢? 下面分享一下我看vue源码的一些感触,然后记录一下我对源码的理解,欢迎指正,纯属个人笔记,大牛勿喷! 我们直接上一张vue官网的vue的生命周期图: 我们跟着源...
vue3响应式源码分析
08-13
Vue3的响应式源码主要通过Composition API实现，而不是Options API。在Vue3中，可以使用`reactive`函数来显式地创建一个响应式对象。比如在`setup`函数中，我们可以定义一个原始数据对象`originData`，然后使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值