一、生命周期（一）钩子函数

(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)