用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
上面这些函数就是在实际开发中特别常用到的，能正确的使用，可以让我们的开发事半功倍！
网友评论