$watch

$watch 可用于监听特定属性的变化。当属性变化时，会执行传入的回调函数，回调函数会接收到新的属性值和原属性值。

参数

  • key
    • string | Array<string>
    • 用于查找特定属性值，仅接受用 . 分割的字符串。
  • handler
    • Function
    • 当产生变化的时候会执行的函数
    • 接受两个参数 newVal 和 oldVal，分别代表新旧属性值。但是在 deep 模式下对子元素的修改不会保存两份快照。

  • option

    • Object
    • 可选项
    • 内容包括
      • deep
        • boolean
        • 是否深度监听，可用于监听 Object 和 Array 内部变量的变化。但是某些情况下需要配合$set 和$del使用
        • 默认为false
      • diff
        • boolean
        • 是否需要比对。如果为 false，只要有对属性的相关设置就会执行回调函数。
        • 默认为true
      • other
        • Object | Array<*>
        • 在寻找属性的时候，一般会从所在实例本身上寻找，加入需要监听其他实例的属性，可以穿入该参数。
        • 默认为undefined
      • proxy
        • boolean
          • 在做深度监听的时候我们会发现，对于新添加的元素或删除已知元素无法监听。因此我们需要使用$set和$del触发行为。事实上，Proxy 可以帮助我们解决这个问题。如果设定 proxy 为 true， 我们可以随意操作对象。
          • 但是由于浏览器的支持度不佳，我们不推荐在生产环境下使用。
            返回

  • unwatch

    • Function
    • 函数用于解绑监听函数，执行后，变化不会再调用回调函数
      例子：

你可以轻易监听 video 上的一些属性。

  1. import Chimee from 'chimme';
  2. const plugin = {
  3.   name: 'plugin',
  4.   create () {
  5.     this.$watch('controls', (newVal, oldVal) => console.log(newVal, oldVal));
  6.   }
  7. }
  8. Chimee.install(plugin);
  9. const player = new Chimee({
  10.   wrapper: 'body',
  11.   plugin: ['plugin']
  12. });
  13. player.controls = true; // true, false

又或者自定义属性：

  1. import Chimee from 'chimme';
  2. const plugin = {
  3.   name: 'plugin',
  4.   data: {
  5.     test: 1
  6.   }
  7.   create () {
  8.     this.$watch('test', (newVal, oldVal) => console.log(newVal, oldVal));
  9.   }
  10. }
  11. Chimee.install(plugin);
  12. const player = new Chimee({
  13.   wrapper: 'body',
  14.   plugin: ['plugin']
  15. });
  16. player.plugin.test = 2; // 2, 1

你也可以深度监听数组，直接调用数组的操作方法：

  1. import Chimee from 'chimme';
  2. const plugin = {
  3.   name: 'plugin',
  4.   data: {
  5.     test: [1, 2, 3]
  6.   }
  7.   create () {
  8.     this.$watch('test', (newVal, oldVal) => console.log(newVal, oldVal), {deep: true});
  9.   }
  10. }
  11. Chimee.install(plugin);
  12. const player = new Chimee({
  13.   wrapper: 'body',
  14.   plugin: ['plugin']
  15. });
  16. player.plugin.test.push(4); // [1, 2, 3, 4], [1, 2, 3, 4]

同理你也可以深度监听对象，但是对新增元素或者删除元素需要使用 $set 和 $del 进行辅助。

  1. import Chimee from 'chimme';
  2. const plugin = {
  3.   name: 'plugin',
  4.   data: {
  5.     test: {
  6.       foo: 1
  7.     }
  8.   }
  9.   create () {
  10.     this.$watch('test', (newVal, oldVal) => console.log(newVal, oldVal), {deep: true});
  11.   }
  12. }
  13. Chimee.install(plugin);
  14. const player = new Chimee({
  15.   wrapper: 'body',
  16.   plugin: ['plugin']
  17. });
  18. player.plugin.test.foo = 2; // {foo: 2}, {foo: 2}
  19. player.$set(test, 'bar', 1); // {foo: 2, bar: 1}, {foo: 2, bar: 1}
  20. player.$del(test, 'bar'); // {foo: 2}, {foo: 2}
注意：- 并非所有 video 相关属性都可以监听。现阶段只支持监听$videoConfig 中除src 以外的部分。src 的值因为涉及到 video 播放核心的变换，以及事件拦截等，建议采取事件驱动模式编写。paused 等 video 只读属性，因为需要监听原生 video，故暂不提供。且以上属性大部分可以通过事件获取。- 采取深度监听时，子元素修改后回调函数并不会获得原有对象快照- 深度监听时需要使用 $set 和 $del 进行辅助。