Vue原理

已于 2024-02-04 12:14:40 修改
阅读量511 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
于 2022-11-09 11:28:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46151381/article/details/127766268
版权

0 MVVM 

 aafbb0792b85949d8ed25c0f254a589c.png

1 数据代理

概念：通过vm对象代理data对象中属性的操作，从而更方便的操作data中的数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

原理：通过Object.defineProperty()把data中的属性添加到vm上。vm上的每个属性都有一个getter/setter，通过getter/setter读写data中对应的属性。（this.xxx===this._data.xxx）

e59c61f836b22e14de83a2b98caf5575.png2 数据劫持（响应式）

2.1 v2.x

原理：vue会监视data中所有层次的数据。vm调用setter，更新_data，是数据代理。_data变，调setter，更新页面，是数据绑定。

对象类型：通过```Object.defineProperty()```对属性的读取、修改进行拦截（数据劫持）。

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

2.1.1 基本数据监听

问题：

        对象新增属性、删除属性, 界面不会更新。（无法监听新增/删除属性）

        直接通过下标修改数组, 界面不会自动更新。（无法监听数组）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模拟一个数据监测</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				address:'北京',
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
			
		</script>
	</body>
</html>

2.1.2 对象深度监听和数组监听

深度监听需要递归到底，一次性计算量大；

// 触发更新视图
function updateView() {
    console.log('视图更新')
}

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

    // 污染全局的 Array 原型
    // Array.prototype.push = function () {
    //     updateView()
    //     ...
    // }

    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }

    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: '北京' // 需要深度监听
    },
    nums: [10, 20, 30]
}

// 监听数据
observer(data)

// 测试
// data.name = 'lisi'
// data.age = 21
// // console.log('age', data.age)
// data.x = '100' // 新增属性，监听不到 —— 所以有 Vue.set
// delete data.name // 删除属性，监听不到 —— 所有已 Vue.delete
// data.info.address = '上海' // 深度监听
data.nums.push(4) // 监听数组

2.1.3 监听新增/删除属性  & 数组

//数组&对象
//Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
Vue.set(target，propertyName/index，value)
vm.$set(target，propertyName/index，value)
vm.$delete(target，propertyName/index)

//数组
//数组响应式API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
//不使用包装方法
this.student.hobby = this.student.hobby.filter((h)=>{
    return h !== '抽烟'
})

2.2 v3.x

vue3通过Proxy实现响应式 。深度监听：vue3按需递归；vue2是全部递归。

Proxy无法兼容所有浏览器，无法polyfill。

2.2.1 监听数组和对象 

getter中只需要处理非原型属性。

setter中重复数据无需处理。

   96be105c57881b6e8f452ec8b75b9970.png

// const data = {
//     name: 'zhangsan',
//     age: 20,
// }
const data = ['a', 'b', 'c']

const proxyData = new Proxy(data, {
    get(target, key, receiver) {
        // 只处理本身（非原型的）属性
        const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
            console.log('get', key) // 监听
        }

        const result = Reflect.get(target, key, receiver)//Reflect和Proxy一一对应，代替Object;receiver就是proxyData
        return result // 返回结果
    },
    set(target, key, val, receiver) {
        // 重复的数据，不处理
        if (val === target[key]) {
            return true
        }

        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        // console.log('result', result) // true
        return result // 是否设置成功
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        // console.log('result', result) // true
        return result // 是否删除成功
    }
})

2.2.2 深度监听

// 创建响应式
function reactive(target = {}) {
    if (typeof target !== 'object' || target == null) {
        // 不是对象或数组，则返回
        return target
    }

    // 代理配置
    const proxyConf = {
        get(target, key, receiver) {
            // 只处理本身（非原型的）属性
            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('get', key) // 监听
            }
    
            const result = Reflect.get(target, key, receiver)
        
            // 深度监听
            // 性能如何提升的？
            return reactive(result)
        },
        set(target, key, val, receiver) {
            // 重复的数据，不处理
            if (val === target[key]) {
                return true
            }
    
            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('已有的 key', key)
            } else {
                console.log('新增的 key', key)
            }

            const result = Reflect.set(target, key, val, receiver)
            console.log('set', key, val)
            // console.log('result', result) // true
            return result // 是否设置成功
        },
        deleteProperty(target, key) {
            const result = Reflect.deleteProperty(target, key)
            console.log('delete property', key)
            // console.log('result', result) // true
            return result // 是否删除成功
        }
    }

    // 生成代理对象
    const observed = new Proxy(target, proxyConf)
    return observed
}

// 测试数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        city: 'beijing',
        a: {
            b: {
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        }
    }
}

const proxyData = reactive(data)

2.2.3 proxy

Vue 3 深入响应式原理 - 聊一聊响应式构建的那些经历_慕课手记

2.3 响应式原理

2.3.1 数据绑定

