响应式原理

已于 2022-05-20 19:34:40 修改
阅读量1.2k 收藏 3
点赞数 2
分类专栏： Vue 文章标签： 前端
于 2022-03-23 21:37:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39908328/article/details/123674578
版权

前言

本文要记录的大概内容：响应式原理的实现

响应式原理

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是响应式？

示例：我们日常写代码中，我们有使用一些属性，当这些属性的值被修改后，前面所使用到该属性的值也会随之发生改变，可以把这理解为是响应式。

我们来看一段代码：

代码如下（示例）：

  • a有一个初始化的值，有一段代码使用了这值;
  • 那么当a有了一个新值时，这段代码可以自动重新执行;
let a = 10;
console.log(a);
a = 100;
  • 上面的这样一种可以自动响应数据变化的代码机制，我们就称之为响应式

我们可以来看下对象的响应式

const obj = {
   name: "aaa"
}
console.log(obj.name)
obj.name = "bbb"

当我们修改了name的值，上面那一行代码也会随之数据的变化而发生改变，这就是对象的响应式。

二、响应式函数

1.为什么需要使用函数

  • （1）首先，执行的代码中可能不止一行代码，所以我们可以将这些代码都放到一个函数中：
    • 那么我们现在的问题就是当数据发生改变时，自动执行某个函数
    • 响应式对象 -> 需要执行的函数
  • （2）但是还有一个问题 ：在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢？
    • 这种情况可以由自己判断
    • 还有就是可以封装一个响应式函数，只要是把函数加入到这个响应式函数中的，都判定为是需要进行响应式的，其他判定为是不需要进行响应式的

代码如下（示例）：

//可以实现响应式
let obj = {
	name: "zs"
};
function a(){
	console.log(obj.name)
}
//不需要实现响应式
function b(){
	const num = 200;
	console.log(num)
}

2.响应式函数的实现

代码如下（示例）：

//创建一个保存响应式函数的属性
const reactivFn = [];
//封装响应式函数watchFn
function watchFn(fn){
	reactivFn.push(fn)
}

const obj = {
	name: "zs"
}

watchFn(function(){
	console.log(obj.name)
})

watchFn(function(){
	let a = obj.name;
	console.log(obj.name);
})
//数据发生改变
obj.name = "ls"
//执行保存的响应式函数
reactivFn.forEach(fn => fn())

对响应式函数做了一个简单的封装

2.响应式依赖的收集

  • 上面的响应式函数收集依赖的方式是放到一个数组中保存的，但是这里会存在数据管理的问题：
    • 我们在实际的开发中需要监听很多对象的响应式;
    • 这些对象要监听的不只是一个属性，会存在有很多个属性，都会有对应的响应式函数;
    • 我们不可能在全局创建一大堆数组来保存这些响应式函数;
  • 所以我们要设计一个类，这个类用于管理某个对象中的某一个属性的所有响应式函数;
    • 相当于代替了原来所保存响应式函数的数组;

代码如下（示例）：

class Depend {
	constructor(){
		this.reactivFn = []; //用于保存依赖函数
	}
	addDependFn(fn){
		this.reactivFn.push(fn); //将需要实现响应式的函数放到数组中
	}
	notify(){
		this.reactivFn.forEach(fn => fn()); //通知所有依赖函数
	}
}

//封装一个响应式函数
const depend = new Depend()
watchFn function(fn){
	fn.addDependFn(fn)
}
//创建对象
const obj = {
	name: "zs",
	age: 10
}
//把需要实现响应式的函数放到watchFn中
watchFn(function(){
	console.log(obj.name)
})

watchFn(function(){
	console.log(obj.age)
})
//修改数据
obj.name = "zs"
//当数据发生改变后，在通知所有依赖函数
depend.notify()

封装了一个收集响应式数据依赖的类

3.监听对象的变化

  • 我们上面封装的响应式收集依赖的类，都是由我们自己手动来收集并更新的，我们现在需要实现的是让他可以自动的收集依赖函数，并更新数据;
    • 那么我们就需要对该数据对象进行一个监听，才能完成;
  • 监听对象的方式有两种：
    • 方式一：通过Object.defineProperty的方式(vue2采用的方式)；
    • 方式二：通过new Proxy的方式(vue3采用的方式)；

