Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数

用Vue开发了一个项目，虽然项目做完了，但心中却没有一个完整的知识体系，不能称之为会Vue，也许只能称之为了解，这段时间闲剩下来，找到Vue.js 的官网，简直了。。。简直都是自己陌生的各种语法函数，都怀疑自己是怎么做的项目啦！

先参考vue官网从简单的看起！先了解下vue的生命周期。

也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下：

beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。

create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。

beforeMount():已经完成了模板的编译，还没有挂载到页面中。

mounted()：将编译好的模板挂载到页面指定的容器中显示。

beforeUpdate():状态更新之前执行函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点。

updated():此时data中的状态值和界面上显示的数据都已经完成了跟新，界面已经被重新渲染好了！

beforeDestroy():实例被销毁之前。

destroyed():实例销毁后调用，Vue实例指示的所有东西都会解绑，所有的事件监听器都会被移除,所有的子实例也都会被销毁。组件已经被完全销毁，此时组建中所有data、methods、以及过滤器，指令等，都已经不可用了。

这些都是官方说明，在实际开发项目中这些钩子函数如何使用呢？

beforecreate : 可以在这函数中初始化加载动画
created ：做一些数据初始化，实现函数自执行
mounted：调用后台接口进行网络请求，拿回数据，配合路由钩子做一些事情
destoryed ：当前组件已被删除，清空相关内容

在这里我要说明下自己在开发项目中最常用的是什么？在mounted中做网络请求和重新赋值，在destoryed中清空页面数据。

数据对象data：初始化属性及能够其响应数据变化，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。

//使用方法
data: function () {return {message: 'Welcome Vue'，goodsImg: '',itemGoodsId: '',imageUrls: []}},

计算属性computed：将返回function内return的值赋值在html的DOM上，computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变，function才会从新执行，并修改DOM上的内容。

<template><div><div>翻转后：  {{reversedMessage}}</div><div  @click="clickReverse">发布</div></div>
</template><script>export default {name: 'test',data(){return{message: 'hello'}},computed: {reversedMessage: function () {return this.message.split('').reverse().join('')}},methods:{clickReverse(){this.message = 'hello world'this.reversedMessage()//重新修改DOM的值}}}
</script>

自定义方法methods：methods:{所有页面的自定义函数}

<div  @click="clickReverse">点击</div>
<div  @click="clickTap('方法被调用了吗')">点击传参</div>methods:{clickReverse(){this.message = 'hello world'this.reversedMessage()//重新修改DOM的值},clickTap(data){console.log(data)//'方法被调用了吗'}}

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

beforeRouteLeave(to, from, next)：离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

 // 点击后拿到数据返回给下单地址beforeRouteLeave (to, from, next) {if (to.name === 'home') {to.query.temp = '这里是参数，选中后的地址'}console.log(to)console.log(from)next()//一定不要忘记写},

上面这些函数就是在实际开发中特别常用到的，能正确的使用，可以让我们的开发事半功倍！

Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数相关推荐

（vue基础试炼_07）Vue实例生命周期函数
文章目录一.生命周期图示二.常见的生命周期函数三.生命周期函数执行场景四.测试代码五.项目开源地址一.生命周期图示二.常见的生命周期函数常见的生命周期函数执行的时间 beforeCr ...
【Vue】—生命周期函数
[Vue]-生命周期函数(钩子函数) beforeCreate 创建前(初始化事件,生命周期函数) created 创建完成(初始化注入和校验) beforeMount 渲染前(把页面编译成虚拟DOM ...
Vue实例生命周期函数（钩子函数）详解
一.钩子函数在了解vue生命周期函数之前,我们先看看啥叫"钩子函数"?百度一下是这样一段官方解释:"钩子函数是Windows消息处理机制的一部分,通过设置"钩 ...
Vue.js生命周期函数
一.Vue.js生命周期简介 (直观图) 二.生命周期函数就是vue实例在某一个时间点会自动执行的函数从Vue的创建到运行.销毁总是伴随着各种各样的事件,这些事件统称为生命周期,生命周期钩子是别名. ...
vue 的生命周期函数
vue 的生命周期函数,有那些?在项目中怎么使用?以及应用场景? 1.vue的生命周期函数分为:创建前 beforeCreate :在实例初始化之后执行此时对象还未创建,el 和data并未初始化,因 ...
前端学习之vue的生命周期函数
一.什么是生命周期函数我想,对于生命周期,咱都不会陌生,所谓生命周期,就是一个过程,从开始到结束,顾名思义,就像生命一样,从诞生到消逝.而生命周期函数,就是在这个生命周期的不同阶段中会被调用的函数, ...
Vue：生命周期函数的作用
Vue:生命周期函数的作用前言 Vue实例有一个完整的生命周期,也就是说从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某 ...
微信小程序生命周期函数（内置钩子函数）
微信小程序生命周期函数(内置钩子函数) 1:应用生命周期生命周期说明 onLaunch 小程序初始化完成时触发,全局只触发一次 onShow 小程序启动或从后台进入前台时(页面显示) onHide ...
vue的生命周期函数
一.生命周期又名:生命周期回调函数.生命周期函数.生命周期钩子. 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的. 生命 ...
Vue生命周期函数（8个钩子函数）
生命周期: 在vue实例对象从创建到销毁的过程就是这个vue实例的生命周期在这个过程中,vue实例经过了从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 我们今天来 ...

Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数

Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数相关推荐

最新文章

热门文章