Vue练手项目todoList事件总线写法

源码仓库地址

https://gitee.com/zyqwasd/todo-list-vue

运行

1. git clone [email protected]:zyqwasd/todo-list-vue.git

2. npm install 

3. npm run serve

效果图

注意事项

1. 在定义事件总线的时候  你可以直接在 Vue.prototype.$bus = new Vue() 来挂载一个新的vm 

2. 当然你也可以像我一样下面这种定义方法 但是一定要在beforeCreate钩子函数就是刚刚创建了vm 对象时候挂载 因为这个时候页面还没有创建

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  beforeCreate () {
    // 定义事件总线
    Vue.prototype.$bus = this
  },
}).$mount('#app')

3.最好在组件销毁前要销毁事件

  beforeDestroy () {
    // 在销毁之前要解绑监听事件
    this.$bus.$off('todoAll')
  },

4. 在获取数据渲染总数和完成事件的时候最好挂载到created上因为页面还有被渲染先订阅获取数据才能在刷新后数据已经回来了 （因为我的数据在localStorage中）

  created () {
    this.$bus.$on("todoAll", (data, compelteLength, allLength) => {
      this.handAll = data;
      this.complete = compelteLength;
      this.todoAll = allLength;
    });
  },

5. 监视数据的时候因为我们的数据都定义在对象中 watch要想触发必须深度监视 那种函数简写方式就不好用了必须深度监视

  watch: {
    todoList: {
      // 表示深度监视
      deep: true,
      // 然后是一个事件函数handler固定的
      handler(value) {
        localStorage.setItem('todos', JSON.stringify(value))
      },
    },
  },

6.在编辑文本框的时候 一定要等数据渲染完了才能给input 框获取焦点 当然下面那个函数也可以写成一个setTimout定时函数 就会放到执行站最后执行

    handleRedact(item) {
      if (Object.prototype.hasOwnProperty.call(item, 'redact')) {
        item.redact = true
      } else {
        this.$set(item, 'redact', true)
      }
      // 就是这里必须等待input渲染完才能获取焦点 
      this.$nextTick(() => {
        this.$refs.blurChange[0].focus()
      })
    },