一、深入学习methods
methods 中是定义事件监听的，主要是用来响应我们用的 @click、@mouseenter 等这些事件处理函数。
用法：
- 绑定到事件监听里面
@click = "add" - {{}} 插入函数执行，
{{add()}}
<template>
<div>
<h1>{{a}}{{add()}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
a : 2
}
},
methods : {
add(){
return this.a * this.a
}
}
}
</script>
<style lang="scss" scoped>
</style>
根据计算结果可知，这里调用书写一次，函数执行了四次。原因就是生命周期做的鬼。
- methods 中定义的函数，可以在任何指令中调用，例如：v-for。
<template>
<div>
<h1 v-for = "item in add(2)">我被调用了两次</h1>
</div>
</template>
<script>
export default {
data(){
return {
a : 2
}
},
methods : {
add(x){
return x * x
}
}
}
</script>
<style lang="scss" scoped>
</style>
注意：一些从 npm 上下载的包，提供的函数，也必须放入methods中，否则 template 中用不了。例如 moment
<script>
import moment from 'moment';
export default {
moment
}
}
</script>
二、computed 学习
computed 表示计算后的值，定义的时候如果写的是函数，template 使用的时候，不许加圆括号。也就是将在这个 API 里面定义的函数 无法传参，保持 API 的纯粹。
写个例子：
<template>
<div>
<h1>{{add}}</h1>
<Button @click = "a++">按我翻倍</Button>
</div>
</template>
<script>
export default {
data(){
return {
a : 2
}
},
computed : {
add(){
return this.a * this.a
}
}
}
</script>
<style lang="scss" scoped>
</style>
按我翻倍.gif
这个调用方法厉害，可以实时监听变量 a。
另一种用法：
computed 可以有 set 和 get。reset 现在不是一个函数，而是一个对象， 里面有两个属性都是函数，分别叫做 set 和 get。set 用来设置 get 里面返回的值，get 用来得到值。
举个例子：
<template>
<div>
<h1>{{reset}}</h1>
<Button @click = "reset++">按我翻倍</Button>
</div>
</template>
<script>
export default {
data(){
return {
a : 2
}
},
computed : {
reset : {
get(){
return this.a
},
set(v){
console.log(v);
this.a *= 2;
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
三、认识 watch
watch是一个对象，里面所有属性必须都是函数，这些函数会当它自己的同名 data 变化的时候触发。为了好记我叫它：同名变量函数。
我们现在写个例子当 a 变量改变时，自动监听去改变 b 的值。
<template>
<div>
<h1>我是 a 我一直加加：{{a}}</h1>
<h1>我是 b 我一直是 a 的两倍：{{b}}</h1>
<Button @click = "a++">按我翻倍</Button>
</div>
</template>
<script>
export default {
data(){
return {
a : 0,
b : 0
}
},
watch:{
a(){
return this.b = 2 * this.a;
}
}
}
</script>
<style lang="scss" scoped>
</style>
同名变量函数.gif
四、八大生命周期函数
先来总体认识一下是哪八个？
beforeCreate()： 组件创建之前
created()： 组件已经创建
beforeMount()： 组件上树之前
Mounted()： 组件已经上树，这是最早的能够使用$refs的生命周期
beforeUpdate()： 组件更新之前
updated()： 组件已经更新
beforeDestroy()： 组件消亡之前
destroyed()： 组件已经消亡
需要记住的两点：
- 不要在 beforeUpdate、updated 中改变 data 或者 props。因为引发死循环。
- Mounted()： 组件已经上树，这是最早的能够使用 $refs 的生命周期。
再来测试生命周期起作用的时间点。测试代码如下：
<template>
</template>
<script>
export default {
beforeCreate(){
console.log("我是 beforeCreate！");
},
created(){
console.log("我是 created！");
},
beforeMount(){
console.log("我是 beforeMount");
},
mounted(){
console.log("我是 mounted");
},
beforeUpdate(){
console.log("我是 beforeUpdate");
},
updated(){
console.log("我是 updated");
},
beforeDestory(){
console.log("我是 beforeDestory");
},
destoryed(){
console.log("我是 destory");
}
}
</script>
测试结果显示，页面一但刷新，最先起作用的是下面打印的这四个生命周期，一般来讲，beforeCreate 是来放 Ajax 的，mounted 是用来做事件委托的，中间两个没啥用处。
来验证后面四个生命周期函数，当组件死亡时候就已经没有任何作用，所以在点计数器加一已经没有任何效果：
<template>
<div>
<h1>{{a}}</h1>
<Button @click = "a++">按我加一</Button>
<Button @click = "$destroy()">实例消亡</Button>
</div>
</template>
生命周期.gif
至此我们发现在 Vue 的 export default 里面只能书写的东西有：
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed props components data methods watch computed
除了这十四个，其他的东西都是非法的。
网友评论