我们这里先以new Proxy的方式来监听
代码如下（示例）：

class Depend {
	constructor(){
		this.reactivFn = []; //用于保存依赖函数
	}
	addDependFn(fn){
		this.reactivFn.push(fn); //将需要实现响应式的函数放到数组中
	}
	notify(){
		this.reactivFn.forEach(fn => fn()); //通知所有依赖函数
	}
}

//封装一个响应式函数
const depend = new Depend()
watchFn function(fn){
	fn.addDependFn(fn)
}
//创建对象
const obj = {
	name: "zs",
	age: 10
}
//监听obj对象
const objProxy = new Proxy(obj,{
	//对属性获取值时的捕获
	get: function(target, key, receiver){
		return Reflect.get(target, key, receiver)
	},
	//对属性获取值时的捕获
	set: function(target, key, newValue, receiver){
		Reflect.set(target, key, newValue, receiver)
		//当数据发生改变后，在通知所有依赖函数
		depend.notify()
	}
})

//把需要实现响应式的函数放到watchFn中
watchFn(function(){
	console.log(objProxy.name)
})

watchFn(function(){
	console.log(objProxy.age)
})
//修改数据
objProxy.name = "zs"

上面我们完成对obj对象的监听，当obj对象中的属性数据发生改变，会自己去更新属性的依赖函数；

4.对象的依赖收集

  • 我们当前是创建了一个Depend对象，用于管理对于name变化需要监听的响应式函数;
    • 但是实际开发中我们会有有不同的对象，另外会有不同的属性需要管理;
    • 我们应该怎样使用一种数据结构来管理不同对象的依赖 不同依赖呢？
  • 我们可以通过weakMap和Map数据结构来完成对不同对象依赖的管理;
    下面有一张图片概括了我们管理依赖所需要的数据结构，我们每个对象的key都会有一个单独的depend对象来保存依赖函数;
    在这里插入图片描述
    代码如下（示例）：
class Depend {
	constructor(){
		this.reactivFn = []; //用于保存依赖函数
	}
	addDependFn(fn){
		this.reactivFn.push(fn); //将需要实现响应式的函数放到数组中
	}
	notify(){
		this.reactivFn.forEach(fn => fn()); //通知所有依赖函数
	}
}

//创建一个全局属性用来保存依赖函数
let activeFn = null

//封装一个响应式函数
const depend = new Depend()
watchFn function(fn){
	activeFn = fn
//需要响应式的函数在加入时立即调用一下，这样get方法中就能顺利收集这些依赖
	fn()
	//fn.addDependFn(fn) 我们只需要在get函数中收集依赖就可以了
	activeFn = null //防止watchFn在外面没有传参时被掉用，引用数据混乱
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target,key){
	//获取targetMap中target对象的值
	let map = targetMap.get(target)
	//可能第一次会获取到值，所以需要加个判断
	if(!map){
		map = new Map()
		targetMap.set(target,map)
	}
	
	//获取key的depend对象
	let depend = map.get(key);
	if(!depend){
		depend = new Depend()
		map.set(key,depend)
	}
	return depend
}

//创建对象
const obj = {
	name: "zs",
	age: 10
}
//监听obj对象
const objProxy = new Proxy(obj,{
	//对属性获取值时的捕获
	get: function(target, key, receiver){
		//获取key的depend对象
		const depend = getDepend(target,key);
	//我们想在这里收集依赖，就需要获取到那些响应函数，我们无法直接获取到
		//但是我们可以在外面声明一个全局属性，然后把依赖函数放在该属性中
		depend.addDependFn(activeFn)
		return Reflect.get(target, key, receiver)
	},
	//对属性获取值时的捕获
	set: function(target, key, newValue, receiver){
		Reflect.set(target, key, newValue, receiver)
		//获取key的depend对象
		const depend = getDepend(target,key);
		//当数据发生改变后，在通知所有依赖函数
		depend.notify()
	}
})

