Vue - MVVM模、Object.definProperty数据代理

最新推荐文章于 2024-01-04 21:53:57 发布

鬼鬼骑士

最新推荐文章于 2024-01-04 21:53:57 发布

阅读量409

点赞数

分类专栏：笔记 Vue 成长阶段文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39123467/article/details/127265133

版权

笔记同时被 3 个专栏收录

324 篇文章 9 订阅

订阅专栏

成长阶段

272 篇文章 4 订阅

订阅专栏

Vue

18 篇文章 0 订阅

订阅专栏

文章目录

MVVM模型
Object.defineProperty

MVVM模型

介绍

在这里插入图片描述

分析

在这里插入图片描述

<!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>Document</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const s = new Vue({
			el: '#root',
			data: {
				name: '周楼大学',
				address: '刘阁乡',
			},
		})

		console.log(s)
	</script>
</html>

在这里插入图片描述

测试原型数据

在这里插入图片描述

讲师笔记

在这里插入图片描述

Object.defineProperty

入门

在这里插入图片描述

遍历测试

defineProperty设置的属性遍历不到

一般遍历

在这里插入图片描述

for in遍历


			for (let key in person) {
				console.log(person[key])
			}

在这里插入图片描述

变更为“可遍历”

只需要加个参数enumerable

			Object.defineProperty(person, 'age', {
				value: 18,
				enumerable: true, //控制属性是否可以枚举，默认值是false
			})

在这里插入图片描述

变更为“可被修改”

			Object.defineProperty(person, 'age', {
				value: 18,
				enumerable: true,
				writable: true, //默认是false
			})

在这里插入图片描述

变更为“可删除”

			Object.defineProperty(person, 'age', {
				value: 18,
				enumerable: true,
				writable: true, //默认是false
				configurable: true, //控制属性是否可以被删除，默认false
			})

在这里插入图片描述

getter 和 setter

<!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>Document</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			Vue.config.productionTip = false
			let number = 18
			let person = {
				name: '张三',
				sex: '男',
			}

			Object.defineProperty(person, 'age', {
				// value: 18,
				// enumerable: true,
				// writable: true, //默认是false
				// configurable: true, //控制属性是否可以被删除，默认false

				//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
				get: function () {
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体指
				set(value) {
					console.log('有人修改了age属性，且值是', value)
					number = value
				},
			})
		</script>
	</body>
</html>

在这里插入图片描述

数据代理

<!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>Document</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
		<script type="text/javascript">
			let obj = { x: 100 }
			let obj2 = { y: 100 }

			Object.defineProperty(obj2, 'x', {
				get() {
					//当我get obj2.x时会得到obj.x
					return obj.x
				},
				set(value) {
					// 当我设置obj2.x的值时，就把这个x的值赋给obj.x
					obj.x = value
				},
			})
		</script>
	</body>
</html>