如何使用VUE作组件化开发 -- 思考篇

技术学习并不难，如何使用才是关键

用VUE 开发已经快一年的时间了，在感叹webpack+vue+vuex+vue-router全家桶为开发带来的便捷，同时也回到最初的技术选择问题上。

为何要选择VUE？

　　由于像做者说的那样，vue是一个轻量型的前端MVVM框架，更快的虚拟DOM渲染？

　　然而实际开发中并无遇到很大的数据渲染（1000以上的都没有），在形式上看来，VUE的数据绑定和以前用angular作数据绑定没有什么差别。惟一可能遇到的差异是当须要将某个功能作到可复用时，我能使用VUE的组件component将功能作成一个组件，在angular里须要作成一个directive，在数据绑定和数据变化触发视图更新上不须要手动scope.$apply。再配合使用vue-loader，能够将组件声明成一个单独的.vue后缀文件。

　　当初选择VUE时，也是由于用angular异步加载模板的时候，模板常常会被缓存。每次都须要强制刷新才能获取最新的页面。而vue+webpack，再加上vue的异步组件功能，将组件定义为一个工厂函数，加上webpack的代码分割功能（output）和hash值命名。就能够解决angular的模板缓存问题。

组件化思想，将页面分红可复用，可维护的独立模块。

什么时候须要组件化，如何组件化？

　　当前的开发思路只是将一些须要在两个地方以上复用的功能抽离出来作成一个单独的可复用组件。有些组件的共性，有能够经过mixin功能混合，这也是复用。

　　可能在个人思想里，只要是可复用的部分均可以无条件的拆成组件，或mixin。思路应该是没有什么问题。可在实际作的时候，由于太想要把一个可复用的功能拆成一个单独组件，在差别化的地方不吝啬的使用props，$refs对组件传值和访问组件的某些功能。虽说使用$refs访问组件的内置属性、方法，和使用事件机制均可以达到一样的效果。但对组件的独立性，解耦来讲，父传子最好仍是用props； 子传父可使用事件，中间组件，vuex。非父子组件可用中间组件，vuex传值。

　　在构思组件的时候，要明确须要哪些数据？这些数据对应的功能都应该在组件内实现？哪些数据须要暴露给外部组件？这些数据应该是值，仍是引用（对象/数组）？能够经过事件或vuex保存为全局变量。

尤大大说过，应用类的UI彻底能够看作是由不一样的组件树构成。

　　那到底改如何构思组件，什么状况下须要使用将页面分红组件？这一点思想在我目前的项目上没有实现过，目前对组件化的理解还不是很深。

不须要响应式的值

template模板中的数据源并不都是响应式的，好比使用v-for指令循环生成的列表，数据源数组并不须要加入data中变成响应式，可是在模板中绑定的数据又必需要来自data。

状态管理

在angularJS里，服务是单例对象，能够在不一样的controller, module, directive 之间共享数据，但不是响应式的。

vue有vuex作状态管理，就是管理不一样组件之间须要共享的数据，包含对数据的操做。怎么才能发挥vuex的最大做用，在何时使用vuex能给项目带来便于开发，可维护的价值？暂时也不太清楚，状态管理机制的核心是什么？