前端知识点总结——Vue父子组件执行顺序 / dataset

Vue 父子组件执行顺序

由外而内，再由内而外

• 加载顺序：
  父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
  当父组件执行完beforeMount挂载开始后，会依次执行子组件中的钩子，直到全部子组件mounted挂载到实例上，父组件才会进入mounted钩子

• 触发顺序：
  父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
  子组件更新完毕后再更新父组件

• 销毁过程
  父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
  等待子组件销毁后父组件才会销毁

dataset

作用：可以获取到标签中data属性的值，在懒加载中使用

<div id="demo" 
  data-drink="coffee" 
  data-food="sushi" 
  data-meal="lunch">¥20.12</div>

获取其中的值

var demo = document.getElementById('demo');  
var typeOfDrink = demo.dataset.drink;

两栏或三栏自适应

两栏自适应

1. 左边使用float: left 固定宽度，右边使用 margin-left 隔开自适应

<style>
  .left-1,
  .right-1 {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left-1 {
    float: left;
    width: 200px; /* 固定200px */
    background-color: green;
  }

  .right-1 {
    margin-left: 210px; /* 左边宽度再加10px空白 */
    background-color: black;
    color: white;
  }
</style>

<div>
  <div class="left-1">左边固定</div>
  <div class="right-1">右边自适应</div>
</div>

2. 左边使用 position: absolute 固定宽度，右边使用 margin-left 隔开自适应

<style>
  .left-2,
  .right-2 {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left-2 {
    position: absolute; /* 固定200px */
    width: 200px;
    background-color: green;
  }

  .right-2 {
    margin-left: 210px; /* 左边宽度再加10px空白 */
    background-color: black;
    color: white;
  }
</style>

<div>
  <div class="left-2">左边固定</div>
  <div class="right-2">右边自适应</div>
</div>

3. 使用 display: table 实现

<style>
  .container {
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .left,
  .main {
    display: table-cell;
  }

  .left {
    width: 200px;
    background: green;
  }

  .main {
    background: black;
    color: white;
    width: 100%;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">主体内容自适应</div>
</div>

4. 使用 display: flex 实现

<style>
	.container {
		display: flex;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}

	.left {
		width: 200px;
		background: green;
	}

	.main {
		background: black;
		color: white;
		flex: 1;
	}
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">右边自适应</div>
</div>