//把需要实现响应式的函数放到watchFn中
watchFn(function(){
	console.log(objProxy.name)
})

watchFn(function(){
	console.log(objProxy.age)
})
//修改数据
objProxy.name = "zs"

5.对Depend类重构

  • 因为这里面还存在两个问题
    • 问题一：如果函数中有使用到两次key，比如name，那么这个函数就会被重复的收集两次;
    • 问题二：我们并不希望添加addDependFn放在get中，因为这属性Depend应该做的事情;
  • 所以我们需要对Depend类进行重构;
    • 解决问题一：不使用数组保存，Depend类中的依赖函数，而是使用Set;
    • 解决问题二：在Depend类中新创建一个depend方法，用于收集依赖

代码如下（示例）：

//创建一个全局属性用来保存依赖函数
let activeFn = null

class Depend {
	constructor(){
		//this.reactivFn = []; //用于保存依赖函数
		this.reactivFn = new Set()
	}
	//addDependFn(fn){
		//this.reactivFn.push(fn); //将需要实现响应式的函数放到数组中
	//}
		
	depend(fn){
		if(activeFn){
			this.reactivFn.add(fn)
		}
	}
	
	notify(){
		this.reactivFn.forEach(fn => fn()); //通知所有依赖函数
	}
}

//封装一个响应式函数
const depend = new Depend()
watchFn function(fn){
	activeFn = fn
//需要响应式的函数在加入时立即调用一下，这样get方法中就能顺利收集这些依赖
	fn()
	//fn.addDependFn(fn) 我们只需要在get函数中收集依赖就可以了
	activeFn = null //防止watchFn在外面没有传参时被掉用，引用数据混乱
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target,key){
	//获取targetMap中target对象的值
	let map = targetMap.get(target)
	//可能第一次会获取到值，所以需要加个判断
	if(!map){
		map = new Map()
		targetMap.set(target,map)
	}
	
	//获取key的depend对象
	let depend = map.get(key);
	if(!depend){
		depend = new Depend()
		map.set(key,depend)
	}
	return depend
}

//创建对象
const obj = {
	name: "zs",
	age: 10
}
//监听obj对象
const objProxy = new Proxy(obj,{
	//对属性获取值时的捕获
	get: function(target, key, receiver){
		//获取key的depend对象
		const depend = getDepend(target,key);
	//我们想在这里收集依赖，就需要获取到那些响应函数，我们无法直接获取到
		//但是我们可以在外面声明一个全局属性，然后把依赖函数放在该属性中
		depend.depend()
		return Reflect.get(target, key, receiver)
	},
	//对属性获取值时的捕获
	set: function(target, key, newValue, receiver){
		Reflect.set(target, key, newValue, receiver)
		//获取key的depend对象
		const depend = getDepend(target,key);
		//当数据发生改变后，在通知所有依赖函数
		depend.notify()
	}
})

//把需要实现响应式的函数放到watchFn中
watchFn(function(){
	console.log(objProxy.name)
})

watchFn(function () {
  console.log(objProxy.name, "+++++++");
  console.log(objProxy.name, "-------");
});

//修改数据
objProxy.name = "zs"

6.创建响应式对象(Vue3)

  • 我们目前的响应式是针对于obj一个对象的，我们可以创建出来一个函数，针对所有的对象都可以变成响应式对象：

代码如下（示例）：

//创建一个全局属性用来保存依赖函数
let activeFn = null

class Depend {
	constructor(){
		//this.reactivFn = []; //用于保存依赖函数
		this.reactivFn = new Set()
	}
	//addDependFn(fn){
		//this.reactivFn.push(fn); //将需要实现响应式的函数放到数组中
	//}
		
	depend(fn){
		if(activeFn){
			this.reactivFn.add(fn)
		}
	}
	
	notify(){
		this.reactivFn.forEach(fn => fn()); //通知所有依赖函数
	}
}

