Vue02

目录

键盘事件

计算属性

监视属性watch

深度监视

---

键盘事件

1.Vue中常用的按键别名:

• 回车=> enter
• 删除=>delete(捕获“删除”和退格”键)
• 退出=>esc
• 空格=>space
• 换行=>tab（特殊，必须配合keydown使用）
• 上 => up
• 下=>down
• 左=>left
• 右=> right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
 

计算属性

1. 定义:要用的属性不存在，要通过已有属性计算得来。
2. 原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3. get函数什么时候执行?(1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。
4. 优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注:

• 1.计算属性最终会出现在vm上，直接读取使用即可。
• 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

监视属性watch

1. 当被监视的属性变化时,回调函数自动调用,进行相关操作
2. 监视的属性必须存在,才能进行监视!!
3. 监视的两种写法:

• (1).new Vue时传入watch配置
• (2).通过vm.$watch监视
   

深度监视

(1).vue中的watch默认不监测对纠内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变(多层）。

备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
 

computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。

两个重要的小原则:

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。