前端入门（三）Vue生命周期、组件技术、脚手架、存储、事件总线、

Vue生命周期

• 1、beforeCreate(）：数据代理尚未开始，此时无法通过vm访问到data中的数据，methods中的方法。
• 2、created()：数据监测和数据代理完成了，可以通过vm访问到data中的数据，methods中的方法。
• 3、beforeMount()：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
• 4、mounted()：页面中呈现的是经过Vue编译的DOM，此时对DOM的操作均有效，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。1-4步骤构成了挂载的主要流程
• 5、beforeUpdate()：此时数据是新的，但是页面是旧的，即新的数据尚未更新到页面上。
• 6、updated()：此时，页面的显示的是新数据，页面和数据同步完毕。
• 7、beforeDestroy()：此时vm中所有的data、methods、指令等等，都处于可用状态，马上要执行销毁的过程，一般在此阶段：关闭定时器、取消订阅消息，解绑自定义事件等收尾操作。
• 8、destroyed()：销毁完毕。可以使用this.$destroy()，让vue实例自己销毁，Vue实例销毁后，自定义事件会失效，但原生DOM事件依然有效。

Vue 组件化编程 - .vue文件

组件的定义——实现应用中局部功能代码和资源的集合。

非单文件组件

一个组件文件中由多个其他组件构成，称为非单文件组件。

Vue使用组件的三大步骤：

• 1、定义组件（创建组件）
• 2、注册组件（Vue的components局部注册或者使用Vue.component(‘组件名’, 组件)）全局注册。
• 3、使用组件（写组件标签）

1、创建组件
创建组件时，需要注意：

• 不需要写el标签：el标签是将Vue实例与DOM元素绑定的，当你创建组件时，你并不知道需要将其用在哪里，因此不需要写el标签。
• 组件的data属性需要写成函数式的：因为一个组件可能在多个地方使用，如果写为对象式的，各个组件之间的数据变化会相互影响。
• 使用Vue.extend({})创建组件，在template属性中，使用反引号包裹HTML标签。
  

2、注册组件
局部注册：在Vue实例的components属性中，标注上构建的组件。

使用`Vue.componet(‘组件名’, 组件)；可以注册全局组件，即所有的Vue实例，尽管在components属性中没声明该组件，也可直接使用。

3、使用组件，写组件标签。

组件的注意点

组件嵌套

组件可以嵌套使用。注册给谁的组件，就可以在它的template属性中应用这个组件标签。

Vue实例对象和VueComponent实例对象

以定义的school组件为例：

• 1、当我们使用school标签时，本质上是调用了VueComponent构造函数，该构造函数是Vue.extend生成的。
• 2、当使用school标签时，Vue框架解析时会帮助创建school组件的实例对象，方式就是执行new VueComponent(options)
• 3、特别注意，每次调用Vue.extend，返回的都有一个全新的VueComponent对象。
• 4、关于this指向，组件配置中：data函数、methods中的函数，watch、computed函数，它们的this均是VueComponent实例对象。而在new Vue(options)配置中，data函数、methods中的函数，watch、computed函数，它们的this均是Vue实例对象
• 5、根组件Vue实例对象会有$children属性，其中就是VueComponent实例对象数组。
• 6、Vue实例对象和VueComponent实例对象在创建时接收的options选项，除了Vue实例可以使用el 绑定具体的DOM标签外，其余都一样。

Js对象原型与原型链

JavaScript 是一种基于原型的语言 (prototype-based language)，每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性，这些属性和方法定义在对象的构造器函数的 prototype 属性上，而非对象实例本身。

每个Js对象都会有一个名为__proto__的内部属性，该属性指向当前对象的原型对象。在Js中，当我们访问一个对象的某个属性时，如果该对象没有这个属性，Js语法引擎就会沿着该对象的原型链（在对象的__proto__上找）向上查找，直到找到该属性为止。在查找对象属性时，通过__proto__查找原型的属性这个过程，就用到原型链。

当然在Js对象中，根原型为Object，而Object的__proto__是为null的。

原型属性又可分为显示原型属性和隐式原型属性。

• 显示原型属性访问：构造函数名.prototype
• 隐式原型属性访问：实例对象名.__proto__
• 由这两种方式访问到的原型对象是等价的，即指向的是同一个原型对象。构造函数名.prototype === 实例对象名.__proto__
• 由原型链的属性访问方式可知，如果给原型对象添加一个属性x = 99，那么可以由实例对象d的原型对象属性访问它，即d.__proto__.x，实际上对于__proto__的访问是Js执行引擎自动完成的，因此d.__proto__.x访问的方式，可以等价于使用d.x

Vue与VueComponent的重要内置关系

VueComponent（Vue组件）的原型对象的原型对象是Vue的原型对象

应用单文件组件构建

1、构建一个单文件组件
一个单.vue文件，基本结构如下;

定义好单文件组件是为了提供给 别的文件使用，因此需要使用export将该文件进行暴露。
export default {
……
}
实际上是一种简写，等价于：
const vc = Vue.extend(
{
……
}
)

export vc

2、入口Vue文件：App.vue
一般而言，Vue项目的根组件为App.vue，这里使用其他的组件。
组件化编程三步走：

• 导入
• 注册
• 使用标签
  
  3、入口js文件：main.js
  构建的根组件App.vue并没有使用，在main.js中构建App.vue的实例对象，使用el属性为其绑定DOM对象。

4、入口HTML文件：index.html

Vue脚手架 - vue.cli

项目文件结构

组件相关高级属性

引用名 - ref

ref属性被用来给元素或者子组件注册引用信息，类似id，但是id只能绑定DOM元素标签，而ref还可以绑定vue组件，相当于给组件或DOM元素标签起一个别名，便于在程序中引用，程序中可以通过this.$refs.xxx获取到Vue组件或DOM元素标签。

数据接入 - props

组件中的数据，在复用时可能各自不同，props属性用于给组件传递数据。

基本使用方法：
step1：在组件的props属性配置数据项的名称接收。

step2：在使用组件标签时传入数据项的数据值。

实际上props数据接收，有三种不同的方式：

• 简单接收
• 限制类型
• 限制类型、必要性、并指定默认值

注意：props中指定数据项名称可能会与Vue组件中的data属性中的数据项名称产生冲突，从优先级上，是props优先级会更高一点。

一般而言，props承接的数据，我们希望将其转为Vue组件的data数据项的数据，那么根据优先级关系，可以将props属性传给data属性。

将props承接的数据传给data，另一方面是由于组件在使用过程中数据可能会更新，而props属性项数据是不允许更改的，只有组件自身的data属性项可更改

混入 - mixin

mixin：混入，可以把多个组件的共用的options配置，抽取出一个混入对象mixin，节约配置。

使用方式：
step1：定义混入：
例如：
{
data() : {……}
methods: {……}
……
}
上述这些公共配置，写成一个js代码文件：mixin.js，然后暴露。

step2：使用混入，例如：

• 全局混入：Vue.mixin(xxx)
• 局部混入：使用mixins属性，mixins: [‘xxx’]

关于mixins属性需要注意：

• 1、如果混入mixin中定义的data属性项名与组件中的已经有的data名重名，则只保留组件已经有的data名。
• 2、mounted()等生命周期方法中的操作，则会与组件已有的内容合并。

插件

插件的功能是用于对Vue进行增强。

使用步骤：
step1：
定义plugins.js文件，定义install函数，表示是一个可安装的插件，在其中一般可以定义用于增强Vue的：

• 1、全局过滤器
• 2、全局自定义指令
• 3、全局混入
• 4、Vue原型方法
  
  step2：在main.js中，导入plugins.js并使用Vue.use()。

step3：在Vue中使用定义的增强功能，比如上边在plugins.js中定义了Vue的原型方法hello，那么后边就可直接使用了。

存储

浏览器存储 - Window.sessionStorage与 Window.localStorage

组件的自定义事件

触发自定义事件 - emit()

以子组件向父组件传递数据为例：

如果不用自定义事件，可以通过父组件给子组件传递函数类型的props实现

step1：给子组件School绑定getSchoolName函数，相当于子组件的School的组件实例会有getSchoolName(）这个函数。

step2：用props承接父组件注册的getSchoolName。按钮注册点击事件，调用该函数，并将组件的name参数传递。

如果使用自定义事件来实现：
step1：通过v-on: 给子组件Student绑定自定义事件atguigu，该事件触发时，调用父组件的getStudentName()方法。

step2：使用this.$emit('atguigu', this.name) 触发子组件Student上的atguigu事件。

除了在子组件标签上使用v-on绑定，也可以通过代码实现：
先给子组件标签起一个引用名，随后在mounted()方法中，拿到该组件，给它绑定事件方法。

如果要保证事件只触发一次：
可以使用：

解绑自定义事件 - off