专栏首页娱乐心理测试Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()函数

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

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

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

image

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

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):进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

image

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

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

image

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS (动态库,静态库) 的制作,使用及遇到的问题

    去年接的一个私活,制作SDK给其它游戏厂家使用,功能很简单就是集成 登录,注册,支付等功能。当初抵挡不住金钱的诱惑,对于从没做过SDK的我竟有莫名的勇气接了下来...

    honey缘木鱼
  • ENOENT: no such file or directory, access '/usr/local/lib/node_modules/vue-cli/node_modules/get-s...

    honey缘木鱼
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • python3-基本数学

    3 81.0 3.141592653589793 10.0 2.302585092994046 2.095903274289385

    py3study
  • HDUOJ--点球大战

    点球大战 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java...

    Gxjun
  • linux下node.js安装配置

    lilugirl
  • chrome使用技巧(看了定不让你失望,不错)

    之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

    bear_fish
  • 从TeraData下滑看数仓行业变化

    作为一名数据行业从业者,经常会关注市场行业的一些变化。特别是近期,明显感觉到数仓这一分支领域正在悄然发生一些变化。从其最大的头部玩家-TeraData的变化可见...

    用户5548425
  • 在 Vue 中使用lodash对事件进行防抖和节流

    有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面。例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒...

    前端达人
  • JS高级测试: var {a,b,c} = { "c":10,"b":9,"a":8}结果中,a,b,c的值分别是?

    2.对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    舒克

扫码关注云+社区

领取腾讯云代金券