Vue中的数据代理

日记

Vue中的数据代理

依靠JS中的Object.defineProperty为底层原理，使用的get函数与set函数

get函数与set函数

getter调用执行 set设置执行

methods事件处理

vue中的事件修饰符：

1.prevent:阻止默认事件（如连接跳转）常用
2.stop:组织事件冒泡（常用）
3.once:事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时候才是促触发事件
6.passive:事件的默认行为立即执行，无需等待事件回调完毕

键盘按键修饰

1.VUE中常用的按键别名: (@keyup.enter)例子
回车 = enter
删除 = delete
推出 = esc
空格 = space
换行 = tab(特殊，必须配合keydown使用)
上下左右 up left down right

2.vue未提供别名的按键，也可以用按键原始的key值去绑定，但注意要转为caps-lock（双单词短横线命名）
3.系统修饰按键(用法特殊)：ctrl、alt、shift、meta（win）
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放，事件才能被触发
（2）配合keydown使用：正常触发事件
4.也可以配合按键码使用，但mdn显示已遗弃特性不推荐使用

计算属性

1.定义：要用的属性不存在，要通过vm里已有的属性计算得来
2.原理：底层借助了objecet，defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被再次调用执行
4.优势：与methods实现相比，内部有缓存机制，效率高调用方便
5.备注： 1.计算属性最终会出现在vm上，直接读取调用即可
2.如果计算的属性要被修改，那必须写set函数去响应修改，且set要引起计算机时依赖的数据发生改变