zoukankan      html  css  js  c++  java
  • Vue响应式原理

    
    <!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>
    
    
    
  • 相关阅读:
    Android6.0权限组申请
    Win10安装程序出现error code 2502 2503
    StartUML2.8破解
    Batchsize与learning rate
    Tensorflow 多gpu训练
    centos7系统时间修复
    服务器安装小结
    caffe与tensorflow中的pooling
    MixConv
    blazeFace
  • 原文地址:https://www.cnblogs.com/botaoJava/p/15007045.html
Copyright © 2011-2022 走看看