如何使用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能给项目带来便于开发,可维护的价值?暂时也不太清楚,状态管理机制的核心是什么?
转载于:https://www.cnblogs.com/zhang-jian/p/8675200.html
如何使用VUE做组件化开发 -- 思考篇相关推荐
- Vue/React组件化开发的一些思考
组件化开发的优势 组件化开发利用了面向对象的威力,易于构建规模比较大的应用并且获得比较高的可维护性,可扩展性.Vue.React厂商及社区不但提供了组件化开发的框架,而且提供了易于起步并包含了从编码. ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
- Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤 组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
- 【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发 组件化 认识组件化 注册组件 全局组件和局部组件 父子组件 组件数据 父子组件的通信 父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发 前言 一.vue2 1.引入静态文件 2.声明组件 二.语法搭配 使用vue方法调用th数据 前言 提示:thymeleaf 固然好,但是 vue 也 ...
- Vue.js教程-组件化开发
Vue.js教程-组件化开发 前言 Vue组件化 什么是组件化 Vue单页面开发的解释 组件化思想 组件的使用 原理 实际开发中的使用-父子组件 父子组件传递数据 父传子-props用法 子传父-th ...
- 组件化开发和模块化开发概念辨析
网上有许多讲组件化开发.模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分.而且实际上许多人对于组件.模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误. 想分清 ...
- mysql组件化_组件化开发和模块化开发概念辨析
网上有许多讲组件化开发.模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分.而且实际上许多人对于组件.模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误. 想分清 ...
最新文章
- Http Module 介绍(转)
- Python中MySQLdb的connect的用法
- 成功解决OpenCV Error: Assertion failed (ssize.width 0 ssize.height 0) in cv::resize, file C:\proj
- leetcode 667. Beautiful Arrangement II | 667. 优美的排列 II(Java)
- java对象占用内存大小?
- mysql fulsh_MYSQL教程:MySQL用户帐号管理_MySQL
- Go圈10月份优质博主推荐
- 一代人的记忆!又一波微信表情默默消失了
- 对门快递写的我家地址,总是不改过去,收到快递我怎么办?
- Geant4在Ubuntu下的安装教程
- 系统学习深度学习(三十八)--深度确定性策略梯度(DDPG)
- Rainbow Tables
- 本特利330906-02-12-05-02-CN传感器
- 特殊ip地址汇总!!!
- 开发制作一个小程序需要多少钱
- android开机动画不播放,android 设置activity启动退出动画 | 解决设置activity 动画不生效问题...
- 看张亚飞《.Net for Flash FMS》的笔记
- 牛客 HJ25 数据分类处理
- 魔法android 游戏,魔法喵喵游戏最新版_魔法喵喵游戏最新安卓版预约 v1.0_游戏500...
- 快手616品质购物节电商报告来了!24位达人带货破亿,新一代带货王诞生!