vue.js组件开发实践的详细说明

序

目前公司做一个H5活动，特别是有一定统一结构的活动，需要一个重复的轮子。后来接到一个基于模板的活动设计系统的需求，发现了以下内容。借油开车。

模块化

需求一来，如何实现，技术选择自然成为首要问题。鉴于目前mvvm框架和基于组件开发的流行，决定在技术栈中采用vue es6作为组件。

在这里，首先让我们简单谈谈web前端组件开发的历史：

最早的组件化结构和代码结构可能如下：

-lib/components/calendar |-calendar . CSS |-calendar . js |-calendar . html将功能相同的组件文件放在同一个目录下，结构清晰，职责明确，视图、样式、脚本之间关系明显，单元测试容易，独立显示和交互的最小单元。

稍后：

在前面的基础上，对组件进行了生命周期处理(初始化、资源获取、渲染、更新、销毁等)。)，理顺了组件的各个阶段，有助于理解组件实现(从初始化到销毁)。并且借助组件各阶段的钩子，可以更好地利用和扩展组件。对外公开接口，增加数据绑定或者数据仓库，各种xMD模块加载器的出现，也让这种开发方式上升到了一个更高的层次。ExtJs和YUI都是这个领域的专家。

稍后：

有了之前的发展，进步很大，但还是不够。组件的可重用性(基本样式、基本逻辑、基本属性、可重用的稳定业务逻辑等。)，组件之间的通信，全局状态管理，甚至是否有更好的代码组织都还是问题。Angular、React、Polymer和Vue等mvvm框架的出现，以及webpack和browserify等构建和预编译工具的出现，都在试图解决这些问题。

ES6

在正式开始vue之前，既然这个项目使用了es6，那就来说说大家都关注的EcmaScript6。别的我就不说了。历经多年磨难，es6终于在2015年下半年定型，正式命名为EcmaScript2015。每个刚接触es6的人都应该有这样的疑问。es6是为了什么，或者它解决了什么？虽然老版本的es4/5有很多坑，就像Brendan Eich对js的评价一样：‘优秀不是原创，原创不是优秀’。但是我们不就是去渣留精，一路填坑吗？

直接来说，es6的共同特点是：支持类、箭头函数、对象和数组的解构、默认参数、不定参数、对象合并、let和const关键字、for of iteration、字符串模板、对象文字增强、同名对象的文字缩写、模块化导入/导出、map、promise、* yeild generator等。

这里有几个常用的简单词语：

首先，班

当没有类时，创建类的标准方法是将非功能属性放入构造函数中，在原型链中添加功能属性。类继承的实现更加多样化：对象模拟、调用/应用模式、原型链模式等等。es6的类和扩展关键字的出现给出了统一的规范

class People { constructor(姓名、年龄、性别){ this . name=name } say name(){ return this . name } } class Student扩展People { constructor(姓名、年龄、性别、技能){ super(姓名、年龄、性别)this . skill=skill } say skill(){ return this . skill } }让tom=new Student('tom，16，'男'，' computer ')Tom . say name()/=' Tom ' Tom . say skill()/=' computer ' Tom。_ _ proto _ _==student . prototype//=TrueStudent。__proto__==People //=true说明虽然是新规范，但还是遵循了js的原理：一个对象的_ _ proto _ _ _指向其构造函数(类)的原型。es6对象文字量的__proto__注入也可以快速实现继承。

接下来是让：

在es6之前，js只有函数作用域，let的出现有块级的作用域，即使else和for也有作用域。在块中由let声明的变量不能被外部访问，并且在js被预解析时不会被提升到当前函数作用域的前面。基于这个特性，在迭代for时，每次迭代都会产生一个块级作用域的独立迭代变量，这样最终的结果就是我们所期望的。

var arr=[]；为了(让