生命周期:父组件嵌套子组件的生命周期执行顺序
因为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>