vue第4天知识点：生命周期介绍以及图解、八个钩子函数、json-server的使用：安装、提供json文件、启动接口、以及通过axios编写todomvc案例（只写了增、删、改三大功能）

本文链接：https://blog.youkuaiyun.com/m0_46597922/article/details/107568165

本文详细介绍了Vue组件的生命周期，包括beforeCreate、created、beforeMounted、mounted、beforeUpdated、updated、beforeDestroy和destroyed八大钩子函数，并提供了相关使用场景。此外，还讲解了json-server的安装、配置、启动接口服务及其特点，以及如何使用axios编写todomvc案例，实现了增、删、改功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期与钩子函数

生命周期介绍

vue生命周期钩子函数
简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期

在这里插入图片描述

生命周期图解

非常重要的图解
在这里插入图片描述

实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为
注意：vue再执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
注意：钩子函数的名称都是固定的！！！

钩子函数 - beforeCreate()

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
vue实例生命周期参考1
vue实例生命周期参考2
使用场景：发送请求获取数据

钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

钩子函数 - updated()

说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

JSON-SERVER的使用

在不到30秒的时间内获得零编码的完整虚假REST API

全局安装

两个方法：

yarn global add json-server

或者

npm i json-server -g

提供一个json文件

{
  "todos": [
    { "id":1, "name": "吃饭", "flag": false },
    { "id":2, "name": "抽烟", "flag": true },
    { "id":3, "name": "喝酒", "flag": false },
    { "id":4, "name": "烫头", "flag": true }
  ]
}

启动接口服务

json-server data.json

特点

在这里插入图片描述

JSON-server给我们生成的一个rest风格的接口

查询：get     http://localhost:3000/todos   获取所有的任务
			http://localhost:3000/todos/3   获取id为3的任务
增加：post    http://localhost:3000/todos    增加
删除：delete   http://localhost:3000/todos/3
修改：	put ：   全量的修改，会把原来的所有内容个都覆盖掉， 需要改不需要改都应该传
	  patch :   打补丁，只会修改传递的值