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

最新推荐文章于 2024-04-10 18:01:45 发布

weixin_43297321

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量510

点赞数

分类专栏： vue 笔记非原创文章标签： vue

本文链接：https://blog.csdn.net/weixin_43297321/article/details/107406980

版权

vue 笔记非原创专栏收录该内容

15 篇文章 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 渲染在哪个周期中就已经完成？

（七）上面问题的答案 .

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue 的生命周期。
生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易完成指定逻辑。
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
第一次页面加载时会触发 beforeCreate， created， beforeMount， mounted 这4个钩子。
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；硬件服务器一般是性能非常稳定的电脑，专门提供计算服务的设备。

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

（二）前后端交互原理

在这里插入图片描述

（三）交互的应用场景

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

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>

在这里插入图片描述

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依赖包：

<script src="./node_modules/axios/dist/axios.js"></script>

然后向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");
在这里插入图片描述

（六）Axios 综合交互

axios(url:'请求地址',method:'请求方式',data/params:{k:v}).then((ok)=>{})

//使用get发送数据的时，使用params：{key:val}发送数据；
//使用post发送数据时，使用 var param=new URLSearchParams();修改传参方法；
//使用param.append("uname","xixi")添加数据并且使用data发送数据

在这里插入图片描述

4、Vue.js 过滤器

（一）过滤器作用

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

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

位置：创建vue实例之前。

Vue.filter('sum', function(val){
  	return val + 4;
});

// 过滤器名字随便起，这里叫“sum”

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

<script src="./node_modules/vue/dist/vue.js"></script>

<div id="demoSky1">
    <p>{{hername|strAdd}}</p>
</div>
<div id="demoSky2">
    <p>{{hisname|strAdd}}</p>
</div>
<script>
    Vue.filter('strAdd',(xiaoming)=>{
        return xiaoming+"我爱你";
    })
    new Vue({
        el:"#demoSky1",
        data:{
            hername:"微微",
        }
    })
    new Vue({
        el:"#demoSky2",
        data:{
            hisname:"大熊",
        }
    })
</script>

在这里插入图片描述

（三）Vue.js 局部过滤器

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

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

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

<script src="./node_modules/vue/dist/vue.js"></script>

<div id="demoSky1">
    <p>{{val|sum}}</p>
    <p>{{val|sub}}</p>
    <p>{{val|add}}</p>
</div>
<!-- 不是这个实例所挂载的模板，不能使用该实例的过滤器 -->
<div id="demoSky2">
    <p>{{val|sum}}</p>
</div>

<script>
    new Vue({
        el:"#demoSky1",
        data:{
            val:"局部过滤器",
        },
        filters:{
            // 过滤器的命名方法挺多的
            sum(suibian){
                return suibian+"--求和"; 
            },
            "sub":function(suibian){
                return suibian+"--减法";
            },
            "add"(suibian){
                return suibian+"--加法";
            }
        }   
    })
	new Vue({
	    el:"#demoSky2",
	    data:{
	        val:"另外的",
	    }, 
	})
</script>

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

（四）过滤器的调用方法

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

{{ 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>

在这里插入图片描述

总体小结：

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

weixin_43297321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js note5（实例的生命周期与8个钩子函数&数据请求交互&过滤器）

生命周期与钩子生命周期内被自动执行的函数，叫钩子函数钩子，vue执行周期内，自动执行的8个钩子函数，创建位置与data与methods同级钩子会在生命周期的固定时间自动被调用生命周期的作用：给需要自动执行的函数提供一个场所生命周期有4个阶段，8个钩子简单整理一下，达到自己说出来的程度：交互 Vue当中的ajax原生js 的ajaxjQuery的ajax都是基于XMLHttpRequest的，但是jQuery是对js的ajax进行的封装，简化了写法，语法简单，而且没有兼容的问题Axio
复制链接

扫一扫