20240923uniapp学习工作-vue

继续看 js proxy.

• set(target,prop,value,receiver) : 拦截对象属性的写入操作.

<template>
	<view class="container">
		
	</view>
	<view>
		<button v-on:click="button_click">点击</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eventName:"longpress‌", 
			}
		},
		methods: {
			button_click() {
				const originObj = {
					name:"lee",
					sex:"女"
				};
				
				// 定义一个用于处理属性写入的处理器对象
				let handler = {
				  set:function(target, property,value) {
					  if(property === 'name') {
						  console.log(`Setting 'name' to ${value}`);
						  target[property] = value+"拦截";
					  } else {
						  console.log(`Setting ${property} to ${value}`);
						  target[property] = value;
					  }
					  return true;
				  }
				};
				
				 
				// 创建一个代理对象
				let proxy = new Proxy(originObj, handler);
				 
				// 设置属性
				proxy.name = 'zhang';
				proxy.sex = "雄";
				 
				// 读取属性
				console.log(proxy.name); // 读取属性：name
				console.log(proxy.sex);// 读取属性: sex
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

看完这两个方法, 基本知道拦截器是怎么回事了, 还有以下这些方法

• apply(target, thisArg, args)：拦截函数的调用操作。
• construct(target, args, newTarget)：拦截new操作符的调用操作。
• has(target, prop)：拦截in操作符的调用操作。
• deleteProperty(target, prop)：拦截delete操作符的调用操作。
• defineProperty(target, prop, descriptor)：拦截Object.defineProperty()方法的调用操作。
• getOwnPropertyDescriptor(target, prop)：拦截Object.getOwnPropertyDescriptor()方法的调用操作。
• getPrototypeOf(target)：拦截Object.getPrototypeOf()方法的调用操作。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf()方法的调用操作。
• isExtensible(target)：拦截Object.isExtensible()方法的调用操作。
• preventExtensions(target)：拦截Object.preventExtensions()方法的调用操作。
• ownKeys(target)：拦截Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys()等方法的调用操作。

Proxy 的基本用法就是之前演示的, 使用 proxy 对象包装一下目标对象. 下面代码即如何使用 Proxy 拦截对象的读写操作:

let target = {
  name: "Alice",
  age: 20
};

let handler = {
  get: function(target, prop) {
    console.log("get " + prop);
    return target[prop];
  },
  set: function(target, prop, value) {
    console.log("set " + prop + " = " + value);
    target[prop] = value;
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.name); // get name Alice
proxy.age = 21; // set age = 21

在上面的示例代码中，我们定义了一个目标对象target，并使用Proxy对象包装它。然后，我们定义了一个handler对象，它包含了get和set方法，用于拦截对象的读写操作。在get方法中，我们输出了被读取的属性名称，并返回属性值。在set方法中，我们输出了被写入的属性名称和值，并将值写入目标对象。最后，我们使用proxy对象读取了目标对象的name属性，并将其输出到控制台。然后，我们使用proxy对象将目标对象的age属性设置为21，并将设置的过程输出到控制台。

data() 函数返回的对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的this) 上.

那这句话就明白是什么意思了.

export default {
  data() {
    return {
      count: 1
    }
  },

  // mounted 是生命周期钩子，后面会学到
  mounted() {
    // this 指向当前组件实例
    console.log(this.count) // => 1

    // 数据属性也可以被更改
    this.count = 2
  }
}

安卓开发又出奇怪的问题.搞了差点一天.