Vue.js note5（实例的生命周期与8个钩子函数&数据请求交互&过滤器）

ゞ浴缸里的玫瑰 2023-02-27 12:08 2阅读 0赞

### 1、实例生命周期 ###

###### （一）什么是实例的生命周期 ######

vue实例在创建到销毁经历的一系列过程叫做实例的生命周期 。

生命周期的作用：给需要自动执行的函数提供一个场所。

生命周期有4个阶段，8个钩子。

###### （二）什么是生命周期钩子 ######

vue执行生命周期内被自动调用的函数，叫钩子函数（生命周期钩子），一般我们简称**钩子**。

钩子会在生命周期的固定时间自动被调用。

###### （三）钩子函数的用途 ######

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

###### （四）钩子函数有哪些 ######

*  beforeCreate（创建实例）
 *  created（创建完成）
 *  beforeMount（开始创建模板）
 *  mounted（创建完成）
 *  beforeUpdate（开始更新）
 *  updated（更新完成）
 *  beforeDestroy（开始销毁）
 *  destroyed（销毁完成）

钩子函数的书写位置在data与methods同级位置书写。

###### （五）钩子在设置数据请求时需要注意的问题 ######

created() 里面，如果涉及到需要在页面加载完成之后，去做一些操作，就用 mounted()。  
因为：  
  （1）在created()的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素；  
  （2）而在mounted()中，由于此时html已经渲染出来了，所以可以直接操作dom节点。

###### （六）vue生命周期的常见面试题？ ######

1、什么是vue生命周期？  
 2、vue生命周期的作用是什么？  
 3、vue生命周期总共有几个阶段？  
 4、第一次页面加载会触发哪几个钩子？  
 5、DOM 渲染在 哪个周期中就已经完成？

###### （七）上面问题的答案 . ######

1.  Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue 的生命周期。
2.  生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易完成指定逻辑。
3.  它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
4.  第一次页面加载时会触发 beforeCreate， created， beforeMount， mounted 这4个钩子。
5.  DOM 渲染在 mounted 中就已经完成了。

###### （八）简单描述每个周期？ ######

*  beforeCreate（创建前） 在数据观测和初始化事件还未开始。
 *  created（创建后） 完成数据观测，属性和方法的运算，初始化事件，实例中的el属性还没有显示出来。
 *  beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
 *  mounted（载入后） 在el 被新创建的 vue.el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
 *  beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
 *  updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
 *  beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
 *  destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

### 2、交互 ###

###### （一）前端和后端的概念 ######

任何一个应用程序都有前端和后端，简单来说的话，

*  前端：客户端，一般指浏览器（pc端 手机端）。
 *  后端：服务器，提供计算服务。  
    服务器可分为软件服务器和硬件服务器。软件服务器常见的比如web服务器Apache、Tomcat；硬件服务器一般是性能非常稳定的电脑，专门提供计算服务的设备。

服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

###### （二）前后端交互原理 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

###### （三） 交互的应用场景 ######

前端从后端获取一些数据，需要将其进行渲染展示或着进行计算时；  
前端将用户在页面中提交的数据发送给后端时。

### 3、Vue.js 中的交互 ###

###### （一）Vue请求数据交互 ######

vue请求数据有`Vue-resource`、`Axios`、`fetch`三种方式。Vue-resource是Vue官方提供的插件；axios是第三方插件；fetch es6原生。

###### （二）Vue-resource交互在2.0已停止更新 ######

Vue自身不带处理HTTP请求，如果想使用HTTP请求必须要引入 `vue-resource.js 库`，它可以通过`XMLHttpRequest`发起请求并处理响应。所以，Vue.js 交互借助于`$http` 完成。

也就是说，`$.ajax`能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。

但是注意，Vue-resource在版本2.0后，不再维护，等于被放弃了。

下载方式：npm install --save vue-resource

###### （三）Vue-resource方式 ######

**1、get 类型**

this.$http.get(‘url’,{params: {key1:val1,key2:val2…}})
    	.then(function(res){ 处理请求成功的情况 },function(error){ 处理请求失败的情况 })
    
    //params是参数

