Vue EventBus 使用与插件开发

• 自定义事件
• 如果事件要广播(被多组件使用)
• 内存泄漏问题

简单使用

<div id="app">
  <!-- 注意!!! 如果只注册事件, 页面没有渲染count, vue-devtools 是不会显示count的更新的 -->
  {{count}}
  <button @click='count++'>增加</button>
  <button @click='count > 0? count--:0'>减少</button>
  <button>事件</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      count: 0
    }
  })
</script>

• 注意!!! 如果只注册事件, 页面没有渲染count, vue-devtools 是不会显示count的更新的
  • 这里涉及到 vue 对数据的监视问题, 没有渲染, 不监视会提高效能

监控内存的使用

<div id="app">
  {{count}}
  <button @click='count++'>增加</button>
  <button @click='count > 0? count--:0'>减少</button>
  <button>事件</button>
  <big-text-component v-for="i in count" :key="i"></big-text-component>

</div>
<script src="./vue.js"></script>
<script>
  const BigTextComponent = {
    template: `<div>I have big text</div>`,
    created() {
      this.text = new Array(999999).fill('www.hankc.cn').join(',')
    }
  }
  let vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    components: {
      BigTextComponent
    }
  })
</script>

使用 Chrome 开发者工具, 观察内存的使用

eb1.png

• 点击增加按钮, 再次查看内存

eb2.png

• 点击减少按钮, 再次查看内存

eb3.png

• ok, 现在是正常回收的, 接下来我们要做的是, 就是发现在什么情况下, 他是不会回收的

To be continued

我去学小程序了...