微信小程序 03 数据劫持代理和事件绑定

3.1 Vue 中 data 选项 是怎么做到的呢 ？

利用 Object.defineProperty 就能做到 数据双向绑定。

Object.defineProperty(属性所在对象,属性的名字,描述符对象)

描述符对象是一种玩法和限制。

1. configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为true。

2. enumerable：表示能否通过for in循环访问属性，默认值为true

3. writable：表示能否修改属性的值。默认值为true。

4. value：包含这个属性的数据值。默认值为undefined。

5. get 方法：在 获取 属性时，执行 的函数方法。

6. set 方法：在 设置 属性时，执行 的函数方法。会有个 参数，这个参数 就是 要 重新赋值的数据。

---

let data = {
	username:'mqy',
	age:20
}

//模拟组件的实例 this
let _this= {

}

// 利用 Object.defineProperty
for(let item in data){
	Object.defineProperty(_this,item,{
		//	我们会通过 设计get 方法 拿到 data[item]
		get(){
			return data[item]
		},
		set(newVal){
            data[item] = newVal;
        }
	})
}

这里的 set(){} 如果 里面 写的 是 _this.item = xxx 那么就会进入 死循环，因为我们知道 set 方法 就是 在 _this 修改一些属性时 才会执行的。而 _this.item = xxx 又是在 修改属性了。也就是 set() 方法 又会执行一次，然后 就进入 死循环。

---

3.2 事件绑定

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。表单事件 和 自定义事件 通常 用的都是 非冒泡事件。
3. 事件捕获：捕获事件是 从外到内的过程。从父节点开始捕获 一直捕获到 需要触发的 子节点身上！

冒泡事件：简单来说，就是 从当前触发的这个节点处，从内到外的 再去 触发 那些父节点的 事件！俗称冒泡。

bindTap：冒泡事件绑定的 参数。

catchTap：非冒泡事件绑定的 参数。

<view class="mainContext">
  <image class="img" src="/头像.jpg"></image>
  <text class="textA">{{msg}}</text>
  <view class="showText" bindtap="fatherText">
    <text bindtap="childText">Hello World</text>
  </view>
</view>

fatherText(){
    console.log("文本框 view 被点击了！");
  },

  childText(){
    console.log("Hello World 文本被点击了！");
  },