vue学习3：生命周期、组件化编程（总结精简版）

生命周期

生命周期概述

1. 又名：生命周期回调函数、生命周期函数、生命周期钩子；
2. 是什么：vue在关键时刻帮我们调用的一些特殊名称的函数；
3. 生命周期函数的名字不可修改，但函数的具体内容是根据程序员的需求编写的；
4. 生命周期函数中this指向是vm或组件实例对象；

常见的生命周期钩子：

1. mounted:发送ajax请求，启动定时器，绑定自定义事件，订阅消息等等（初始化操作）；
2. beforeDestroy:清除定时器，解绑自定义事件，取消订阅消息（收尾工作）

关于销毁Vue实例

1. 销毁后借助vue开发工具看不到任何消息；
2. 销毁后自定义的事件会失效，但是原生DOM事件依然有效；
3. 一般不会在beforDestroy操作数据，因为即使操作数据，也不会再触发更新流程了；

Vue组件化编程

非单文件组件

一个文件中包含n个组件

基本使用

VUE中使用组件的三大步骤
一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但是也有一些区别：
区别如下：
- el不要写，为什么？–最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器；
- data必须写成函数，为什么？–避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构
二、如何注册组件？
1. 局部注册：靠new Vue的时候传入components选项；
2. 全局注册： 靠Vue.component(‘组件名’，组件)
三、编写组件标签
<school></school>

几个注意点

1. 关于组件名：
   一个单词组成：

   • 第一种写法（首字母小写）：school
   • 第二种写法（首字母发泄）：School
     多个单词组成：
   • 第一种写法（kebab-case命名）：my-school
   • 第二种写法（CamelCase命名）：MySchool（需要脚手架）
     备注：
     （1）组件名尽可能回避HTML已经存在的元素名称，例如：h1,h2,H2都不行；
     (2)可以使用name配置项指定组件在开发者工具中呈现的名字；

2. 关于组件标签
   第一种写法：

   <school></school>
   

   第二种写法：

   <school/>
   

   备注：不用使用脚手架时，第二种方法会导致后续组件无法渲染；

3. 一个简写方式
   const school=Vue.extend(options)
   可以简写成：
   const school=options

组件的嵌套

关于VueComponent

1. school组件本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的；
2. 我们只需要写 <school\>或 <school><\school>,vue解析的时候会帮我们创建school组件的实例对象，即VUE帮我们执行的：new VueComponent(options);
3. 特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
4. 关于this的指向：
   • 组件配置中：
     data函数、methods中的函数、watch中的函数、computed中的函数 他们的this指向均为【VueComponent实例对象】
   • .new Vue(options)配置中：
     data函数、methods中的函数、watch中的函数、computed中的函数 他们的this指向均为【Vue实例对象】
     内置关系
     VueComponent.portotype.__proto__===Vue.prototype

单文件组件

一个文件中包含一个组件