Vue之动态事件绑定

什么都有动态的，动态的值，动态的属性，动态响应数据，自然少不了动态的事件绑定
什么是静态的呢？在模板语法中template的标签绑定v-on:eventName-“method”

$on

this.$on(eventName, eventHandler) 绑定组件，动态侦听事件

{
  created() {
    this.$on('gg', this.gg) 
    //注意这个this.gg 它只是一个函数，但是有意思的是，在$on的內部的回调里 this.gg.call(this) 是这么执行的
    //你或许会说这可能是VM在其中绑定option.methods到vm上做的，但是你可以直接this.$on('gg', ()=>{console.log(this)}) 试试
  },
  methods: {
    gg() {
      console.log('打印出gg')
    }
  }
}

$off

this.$off(eventName, eventHandler) 解绑组件，接触事件侦听

{
  created() {
    this.$on('gg', this.gg) 
  },
  template: `<div id="app">
    <button type="button" v-on:click="change" ></button>
  </div>`,
  methods: {
    gg() {
      console.log(this)
      console.log('打印出gg')
    },
    change() {
      this.$emit('gg')
    }
  },
  beforeDestory() {
    this.$off('gg', this.gg) 
  }
}

$once

这个东西其实非常常用
举个例子就知道

expoet default {
  method() {
    windowScroll() {
      console.log('scrolled')
    }
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll)
  },
  beforeDestory() {
    window.removeEventListener('scroll', this.windowScroll)
  }
}

大部分其实都是这么写的，但是又什么不好的吗，你想想每次对全局或者其它一些不会卸载的对象绑定一些东西，最后解绑的
地方不在一起，代码层次的，可维护性不高，这还是简单的一段代码。那用$once怎么写

expoet default {
  method() {
    windowScroll() {
      console.log('scrolled')
    }
    //绑定
    window.addEventListener('scroll', this.windowScroll)
    //卸载
    this.$once('hook:beforeDestory', function() {
      window.removeEventListener('scroll', this.windowScroll)
    })
  }
}

Vue.nextTick( [callback, context] )

说完上面的$once你是否有想到这个api，它是干什么的？响应数据变化，更新DOM的回调。你如果看了
打开vue的正确姿势 栏目的 掌握vue核心概念之响应式数据 你就能应该能理解，数据变化其实连带着DOM更新，但这个DOM不会立即更新，
而是把这一些列更新事件加入异步队列，再完成更新。

{
  data: () => ({
    value: 'wucan'
  }),
  template: `<div id="app">
    <input ref="input" v-model="value" />
    <button type="button" v-on:click="change" ></button>
  </div>`,
  methods: {
    change() {
      this.value = 'zix'
      console.log(this.$refs.input.value) // => wucan DOM仍然没有更新
      this.$nextTick(()=>{
        console.log(this.$refs.input.value) // => zix 更新完成的DOM函数回调
      })
    }
  }
}

可以直接通过promise完成回调 版本大于2.1

最后

希望发现错误的朋友能够毫不吝啬的给予指正，共同进步