Vue響應式原理

時間 2021-08-13

標籤 javascript html vue java ide code htm utf-8 get 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			let person = {
				name: "張三",
				age: 15
			}
			//vue2響應式原理
			let p = {}
			Object.defineProperty(p,"name",{
				configurable:true,
				get(){
					console.log("getter")
					return person.name
				},
				set(val){
					console.log("setter")
					person.name=val
				}
			})
			Object.defineProperty(p,"age",{
				configurable:true,
				get(){
					console.log("getter")
					return person.age
				},
				set(val){
					console.log("setter")
					person.age=val
				}
			})
			//vue3響應式原理
			let proxy = new Proxy(person,{
				get(target,propName){
					console.log("getter")
					//return target[propName]
					return Reflect.get(target,propName)
				},
				set(target,propName,val){
					console.log("setter")
					return Reflect.set(target,propName,val)
				},
				deleteProperty(target,propName){
					console.log("deleteProperty")
					//return delete target[propName]
					return Reflect.deleteProperty(target,propName)
				}
			})
		</script>
	</body>
</html>

相關標籤/搜索