Vue 的 export default 用法

一、深入学习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

除了这十四个，其他的东西都是非法的。