近期问题总结和思考

前段时间一个朋友提到了几个关于vue开发时候的问题，看了一下，没有一个是懂得，甚是惶恐；

vue 如何细粒度开发
如何解耦vue的开发
如何处理多业务场景和项目基础架构组件的关系
vue异步更新
vue源码阅读
vue MVVM中observe dep watcher的源码阅读
vue Virtual DOM 在比较更新新旧DOM的时候做了什么 Diff函数

在vue如何细粒度开发问题上，查阅博客，关于细粒度和粗粒度的区分

粗粒度的开发，是在功能模块的开发，比如权限设计，权限管理……某个用户的特定的模块的权限控制，就是粗粒度开发;
细粒度开发就是数据级的开发，到数据层的开发，比如vuex就是vue中细粒度开发的体现;
vuex相当于一个store，或者是一个全局的global，可以管理全局的状态，优点是只能通过getter，setter来修改和获取vuex中的状态；
但是有一个问题，vuex中的数据在用户刷新的时候是不存在的，就是说在用户通过vuex中的user_id获取到用户的data之后，如果页面刷新之后是根据user_id来再次获取数据的话，获取到的user_id是undefined;

之前有过一个关于vuex刷新数据为空的总结：

2017-05-08

Vuex保存数据刷新后清空的问题
在vuex的state中设置变量进行全局管理，但是在页面刷新之后数据会变成state初始化时候的数据，所以数据只是暂时存的，刷新之后就会改变，所以需要保存到浏览器缓存或者session中。

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
Vue.use(Vuex)
// 应用初始状态
const state = {
    count: 10,
    token: sessionStorage.getItem('token') || '',
    id: sessionStorage.getItem('id') || 0
}
// 定义所需的 mutations
const mutations = {
    INCREMENT(state) {
        state.count++
    },
    DECREMENT(state) {
        state.count--
    },
    SETTOKEN(state, token) {
        state.token = token
        sessionStorage.setItem('token', token)
    },
    DRIVERID(state, id) {
        state.id = id
        sessionStorage.setItem('id', id)
    }
}
// 创建 store 实例
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations
})

如何解耦vue的开发

首先就是要理解什么是解耦：我的理解是，做自己的事，尽可能少的和其他模块建立强联合关系；

在vue的开发中，解耦最大的办法是，合理分工，model，view层的分工，model就只关心数据的处理，view层就只关心视图的显示；高耦合的就是你在model里面去处理view的显示，使用jq控制dom…；还有一个点就是组件化开发，把可能会用到的组件抽象出来，封装成独立的组件，父子组件的交流，只关系props，data的关系，而不必关系各自view到底是什么，slot插槽也是解耦的一个好办法；(完全的解耦是不可能的，只能做到model只关心model数据处理，view只关心视图显示)

如何处理多业务场景和项目基础架构组件的关系

不懂，这是什么鬼；
但是项目基础架构，组件都好，都是为业务服务，多业务是多种场景的业务？高度抽象的组件，解耦的组件，不关心外部数据，只在乎某个业务场景的业务得到的组件，也就是说基础架构组件要细化组件的封装；比如FPOS上订单组件，订单可能是一个web页面，可能是一个dialog弹出层，也可能是其他的，同时，订单可以有多种订单形式；不可能写一个增加需求业务之后就大幅度修改的组件，所以必须将组件细化，通用的基础框架可以在组件内再生组件；（2017-08-29）

vue异步更新

异步更新队列

当你设置 vm.someData = ‘new value’ ，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

暂时是这些了。。。现在再一步步阅读源码；深入浅出NodeJS