vue组件及页面的生命周期

生命周期：父组件嵌套子组件的生命周期执行顺序

因为vue在解析时是逐行解析，最外层标签没有遇到闭合标签时是处于一个DOM没有完成加载的状态，所以还不能触发父组件的mounted，子组件包含于父组件中，优先完成DOM加载所以子组件的mounted会优先触发

组件深入

缓存组件生命周期触发的顺序

// 没有缓存，动态组件的实现
 <component :is="currentCpn" />
<div id="app">
// 有缓存，缓存组件的实现
  <keep-alive :exclude="['Hello']">
     <component :is="currentCpn" />
   </keep-alive>
   <button @click="currentCpn = 'Hello'">Hello</button>
   <button @click="currentCpn = 'HelloWorld'">HelloWorld</button>
   <button @click="loadModule">异步加载组件</button>
</div>
//  静态import ===> 被引入的模块会打包到一起 
import HelloWorld from './components/HelloWorld.vue'
import Hello from './components/Hello.vue'
import { default as xxx, ReactDom  } from './utils'
import react,{  ReactDom  } from 'react' // 导入default同上
export default {
  data() {
  	currentCpn: 'Hello'
  },
  components: {
    HelloWorld,
    Hello: => import(/* webpackChunkName: "Lit" */ './utils/math')
  },
  methods: {
    loadModule() {
      import(/* webpackChunkName: "Lit" */ './utils/math').then(module => {
        console.log(module)
      })
    }
  },
}

函数式组件

<script>
export default {
  name: 'FC',
  functional: true, // 当前是函数式组件
  props: ["title","imgUrl"], // 声明接受属性
  /* 
    函数式组件：
    只能针对无状态(无data)的组件，
    不能创建实例对象，执行更快，
    可以没有根标签
  */
  render(createElement, context) {
    const vnodes = []
    // 函数式组件不能通过this取props，因为没有组件实例
    const { title, imgUrl } = context.props

    if(title) {
      vnodes.push(createElement('h2', title))
    }
    if(imgUrl) {
      vnodes.push(<img src={imgUrl} />)
    }
    // 返回的是包含多个虚拟DOM的数组，原理就像map遍历的返回值形成最终的元素对象
    return vnodes 
  }
}
</script>