Vue Tricks

摘抄一些Vue的小技巧

监听组件声明周期

使用 @hook 即可监听组件生命周期。同样的， created 、 updated 等也可以使用此方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>

程序化事件侦听器

在组件销毁时要移除侦听器，肯定写过以下代码。this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号，除此之外没有任何用处。

export default {
    mounted() {
        this.timer = setInterval(() => {
            console.log(Date.now())
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}

可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题：

export default {
    mounted() {
        this.creatInterval( hello )
        this.creatInterval( world )
    },
    creatInterval(msg) {
        let timer = setInterval(() => {
            console.log(msg)
        }, 1000)
        this.$once('hook:beforeDestroy', function() {
            clearInterval(timer)
        })
    }
}

CSS样式穿透

样式穿透在css预处理器中使用才生效。

• less 使用 /deep/

<style scoped lang="less">
.content /deep/ .el-button {
 height: 60px;
}
</style>

• scss 使用 ::v-deep

<style scoped lang="scss">
.content ::v-deep .el-button {
  height: 60px;
}
</style>

• stylus使用 >>>

<style scoped ang="stylus">
外层 >>> .custon-components{
  height: 60px;
}
</style>

路由参数解耦

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: true
    }]
})

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数。

export default {
    props: [ id ],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

另外还可以通过函数模式来返回 props

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

事件参数$event

$event 是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数

• 原生事件：在原生事件中表现和默认的事件对象相同

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

• 自定义事件：在自定义事件中表现为捕获从子组件抛出的值

// 子组件
export default {
    methods: {
        customEvent() {
            this.$emit( custom-event ,  some value )
        }
    }
}

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)" />
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) //  some value
        }
    }
}

watch高阶使用

• 立即执行

watch 是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行

export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true  <--------
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

• 深度监听

在监听对象时，对象内部的属性被改变时无法触发 watch ，我们可以为其设置深度监听

export default {
    data: {
        studen: {
            name:  Joe ,
            skill: {
                run: {
                    speed:  fast
                }
            }
        }
    },
    watch: {
        studen: {
            handler:  sayName ,
            deep: true  <-------
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

• 触发监听执行多个方法

使用数组可以设置多项，形式包括字符串、函数、对象

export default {
    data: {
        name:  Joe
    },
    watch: {
        name: [
             sayName1 ,
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler:  sayName3 ,
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log( sayName1==> , this.name)
        },
        sayName2() {
            console.log( sayName2==> , this.name)
        },
        sayName3() {
            console.log( sayName3==> , this.name)
        }
    }
}