1). 作用:
    实现数据的更新显示
2). 基本原理:
   a.通过Object.defineProperterty()给data中所有属性添加setter/getter, 实现数据劫持
   b.为每个data中的属性创建一个对应的dep对象, 一旦属性数据变化, 通知dep对象
   c.getter为模板中的每个表达式创建对应的watcher, 并关联到对应的dep上
   d.一旦dep收到setter数据变化的通知, 会通知所有关联的watcher, watcher收到通知后就更新对应的节点

2.3.2 双向数据绑定 

1). vue实现数据绑定主要是：采用数据劫持 + 消息订阅发布模式的方式，
2). 通过Object.defineProperty()来劫持/监视data中的属性，在数据变动时发布消息给所有订阅者，每个订阅者去更新对应的DOM节点。（数据--->视图）
3). 双向数据绑定是单向数据绑定的基础上, 给元素绑定input监听, 一旦输入改变了, 将最新的值保存到对应的属性上（视图--->数据）

3 vue模板解析

1). 目的
   实现初始化显示
2). 整体流程
           1). 将el的所有子节点取出, 添加到一个新建的文档fragment对象中
           2). 对fragment中的所有层次子节点递归进行编译解析处理

                a. 编译/解析包含大括号表达式的文本节点: textNode.textContent = value。根据正则对象匹配出表达式字符串，从data中取出对应的值。
                b. 编译事件指令: elementNode.addEventListener('eventName', callback)。指令中取出事件名，指令表达式从methods得到处理函数。
                c. 编译一般指令: elementNode.xxx = value。指令中取指令名，data中取出指令表达式的值。根据指令值设置节点属性：node.value=xxx；node.className=xxx
           3). 将解析后的fragment添加到el中显示

Dep：

        给data属性初始化进行数据绑定时创建；

        个数就是data中属性的个数

        结构是  id:标识；subs:[ ]//n个相关的watcher容器

Watcher：

        初始化指令/插值时创建的；

        个数是表达式的个数；

        结构如下：

两者关系？ 

fb6d8ee47e6f07b27aeb6d91821a66dd.png 4  vue如何渲染和更新

模板编译：vue-template-compiler将模板编译为render函数，执行render函数生成vdom。

const compiler = require('vue-template-compiler')

const template = `<p>{{message}}</p>`
with(this){return createElement('p',[createTextVNode(toString(message))])}

// const template = `
//     <div id="div1" class="container">
//         <img :src="imgUrl"/>
//     </div>
// `
// with(this){return _c('div',
//      {staticClass:"container",attrs:{"id":"div1"}},
//      [
//          _c('img',{attrs:{"src":imgUrl}})])}

// v-model：input事件中更新name变量，:value=name
const template = `<input type="text" v-model="name">`
// with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(name),expression:"name"}],attrs:{"type":"text"},domProps:{"value":(name)},on:{"input":function($event){if($event.target.composing)return;name=$event.target.value}}})}

const res = compiler.compile(template)
console.log(res.render)

初次渲染

        模板编译：将模板编译为render函数（使用webpack中的vue-loader，会在开发环境下编译模板）

        响应式：监听data中的属性，触发getter

        模板渲染：执行render函数，生成vnode，基于vnode执行patch和diff

更新过程

        响应式：修改data，触发setter

        模板渲染：重新执行render函数，生成newVnode，基于newVnode执行patch

