< 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >

< 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >_第1张图片

每日小技巧:6 个很棒的 Vue 开发技巧

  • ① Watch 妙用
    • > `watch`的高级使用
    • > 一个监听器触发多个方法
    • > `watch` 监听多个变量
  • ② 自定义事件 `$emit()` 和 事件参数 `$event`
  • ③ 监听组件生命周期
    • 常规写法
    • @hook写法
  • ④ 路由使用技巧
    • > 路由参数解耦
    • > 无刷新修改当前路由Url及参数
  • 往期内容


① Watch 妙用

> watch的高级使用

watch 在监听某个指定对象发生变化时触发,但是有时我们希望 watch 对应的监听函数能够在生命周期中,被主动调用此函数,执行函数内对应的逻辑操作。

  • handler - function : 监听对象改变触发的对象;
  • immediate - Boolean : 是否在生命周期挂载时,自执行一遍;
  • deep - Boolean : 是否深度监测;
export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true
        }
    },
    methods: {
        sayName(newVal, oldVal) {
            console.log(this.name, newVal)
            ...
            // 对应的操作逻辑,只需在特定需要使用此函数的情况下,这样子写会好用一点。
            // 代码整洁
        }
    }
}

> 一个监听器触发多个方法

当特定开发需求,需要触发监听器执行多个方法时,可以使用数组,您可以设置多个形式,包括字符串、函数、对象。

export default {
    data: {
        name:  Joe
    },
    watch: {
        name: [
        	// 调用定义的函数
            sayName1 ,
           	// 
            (newVal, oldVal) => {
                ...
            },
            {
                handler:  sayName3 ,
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log( sayName1==> , this.name)
        },
        sayName3() {
            console.log( sayName3==> , this.name)
        }
    }
}

> watch 监听多个变量

watch 本身不能监听多个变量。但是,我们可以通过返回具有计算属性的对象。通过计算属性的特性,去监听计算属性返回的值。 从而实现“监听多个变量”。

export default {
    data() {
        return {
            msg1:  apple ,
            msg2:  banana
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log( msg1 is change )
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log( msg2 is change )
                }
            },
            deep: true
        }
    }
}

② 自定义事件 $emit() 和 事件参数 $event

$event 是事件对象的一个特殊变量,它在某些场景下为我们提供了更多的可用参数来实现复杂的功能。本机事件:与本机事件中的默认事件对象行为相同。

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    div>
template>
export default {
    methods: {
        inputHandler(msg, e) {
            console.log(msg, e.target.value) // hello, input输入的内容
        }
    }
}

自定义事件:在自定义事件中表示为捕获从子组件抛出的值。

子组件

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
        }
    }
}

③ 监听组件生命周期

通常我们使用 $emit 监听组件生命周期,父组件接收事件进行通知。

常规写法

子组件

export default {
    mounted() {
        this.$emit( listenMounted )
    }
}

父组件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    div>
template>

其实有一种简单的方法就是使用@hook 来监听组件的生命周期,而不需要在组件内部做任何改动。同样,创建、更新等也可以使用这个方法。

@hook写法

父组件

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

④ 路由使用技巧

> 路由参数解耦

正常写法


export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

在组件中使用 $route 会导致与其相应路由的高度耦合,通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦,将路由的 props 属性设置为 true 后,组件内部可以通过 props 接收 params 参数。

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

还可以通过功能模式返回道具。

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

> 无刷新修改当前路由Url及参数

引入webpack-merge

import merge from 'webpack-merge';
 
修改原有参数        
this.$router.push({
    query:merge(this.$route.query,{'maxPrice':'630'})
})
 
新增一个参数:
this.$router.push({
    query:merge(this.$route.query,{'addParams':'我是新增的一个参数,哈哈哈哈'})
})
 
替换所有参数:
this.$router.push({
	query:merge({},{'maxPrice':'630'}
)

往期内容

< CSDN周赛解析:第 27 期 >

< 每日算法 - JavaScript解析:二叉树灯饰【初识动态规划 - dp, 具体理解配合代码看最合适,代码均有注释】 >

< 每日算法 - Javascript解析:经典弹珠游戏 >

< JavaScript技术分享: 大文件切片上传 及 断点续传思路 >

你可能感兴趣的:(‘,尤大,’,的Vue框架,vue.js,javascript,前端)