一、生命周期

（一）钩子函数

(1) 初始化显示

① beforeCreate()

② created()

③ beforeMount()

④ mounted()

(2) 更新状态: this.xxx = value

① beforeUpdate()

② updated()

(3) 销毁 vue 实例: vm.$destory()

① beforeDestory()

② destoryed()

（二）常用的生命周期钩子：

(1) mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

(2) .beforeDestroy: 清除定时器、解绑自定义事件、撤销订阅消息等【收尾工作】。

(3) 关于销毁Vue实例

① 销毁后借助Vue开发者工具看不到任何信息。

② 销毁后自定义事件会失效，但原生DOM事件依然有效。

③ 一般不会在beforeDestroy操作数据，由于即便操作数据，也不会再触发更新流程了。

二、组件

（一）非单文件组件

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

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

(2) 如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

区别如下：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

(3) 如何注册组件？

局部注册：靠new Vue的时候传入components选项

全局注册：靠Vue.component('组件名',组件)

(4) 编写组件标签：

<school></school>

<div id='app'>
  <!-- 使用组件 -->
  <student/>
</div>

<script>
//创建组件
const student = Vue.extend({
  data() {
    return {
      name:'lisi',
      age:20
    }
  },
  template:`
    <div>
      <div>名称：{{name}}</div>
      <div>年龄：{{age}}</div>
      <button @click='upName'>修改名称</button>
    </div>
  `,
  methods: {
    upName(){
    	this.name = 'wangwu'
    }
  },
  })
  //全局注册组件
  Vue.component('student',student)
  new Vue({
    el:'#app',
    //局部注册组件
    /* components:{
      student
      } */
  })
</script>

(5) 几个注意点：

① 关于组件名:

1) 一个单词组成：

a. 第一种写法(首字母小写)：school

b. 第二种写法(首字母大写)：School

2) 多个单词组成：

a. 第一种写法(kebab-case命名)：my-school

b. 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

3) 备注：

a. 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

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

② 关于组件标签:

1) 第一种写法：<school></school>

2) 第二种写法：<school/>

3) 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

③ 一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

（二）脚手架使用

(1) 第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

(2) 第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

(3) 第三步：启动项目

npm run serve

(4) 脚手架文件结构

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git版本管制忽略的配置

├── babel.config.js: babel的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

（三）单文件组件

(1) 一个.vue 文件的组成(3 个部分)

① 模板页面

<template>

页面模板

</template>

② JS 模块对象

<script>

export default {

data() {return {}},

methods: {},

computed: {},

components: {}

}

</script>

③ 样式

<style>

样式定义

</style

(2) 基本使用

① 引入组件

② 映射成标签

③ 使用组件标签

<template>
  <div id="app">
    <!-- 使用组件 -->
    <Student></Student>
    <Student/>
  </div>
</template>

<script>
  //引入组件
  import Student from '@/components/Student'
  export default {
    name: 'App',
    //注册组件
    components: {
    	Student
    }
  }
</script>
<style>
</style>

回复vue，可以获得全套笔记

1天让你精通vue(5 内置指令与自定义指令)

1天让你精通vue(4)