史学娇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 原理
Luckyzhoufangbing的博客
12-15 1111
（一）vue 初始化对数据的处理 初始化用户传入data ----> 将数据进行观测 -----> 进行对象的处理 -----> 遍历对象 -----> 绑定监听 （1）将对象进行观测：会对数据进行判断，是【数组】还是【对象】 （观察者模式） 特点：观察者要直接订阅观察目标，观察目标一做出通知，观察者就要进行处理（这也是观察者模式区别于发布/订阅模式的最大区别） （2）进行对象的处理：对象遍历 第一遍 （遍历Object.keys()） （3）循环对象定义响应式变化：
VUE原理
suuuuuki98的博客
04-30 168
VUE原理 组件化 响应式 vdom和diff 模板编译 渲染过程 前端路由 组件化基础 数据驱动视图 传统组件，只是静态渲染，更新还要依赖于操作DOM 数据驱动视图-Vue MVVM MVVM Vue响应式 组件data一旦发生变化，立即触发视图的更新 实现数据驱动视图的第一步 ...
Vue.js其原理和运作机制
m0_65084430的博客
06-14 1179
每个组件都是一个具有独立逻辑和样式的模块。组件可以通过props接收数据，通过events传递消息。});
VUE的底层原理分析vue框架的来龙去脉，和技术要点及难点和应用场景，小白的进阶之道
最新发布
zhang9880000的博客
06-24 1721
Vue.js 支持自定义指令，允许开发者在普通 DOM 元素上应用自定义行为。自定义指令的生命周期钩子包括bindinsertedupdateunbind。创建自定义指令el.focus();});
vue原理
mmjinglin的博客
09-18 457
&amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt
Vue原理解析——自己写个Vue
weixin_33971977的博客
09-18 472
Vue由于其高效的性能和灵活入门简单、轻量的特点下变得火热。在当今前端越来越普遍的使用，今天来剖析一下Vue的深入响应式原理。 tips：转自我的博客唐益达博客，此为原创。转载请注明出处，原文链接 一、Vue对比其他框架原理 Vue相对于React，Angular更加综合一点。AngularJS则使用了“脏值检测”。 React则采用...
VUE-原理解析
qq_27909209的博客
09-07 604
如果我们在 JavaScript 写类似的逻辑：当我们更改 A0 后，A2 不会自动更新。那么我们如何在 JavaScript 中做到这一点呢？let A2这个 update() 函数会产生一个副作用，或者就简称为作用，因为它会更改程序里的状态。A0 和 A1 被视为这个作用的依赖，因为它们的值被用来执行这个作用。因此这次作用也可以说是一个它依赖的订阅者。我们需要一个魔法函数，能够在 A0 或 A1 (这两个依赖) 变化时调用 update() (产生作用)。
Vue 原理整理
gxll499294075的博客
03-22 1万+
1. 组件化基础=>（MVVM模型） 传统组件，知识静态渲染，更新依赖于操作DOM。 Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom。 优点： 不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。 Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model, View, ViewMode 数据驱动视图...
vue原理介绍
m0_52224499的博客
04-08 1999
vue原理介绍 vue 是一套用于构建用户界面的渐进式框架。它的核心库只关注视图，采用的mvvm设计模式。vue的中心思想就是：数据驱动视图 mvvm “MVVM”: model view viewmodelMVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫Binder，或者是Data-binding engine的东西。你只需要在View的模版语法当中，指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。当ViewModel对进行Model更新的时候，Binder
Vue原理深度剖析
weixin_39963436的博客
01-03 2545
一、Vue基础语法 Vue.js基础结构 使用el方式： 使用render函数方式： Vue生命周期 Vue.js语法和概念 插值表达式 插值表达式相当于一个占位符，只会替换掉其中的占位置的内容。 v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。 插值表达式和v-text不能够解析html标签，v-html能够解析html标签。 结论： 如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。 如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-c
Vue原理剖析 实现双向绑定MVVM
08-30
Vue原理剖析实现双向绑定MVVM 本文将详细剖析Vue原理，实现双向绑定MVVM，具有一定的参考价值。主要内容包括了解Vue的双向数据绑定原理、核心代码模块、缓解好奇心的同时了解如何实现双向绑定、实现MVVM的双向绑定...
深入理解vue
热门推荐
如是说的博客
02-24 2万+
一 　理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句...
vue实现原理
小焊猪 - web前端
08-15 996
Vue 他的模型设计就是MVVM，分为视图view,数据模型层Model,视图数据层viewModel,视图数据层通过Ajax向数据模型层交互数据，通过对model层拿到的数据进行二次封装，然后渲染到视图层上面。 MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终...
vue原理简介
weixin_34267123的博客
11-07 280
写vue也有一段时间了，对vue的底层原理虽然有一些了解，这里总结一下。 vue.js中有两个核心功能：响应式数据绑定，组件系统。主流的mvc框架都实现了单向数据绑定，而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件，从而动态地修改model和view。 1. MVC，MVP，MVVM 1.1 MVC MVC模式将软件分为下面三个部分 1.视图（View）：用户界面2....
Vue原理解析
fmk1023的博客
02-13 3482
VUE响应式原理
vue学习笔记1: vue基本原理
技术驿站
12-21 929
1 MVC MVP MVVM 了解vue之前需要先了解mvc、mvp、mvvm这三种设计模式 MVC mvc是Model-View-Controller的缩写，它将应用程序划分为三个部分： Model: 模型、数据（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法） View: 视图（渲染页面） Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑） mvc工作流程： View 传送指令到 Controller ；
springboot+vue原理框图
05-14
Spring Boot 是基于Spring框架的一个快速开发的脚手架工具，可以简化Spring应用程序的初始搭建和开发过程。Vue.js是一套用于构建用户界面的渐进式框架。它非常灵活且易于使用，能够快速地集成到Spring Boot中。 下面是 Spring Boot + Vue.js 的原理框图： ![springboot+vue原理框图](https://img-blog.csdnimg.cn/20210611110935229.png) Spring Boot提供了RESTful API，Vue.js可以使用Axios等库调用后台API接口，实现前后端数据的交互。前端Vue.js通过Webpack打包后生成静态资源，后端Spring Boot通过集成Thymeleaf模板引擎将前端静态资源渲染到页面中，实现前后端的集成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值