//封装一个响应式函数
const depend = new Depend()
watchFn function(fn){
	activeFn = fn
//需要响应式的函数在加入时立即调用一下，这样get方法中就能顺利收集这些依赖
	fn()
	//fn.addDependFn(fn) 我们只需要在get函数中收集依赖就可以了
	activeFn = null //防止watchFn在外面没有传参时被掉用，引用数据混乱
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target,key){
	//获取targetMap中target对象的值
	let map = targetMap.get(target)
	//可能第一次会获取到值，所以需要加个判断
	if(!map){
		map = new Map()
		targetMap.set(target,map)
	}
	
	//获取key的depend对象
	let depend = map.get(key);
	if(!depend){
		depend = new Depend()
		map.set(key,depend)
	}
	return depend
}

//创建对象
const obj = {
	name: "zs",
	age: 10
}

//封装一个响应式函数
function resPonsive(obj){
	return new Proxy(obj,{
	//对属性获取值时的捕获
	get: function(target, key, receiver){
		//获取key的depend对象
		const depend = getDepend(target,key);
	//我们想在这里收集依赖，就需要获取到那些响应函数，我们无法直接获取到
		//但是我们可以在外面声明一个全局属性，然后把依赖函数放在该属性中
		depend.depend()
		return Reflect.get(target, key, receiver)
	},
	//对属性获取值时的捕获
	set: function(target, key, newValue, receiver){
		Reflect.set(target, key, newValue, receiver)
		//获取key的depend对象
		const depend = getDepend(target,key);
		//当数据发生改变后，在通知所有依赖函数
		depend.notify()
		}
  	})
}

//监听obj对象
const objProxy = resPonsive(obj)

//创建新响应式对象
//我们可以直接把对象数据放到resPonsive函数上，当做实参传递过去
const infoProxy = resPonsive({
	name: "aaa"
})

//把需要实现响应式的函数放到watchFn中
watchFn(function(){
	console.log(objProxy.name)
	console.log(infoProxy.name)
})

watchFn(function () {
  console.log(objProxy.name, "+++++++");
  console.log(infoProxy.name, "-------");
});

//修改数据
objProxy.name = "zs"

7.创建响应式对象(Vue2)

  • Vue2的响应式对象和Vue3响应式对象的不同点就在于监听的方式,Vue2是使用Object.defineProperty来监听的

代码如下（示例）：

//创建一个全局属性用来保存依赖函数
let activeFn = null

class Depend {
	constructor(){
		//this.reactivFn = []; //用于保存依赖函数
		this.reactivFn = new Set()
	}
	//addDependFn(fn){
		//this.reactivFn.push(fn); //将需要实现响应式的函数放到数组中
	//}
		
	depend(fn){
		if(activeFn){
			this.reactivFn.add(fn)
		}
	}
	
	notify(){
		this.reactivFn.forEach(fn => fn()); //通知所有依赖函数
	}
}

//封装一个响应式函数
const depend = new Depend()
watchFn function(fn){
	activeFn = fn
//需要响应式的函数在加入时立即调用一下，这样get方法中就能顺利收集这些依赖
	fn()
	//fn.addDependFn(fn) 我们只需要在get函数中收集依赖就可以了
	activeFn = null //防止watchFn在外面没有传参时被掉用，引用数据混乱
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target,key){
	//获取targetMap中target对象的值
	let map = targetMap.get(target)
	//可能第一次会获取到值，所以需要加个判断
	if(!map){
		map = new Map()
		targetMap.set(target,map)
	}
	
	//获取key的depend对象
	let depend = map.get(key);
	if(!depend){
		depend = new Depend()
		map.set(key,depend)
	}
	return depend
}

//创建对象
const obj = {
	name: "zs",
	age: 10
}

//封装一个响应式函数
function resPonsive(obj){
	Object.keys(obj).forEach(key => {
		//保存key的值
		let value = obj[key]
		Object.defineProperty(obj,key,{
			get: function(){
				const depend = getDepend(obj,key)
				depend.depend()
				return value
			},
			set: function(newValue){
				value = newValue
				const depend = getDepend(obj,key)
				depend.notify()
			}
		})
	})
	//返回当前对象
	return obj
}

