VueDay04

1. Vue中操作数组

1. 在Vue中，修改数组中的某一项，请务必要用如下方法：

   push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2. Vue在底层包裹了数组的7个变更方法，本质就是做了两件事：

    ① 调用原生对应的方法对数组进行更新。
   
    ② 更新页面。
   

2. 生命周期

2.1 何为生命周期

1. 生命周期数，又称：生命周期函数、生命周期钩子。
2. 是什么? —— Vue在关键时刻帮我们调用的一些特殊名称的函数。

2.2 生命周期图

生命周期

1. 生命周期函数的名字不可更改，但其中的具体内容，看具体需求。
2. 生命周期函数中的this指向是vm或 组件实例对象。

2.3 常用的钩子

2. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
3. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

3. 组件化

3.1 对组件的理解

概念：应用中局部功能代码和资源的集合。

组件

3.2 准备一个效果

展示：学校、人员 相关信息。

3.3 组件的基本使用

Vue中使用组件的三大步骤：

• 第一步：创建组件

  1. 如何创建组件？—— 使用Vue.extend(options)方法。
  2. 其中的options和new Vue(options)几乎一样，但也有点小区别，区别如下：
     • 组件配置中不能写el，为什么？—— 由vm去决定服务哪个容器，组件跟着走就ok了。
     • 组件配置中data必须写成函数，为什么？ —— 避免组件复用时产生数据的干扰。

• 第二步：注册组件

  new Vue({...})时，使用components配置。

• 第三步：使用组件（编写组件标签）。

  <Person> </Person>

3.4 关于组件名

开始本章节前，先要让容器变空，所有的结构都配置在template中。

1. 一个单词组成：
   • 第一种写法：(首字母小写)：school
   • 第二种写法：(首字母大写)：School —— 推荐
2. 多个单词组成：
   • 第一种写法：kebab-case命名，例如：atguigu-school
   • 第二种写法：CamelCase命名，例如：AtguiguSchool ==> 不能在容器里用，要在template中用。

可以使用name配置项，指定组件在开发者工具中的名字。

3.5 关于组件标签

• 第一种写法：<组件名></组件名>

• 第二种写法：<组件名/> ==> 不能在容器里用，要在template中用。

  直接在容器里写单标签，会有这么一个bug：该单标签后的组件都不解析了。解决办法如下：

  1. 给vm加上template配置项，template中可以写连续多个的单标签。
  2. 使用脚手架开发。

3.6 总结_组件名 _组件标签

通常情况下，我们不在容器中写任何的代码。

3.7 App组件的使用

通常使用App组件，作为所有组件的根组件。

// 创建一个App组件
let App = Vue.extend({
    components:{Person,School},
    template:`
        <div>
            <Person></Person>
            <hr>
            <School></School>
        </div>`
})

3.8 注册全局组件

1. 若某个组件，需要在很多的地方使用，可以进行全局注册。
2. 语法：Vue.component('组件名',具体的组件)

3.9 VueComponent

1. 组件的本质是一个构造函数，名为：VueComponent。

2. VueComponent，不是我们定义的，也不是引入了vue.js就有的，而是Vue.extend()生成的。

3. 我们只需要写 <Person></Person> 或 <Person/> ，Vue底层就会帮我们执行： new VueComponent()。

   简记：定义组件是在创建VueComponent，编写组件标签是在new VueComponent()。

4. 关于this的指向：

   1. new Vue(options)中，this指向是vm。
   2. Vue.extend(options)中：this指向是vc。

   简记：

   • 创建vm时，各种配置函数中的this就是vm。
   • 创建组件时，各种配置函数中的this就是vc。

5. 备注：vc是一个小型的vm，但与vm也有点小不同，例如：vm可配置el，而vc不能配置。