vue 事件修饰符,computed,watch

89 阅读1分钟

Vue 中的事件修饰符:

  1. Prevent:  阻止默认事件(常用)

  2. Stop: 阻止事件冒泡 (常用)

  3. Once: 事件只触发一次 (常用)

  4. Capture: 使用事件的捕获模式

  5. Self : 只有 event.target 是当前操作的元素才触发发事件

  6. Passive: 事件的默认行为立即执行,无需等待事件回调执行完毕。

computed 计算属性:

   1)定义:要用的属性不存在,要通过已有属性计算得来。

   2)原理:底层借助了Object.defineproperty 方法提供的getter 和 setter.

   3)get 函数什么时候执行?

       A. 初次读取时会执行一次。

       B. 当依赖的数据发生改变时会被再次调用。

  4)优势:

      与 methods 实现相比,内部有缓存机制(有复用效果),效率更高,调试方便。

  5) 备注:

      A. 计算属性最终会出现在vm上,直接读取使用即可。

      B. 如果计算属性要被修改,那必须写set 函数去响应修改,且set 中要引起计算时依赖的数据发生变化时。

Computed 和 watch 之间的区别:

   1. Computed 能完成的功能, watch 都可以完成。  

   2. Watch 能完成的功能,computed 不一定能完成,例如:watch 可以进行异步操作。

   两个重要的小原则:

       1. 所有被vue管理的函数,最好写成普通函数,这样this 的指向才是vm 或 组件实例对象。如果写成了箭头函数,this 指向就window

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