【vue】生命周期面试题2

2021/11/20 23:41:04

本文主要是介绍【vue】生命周期面试题2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

关于Vue组件的生命周期说法错误的是:

A mounted钩子函数中,可以直接获取dom元素

B beforeMount钩子函数中,不可以直接获取dom元素

C beforeDestory钩子函数中,不可以直接获取dom元素

D destoryed钩子函数中,不可以直接获取dom元素

直接上一个例子:

<div id="app">
    <button @click="change">按钮</button>
    <component :is="title"></component>
</div>
<script>
    let comA = {
        template: '<div>Hello,{{msg}}!<div ref="div1">这是一个dom元素</div></div>',
        data() {
            return {
                msg: 'comA'
            }
        },
        beforeCreate() {
            console.log('beforeCreate:' + this.$refs.div1)
        },
        created() {
            console.log('created:' + this.$refs.div1)
        },
        beforeMount() {
            console.log('beforeMount:' + this.$refs.div1)
        },
        mounted() {
            console.log('mounted:' + this.$refs.div1.innerText)
        },
        beforeDestroy() {
            console.log('beforeDestroy:' + this.$refs.div1.innerText)
        },
        destroyed() {
            console.log('destroyed:' + this.$refs.div1)
        }
    };
    let comB = {
        template: '<div>Hello,comB!</div>'
    };
    new Vue({
        el: '#app',
        data: {
            title: 'comA'
        },
        methods: {
            change() {
                this.title = 'comB'
            }
        },
        components: {
            comA,
            comB
        }
    })
</script>
</body>

点击按钮切换组件,这样就能看到destory钩子函数调用情况啦。

获取dom元素的方式采用:在标签上设置ref属性,使用this.$refs.xxx就可以获取啦。

结果:

可以看到,到mounted钩子函数这里,el挂载上了,视图也渲染完毕了,能获取dom元素了。destoryed钩子函数这里已经销毁组件了,所以dom元素无法获取。



这篇关于【vue】生命周期面试题2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程