Vue 高级特性总结

• 自定义v-model使用

//parent
<template>
	<p>content:{{name}}</p>
	<CustomInput v-model="name"/>
</template>
<sctipt>
export default {
	name: 'textVModel',
	data() {
		return {
			name: 'test'
		}
	}
}
</script>
//child
<template>
	<Input type="text" :value="text" @input="@$emit('change', $event.target.value)"/>
</template>
<script>
export default {
	name: 'customInput',
	model: {
		prop: 'text',
		event: 'change'
	},
	props: String,
	default(){
		return ''
	}
}
</script>

效果图：

• $nextTick使用

<template>
	<ul ref="ul">
		<li v-for="item in list" :key="item.id">{{item.value}}</li>
	</ul>
	<button @click="handleAddItem">增加两项</button>
</template>
<script>
export default {
	data(){
		return {
			list:[
				{id:'1',value:'a'},
				{id:'2',value:'b'}
			]
		}
	},
	methods:{
		handleAddItem(){
			this.list.push({id:Date.now(),value:Date.now()})
			this.list.push({id:Date.now(),value:Date.now()})
			
			//const ulElem = this.$refs.ul
			/** 图1-
				点击第一次输出 2 第二次输出 4 ，因为异步渲染，data改变之后
				不会立刻渲染 DOM 节点，多次 data 修改整合成一次
			*/
			//console.log(ulElem.childNodes.length) 
			//下面是使用 $nextTick后结果，如图2
			this.$nextTick( () => { // dom渲染之后触发回调，获取到最新的DOM 节点
				const ulElem = this.$refs.ul
				console.log(ulElem.childNodes.length) // 正常输出DOM 节点长度
			})
		}
	}
}
</script>

图1-
图二-

• refs
  在元素上定义 ref 属性，通过 $refs.dom名称获取DOM 元素

<template>
	<ul ref="ulElem"></ul>
</template>
<script>
	const ulElement = this.$refs.ulElem // <ul></ul>
</script>

• slot
  插槽分几种：
  • 普通插槽 （父组件调用子组件时需要传入子组件无法确定的内容）

  // parent
  <template>
      <Child :url="slotData.url">{{slotData.name}}</Chiild>
  </template>
  <script>
  data(){
     return {
     	slotData:{ name:''Mike ，url:''www.baidu.com }
     }
  }
  </script>
  // child
  <template>
  <a :href="url">
     <!-- 调用时要插入的内容 -->
     <slot>父组件没有传入就默认显示的内容</slot>
  </a>
  </template>
  <script>
     props:['url']
  </script>
  

  • 作用域插槽 （场景：父组件需要使用子组件内的 内置变量）

  	// parent
  	<template>
  		<child :url="slotData.url">
     		<template v-slot="slotProps">{{slotProps.slotDatas.title}}</template>
     	</child>
  	</template>
  	<script>
     	export default {
     		slotData:{ name:'Mike',url:'www.baidu.com' }
     	}
     </script>
     // child
     <template>
     	<a :href="url">
     		<slot :slotDatas="childData"></slot>
     	</a>
     </template>
     <script>
     	export default {
     		childData:{title:'childTitme'}
     	}
     </script>
  

  • 具名插槽（场景：组件内有多个 slot）

  // parent
  <template>
  	<child>
  		<template v-slot="head">head</template>
  		<template v-slot="section">section</template>
  		<template v-slot="footer">footer</template>
  	</child>
  </template>
  <script>
  	
  </script>
  // child
  <template>
  	<div class="head">
  		<slot name="head"></slot>
  	</div>
  	<div class="section">
  		<slot name="section"></slot>
  	</div>
  	<div class="footer">
  		<slot name="footer"></slot>
  	</div>
  </template>
  <script></script>
  

• 动态组件
  使用场景：新闻页，不规则，可能是 text 组件开始，也可能是 image 组件开始，中间顺序错乱

	<div v-for="item in list" :key="item.id">
   	<component :is="item.name"/>
   </div>
   
	data(){
   	return { 
   		list:[
   			{id:'1',name:'Text'},
   			{id:'2',name:'Section'},
   			{id:'3',name:'Asidt'},
   			{id:'4',name:'Text'},
   		]
   	 }
   }

• 异步组件
  使用场景：大组件，内容多，比如echarts组件，from组件，使用的时候才加载

<template>
	<CustomEcharts v-if="showCustom"/>
	<button @click="showCustom = true">show Custom</button>
</template>
<script>
	export default {
		components: {
			CustomEcharts: () => import('./Echarts/CustomEcharts.vue')
		},
		data(){
			return {   
				showCustom: false
			}
		}
	}
</script>

• keep-alive
  使用场景：缓存组件，频繁切换，不需要重复渲染的情况

组件不会因为 v-if 销毁，且每个组件只会 mounted 一次
<template>
   <keep-alive>
   	<customA v-if="active === 'A'"  @click="active = 'A'"/>
   	<customB v-if="active === 'B'"  @click="active = 'B'" />
   	<customC v-if="active === 'B'"  @click="active = 'C'" />
   </keep-alive>
</template>

• mixin - 混入
  使用场景：单独的一个js 文件，包含和 vue 实例相同的属性和方法，适用于抽离多个组件公共逻辑
  弊端：变量来源不明确，多个mixin 可能会属性冲突，会出现一对多和多对多的复杂场景

<template>
   <div>{{title}}</div>
</template>
import Mixin from './mixin.js'
<script>
   data(){
   	return {}
   }
</script>
// mixin.js
export default{
   data(){
   		return {title: 'Mixin- 混入' }
   	}
}

纯属记录工作中适用，方便以后查找。不正确地方望指正，感谢！