父组件和子组建挂载关系

  • 第一次页面加载会触发哪几个钩子? 会触发下面这几个beforeCreatecreatedbeforeMountmounted

  • 你的接口请求一般放在哪个生命周期中? 接口请求一般放在mounted中,但需要注意的是服务端渲染时不支持mounted,需要放到created

  • DOM 渲染在哪个周期中就已经完成?mounted中,

    • 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

      mounted: function () {
        this.$nextTick(function () {
            // Code that will run only after the
            // entire view has been rendered
        })
      }
      

代码演示

可以看到,子组件的mounted先执行,子组建改变了响应式数据,在父组件的mounted想要立马操作子组件的dom,需要用到nextTick

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js">script>
head>
<body>
    <div id="app">
        <parent-component>parent-component>
    div>
    <script>
        // 子组件
        const childComponent = {
            template: '
子组件{{msg}}
'
, data() { return { msg: 1111 } }, mounted() { console.error('------------------子组件挂载完成'); this.msg = 2222 console.error(this.$refs.bbb.innerHTML); this.$nextTick(() => { console.error(this.$refs.bbb.innerHTML); }) } }; // 父组件 const parentComponent = { template: `
父组件
`
, mounted() { console.log('---------------------父组件挂载完成'); console.log(this.$refs.aaa.$refs.bbb.innerHTML); this.$nextTick(() => { console.log(this.$refs.aaa.$refs.bbb.innerHTML); }) }, components: { 'child-component': childComponent } }; const app = Vue.createApp({ components: { 'parent-component': parentComponent } }); app.mount('#app');
script> body> html>

你可能感兴趣的:(vue)