关于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元素无法获取。