//监听obj对象
const objProxy = resPonsive(obj)

//创建新响应式对象
//我们可以直接把对象数据放到resPonsive函数上，当做实参传递过去
const infoProxy = resPonsive({
	name: "aaa"
})

//把需要实现响应式的函数放到watchFn中
watchFn(function(){
	console.log(objProxy.name)
	console.log(infoProxy.name)
})

watchFn(function () {
  console.log(objProxy.name, "+++++++");
  console.log(infoProxy.name, "-------");
});

//修改数据
objProxy.name = "zs"

以上内容仅供参考.

总结

例如：以上就是今天要讲的内容，本文仅仅是介绍了Vue2和Vue3的响应式原理，如果想学习的，按照上面步骤一步步练习，都是能掌握的。以上代码纯手打，可能会有错误，但并不影代码逻辑，有什么问题可以留言，欢迎指正。

CoderPeng.
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.响应式基本概念
李天下
07-05 5134
用电脑打开苹果或星巴克的官网，一点点缩小浏览器的窗口，你会发现，窗口虽然变小了，但不影响阅读，这就是响应式 1.什么是响应式 这里补充两个概念： * 渐进增强：先对正常的浏览器做适应，也就是让所有浏览器都兼容，然后再对可以设置CSS3等高级属性的高版本浏览器再进行优化，也就是对于高版本的浏览器，让用户体验更好一点 * 优雅降级：先设计高版本浏览器样式，然后在根据低版本浏...
【Vue3中的响应式原理】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-20 1万+
在Vue2中，数据响应式主要借助Object.defineProperty()来实现，存在的缺陷是无法操作数据的增加和删除，在Vue3中，数据响应式主要借助proxy和Reffect配合实现，可以做到实现数据的增删改查。
响应式布局的原理和实现方法
m0_46158288的博客
10-29 5808
什么是响应式布局 可以自动识别屏幕宽度，并做出相应调整的网页设计，布局和展示的内容可能会有所改变 当提到响应式布局时，自然会想到自适应布局，那两者到底有什么区别呢 什么是自适应布局 同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小 两者的区别 响应式布局是自适应布局的改进，当网页内容过多时，整体会显得拥挤，布局和展示的内容可能会有所变动 如何实现响应式布局 1、媒体查询 css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的高度和宽
响应式原理_简述VUE的响应式原理
weixin_28866303的博客
01-12 273
前言掘金或其他论坛也有很多讲vue原理的文章，我并不是想炒冷饭或什么的。我只是想记录一下自己的理解，帮助自己查漏补缺。很多东西以为自己都懂，但一讲出来就卡壳。特别是在面试的时候，一个熟悉的知识点，就是不知道该如何说起。进入正题：vue之所以能在前端领域所向披靡，它的响应式原理功不可没。Vue对数据进行拦截/代理，这使它在侦测数据变化的方面变得非常敏感和非常精确。Vue采用的依赖追踪，默认就是优化状...
浅谈Vue的响应式原理
10-16
让我们深入探讨Vue响应式原理及其底层实现。 首先，Vue采用的是MVVM（Model-View-ViewModel）架构模式。在Vue中，View层是DOM对象的HTML，ViewModel层是Vue实例的vm对象，而Model层则包含data、computed、methods等...
vue.js响应式原理解析与实现
10-18
下面我们将详细讲解Vue.js响应式原理及其实现方式。 首先，我们要了解Vue.js如何实现数据的响应式。这主要依赖于JavaScript的`Object.defineProperty`方法。在ES5中，`Object.defineProperty`允许我们为对象的属性...
vue响应式原理.pdf
04-19
响应式原理：在读取属性的时候收集依赖，在改变属性值的时候触发依赖的更新 实现一个observer，劫持对象属性的getter和setter 实现一个全局的订阅器Dep，可以追加订阅者，和通知依赖更新 在读取属性的时候追加当前...
代码详解Vuejs响应式原理
10-18
主要介绍了代码详解Vuejs响应式原理的基础知识，有兴趣的朋友们参考学习下吧。
Vue3.0数据响应式原理详解
10-16
Vue3.0的数据响应式原理是其核心特性之一，它极大地优化了开发体验并提高了性能。在Vue3中，响应式系统的实现主要依赖于ES6的`Proxy`和`Reflect`对象，这两个新特性使得Vue能够更加精细地监控数据的变化。 1. **ES6...
响应式布局大全代码
07-03
HTML加css加div响应式布局，包含各种网站的大概布局，适应于各种大小不同的设备。
响应式布局的基本介绍及原理
weixin_45674894的博客
10-19 3000
响应式布局的介绍 响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（pc、手机、平板） 什么是响应式布局 早期： 同一个页面需要开发不同设备的版本，公司开发成本较高 pc端需要开发写一套页面，专门给pc端看 移动端再开发一套页面，专门给移动端看 响应式布局： 同一个页面只需要开发一套网页，...
深⼊响应式原理
王依米
09-02 260
前⾯    2    章介绍的都是    Vue    怎么实现数据渲染和组件化的，主要讲的是初始化的过程，把原始的数据最 终映射到    DOM    中，但并没有涉及到数据变化到    DOM    变化的部分。⽽    Vue    的数据驱动除了数据渲染 DOM    之外，还有⼀个很重要的体现就是数据的变更会触发    DOM    的变化。 其实前端开发最重要的    2    个⼯作...
响应式布局
weixin_34021089的博客
11-21 296
2019独角兽企业重金招聘Python工程师标准>>> ...
vue--响应式原理
大小都是愁的成长之路
04-08 1283
概述：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。属性默认的特性：可删除，可遍历，可改写如何更改属性的默认特...
Vue源码系列19------响应式原理----派发更新
编程小渣渣的进阶之路
05-22 336
依赖收集的目的就是为了当我们修改数据的时候，可以对相关的依赖派发更新。Vue 数据修改派发更新的过程，实际上就是当数据发生变化的时候，触发 setter 逻辑，把在依赖过程中订阅的的所有观察者，也就是watcher，都触发它们的update过程，这个过程会把所有要执行update的watcher推入到队列中，又利用队列做了进一步优化，在nextTick后执行所有watcher的ru...
[译]JavaScript响应式的最佳解释
weixin_33976072的博客
09-27 116
原文地址：The Best Explanation of JavaScript Reactivity 许多前端JavaScript框架（例如Angular，React和Vue）都有自己的Reactivity引擎。通过了解响应式及其工作原理，您可以提高开发技能并更有效地使用JavaScript框架。在视频和下面的文章中，我们构建了您在Vue源代码中看到的相同类型的Reactivity。
Vue 实现流程-响应式原理(一)
陈旭阳
01-23 1162
Vue响应式原理 vue实现响应式原理的核心是Object.defineProperty。因为Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。 当我们将一个普通的Javascript对象传给实例的data选项，Vue会遍历此对象的所有属性，并且使用Object.defineProperty把这些属性全...
响应式网页设计
dreamjl的专栏
08-02 1017
概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。 背景 PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿
angular响应式原理
最新发布
10-11
Angular的响应式原理是基于RxJS库实现的。在Angular中，组件中的数据可以通过绑定到模板中的视图上，当数据发生变化时，视图会自动更新。这种自动更新的机制就是Angular的响应式原理。 具体来说，Angular中的响应式原理包括以下几个部分： 1. 双向数据绑定：通过ngModel指令实现双向数据绑定，当模板中的输入框内容发生变化时，组件中的数据也会随之更新。 2. 变化检测：Angular会自动检测组件中的数据变化，并且更新视图。这个过程是通过Zone.js库实现的。 3. Observable和订阅：Angular中的很多异步操作都是通过Observable和订阅来实现的。当Observable中的数据发生变化时，订阅者会自动接收到通知，并且更新视图。 4. ChangeDetection策略：Angular中有两种ChangeDetection策略，分别是Default和OnPush。Default策略会在每个事件循环中检测所有组件的变化，而OnPush策略只会在组件输入属性发生变化时才检测变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值