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

Z时代
2024-01-10
分类：综合

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完全可以看做是由不同的组件树构成。

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