// 先引入依赖文件
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-resource/dist/vue-resource.js"></script>
    
    <div id="demoSky">
        <p v-if="!info.length">加载中，稍等......</p>
        <ul v-else>
            <li v-for="(item,index) in info">{
       {item.commentTxt}}</li>
        </ul>
    </div>
    <script> new Vue({ el:"#demoSky", data:{ info:'', }, //当模板中的html渲染到html页面中。一般在mounted函数中进行ajax交互 mounted(){ this.$http.get('http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187') .then(function(res){ this.info=res.body.data.commentList; },function(error){ console.log(error); }) } }) </script>

![在这里插入图片描述][20200718095112207.png]

--------------------

**2、post类型**

this.$http.post(‘url’,{key1:val1,key2:val2…},{emulateJSON:true})
    	.then((res)=>{处理请求成功的情况},(error)=>{处理请求失败的情况})
    
    //处理这块也可以用箭头函数
    //emulateJSON：模拟json格式进行参数传递

###### （四）Axios 的使用 ######

Axios是第三方插件，不仅能在Vue里使用，还能再其他第三方库中使用例如react。

Axios插件安装方式：npm install --save axios

Axios基于promise。

我说：原生js与jQuery的ajax都是基于XMLHttpRequest的，但是jQuery是对js的ajax进行的封装，简化了写法，语法简单，而且可以被大多数浏览器所支持。  
Axios也是对js的ajax的封装，也有jQuery的ajax的那些优点，但是与jQuery不同的是，底层使用Promise。

**1、get类型**

axios.get('url?k=v&k=v}.then((ok)=>{}).catch((err)=>{})

首先引入axios和vue依赖包：

然后向vue实例的mounted()函数里增添axios交互的get方式代码：

mounted(){   
        // axios的get方式
        axios.get('http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187')
        .then((res)=>{ 
            this.info=res.data.data.commentList;
        }).catch((error)=>{ 
            console.log(error);
        })  
    }

结果是获得从服务器传过来的数据，并展示在页面上。

**2、post类型**

axios.post('url',{k:v,k:v}).then(function (ok){}).catch(function (error){});

###### （五）Axios–post交互常见问题：数据请求不到？ ######

试一试用jquery请求看看 发现是可以发送post数据的；  
问题就在传参方式上面；  
需要使用URLSearchParams对象修改操作 URL传递参数的方法。

实例化对象：  
`let param = new URLSearchParams();`  
添加发送数据参数：  
`param.append("key", "value");`  
![在这里插入图片描述][20200717175807605.png]

###### （六）Axios 综合交互 ######

axios(url:'请求地址',method:'请求方式',data/params:{k:v}).then((ok)=>{})
    
    //使用get发送数据的时，使用params：{key:val}发送数据；
    //使用post发送数据时，使用 var param=new URLSearchParams();修改传参方法；
    //使用param.append("uname","xixi")添加数据并且使用data发送数据

![在这里插入图片描述][20200717175852348.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

### 4、Vue.js 过滤器 ###

###### （一）过滤器作用 ######

*  在不改变数据的情况下，输出前端需要的格式数据。
 *  2.0中已经废弃了内置过滤器，需要我们自定义过滤器来使用

###### （二）全局过滤器 Vue.filter() ######

位置：创建vue实例之前。

Vue.filter('sum', function(val){
      	return val + 4;
    });
    
    // 过滤器名字随便起，这里叫“sum”

小栗子：一个全局过滤器，两个vue实例，都能使用这个过滤器。

![在这里插入图片描述][20200718111703905.png]

###### （三）Vue.js 局部过滤器 ######

位置：只能在vue实例中使用，与el、data同级定义。

filters：{
    	过滤器名字:function(val){
    	 	return 输出内容
    	}
    }

小栗子：验证是否只有当前实例能使用该实例里的局部过滤器。

![在这里插入图片描述][20200718113220768.png]  
答案很明显，局部过滤器只作用于当前实例。

###### （四）过滤器的调用方法 ######

在需要过滤的数据后面加“|”，然后写上过滤器的名字。

{
       { msg | sum }}
    
    //msg代表data中的数据变量名；sum 代表过滤器的名字

注意事项：

*  定义全局过滤器，必须放在Vue实例化前面
 *  在没有冲突的前提下，过滤器可以串联

### 5、综合练习： ###

###### （一）实现按钮点击请求接口数据 ######

*  首先使用网络请求请求 “评论列表” 数据。  
    请求地址示例：http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187
 *  解析 “评论列表” 数据。  
    实现页面加载完成即显示评论列表的功能；在生命钩子函数mounted()中调用请求数据的方法 。
 *  展示 “评论列表” 数据。  
    数据展示要求：使用过滤器实现对日期格式的更改，只显示年月日 。

//使用的axios交互方式
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    
    <div id="demoSky">
        <p v-if="info.length==0">正在加载......</p>
        <ul v-else>
            <li v-for="(item,index) in info">{
       {item.commentTxt}}--------------<span>{
       {item.createAt|datefil}}</span>
            </li>
        </ul>
    </div>
    <script> new Vue({ el: "#demoSky", data: { info: [], }, // 局部过滤器 filters: { datefil: function (val) { return val.substr(0, 4) + "年" + val.substr(5, 2) + "月" + val.substr(8, 2) + "日"; } }, mounted() { //axios实现ajax异步通信，获取数据 axios({ url: "http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187", method: "get", params: { },//参数 }).then((ok) => { console.log(ok.data.data.commentList); this.info = ok.data.data.commentList; }).catch((error) => { console.log(error); }) } }) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

--------------------

### 总体小结： ###

实例生命周期：实例在被创建前经过的一系列初始化过程叫生命周期 。  
生命周期钩子的用途：为我们提供执行自定义逻辑的机会 。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230209/aa01c5d411e5413f94e8779c24eeb3a8.png
[20200718095112207.png]: https://img-blog.csdnimg.cn/20200718095112207.png
[20200717175807605.png]: https://img-blog.csdnimg.cn/20200717175807605.png
[20200717175852348.png]: https://img-blog.csdnimg.cn/20200717175852348.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200717175857366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200718111703905.png]: https://img-blog.csdnimg.cn/20200718111703905.png
[20200718113220768.png]: https://img-blog.csdnimg.cn/20200718113220768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200718110639249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70