实用的Vue开发技巧有哪些

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

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

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

    
        
            
{{item.title}}
            
{{item.content}}
        

父组件使用

import List from  @/components/List.vue
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title:  title ,
                content:  content
            }],
            currentItem:
        }
    }
}

3.样式范围

开发中修改第三方组件样式很常见，但是由于scoped属性的样式隔离，可能需要去掉scoped或者另起一个样式。这些做法有副作用（组件样式污染，缺乏优雅），在css预处理器中使用样式渗透来生效。我们可以使用 >>> 或者 /deep/ 来解决这个问题：

Outer layer >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}

/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}

4.watch的高级使用

watch 在监听器属性发生变化时触发，有时我们希望 watch 在组件创建后立即执行。可能想到的方式是在创建生命周期中调用它一次，但这不是一种优雅的编写方式，所以也许我们可以使用这样的东西。

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

Deep Listening

监听一个对象时，当对象内部的属性发生变化时，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)
        }
    }
}

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

6.事件参数$event

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

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

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

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

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

7.程序化事件监听器

例如，在页面挂载时定义一个定时器，需要在页面销毁时清除定时器。这似乎不是问题。但仔细观察，this.timer 的唯一目的是能够在 beforeDestroy 中获取计时器编号，否则是无用的。

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

如果可能，最好只访问生命周期挂钩。这不是一个严重的问题，但可以认为是混乱。我们可以通过使用 或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)
        })
    }
}

使用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期，父组件接收事件进行通知。

子组件

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

父组件

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

感谢各位的阅读，以上就是“实用的Vue开发技巧有哪些”的内容了，经过本文的学习后，相信大家对实用的Vue开发技巧有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！