vue 进阶

vue 进阶

特征一：模板化

挑战 => 动态化节点 - 条件判断 v-if | 组件 | 动态组件 | 结构化

插槽 — 以对比的形式存在

默认插槽

组件外部维护参数以及结构，内部安排位置

• 默认插槽的实现方式 => 整体插槽的聚合

• 多个插槽希望节点分开布局？| 多个默认插槽插槽会怎么样？ => 重复 ‘ 替换 ’ 渲染

具名插槽

以name的形式标识插槽，从而在组件内部做到可区分

	//app.vue  父级
	<template>
		<HelloWorld>
			<template v-slot:header>{{ header }}</template>
		</HelloWorld>
	</template>

	<script>
		import HelloWorld from './components/HelloWorld.vue'
		export default {
			name: 'App',
			components: {
				HelloWorld
			},
			data(){
				return {
					header: 'header header'
				}
			}
		}
	</script>

	//HelloWorld.vue  子级
	<template>
		<slot name ="header" ></slot>
	</template>

• 注意点 => name 其实是缩影了一段解析的上下文空间

作用域插槽

外部做结构的描述勾勒，内部做传参
注意点：传参

	//app.vue  父级
	<template>
		<HelloWorld>
			<template #content='slotProps'>
				{{ slotProps }}
			</template>
		</HelloWorld>
	</template>

	<script>
		import HelloWorld from './components/HelloWorld.vue'
		export default {
			name: 'App',
			components: {
				HelloWorld
			},
			data(){
				return {
					header: 'header header'
				}
			}
		}
	</script>

	//HelloWorld.vue  子级
	<template>
		<slot name ="content"></slot>
	</template>

	<script>
		export default {
			name: 'HelloWorld',
			data () {
				return {
					slotProps: 'scope slot 子组件向父组件传参'
				}
			}
		}
	<script>

模版二次加工方案

1.watch | computed
=> a. 使用上 — 流程 | 结果
=> b. 原理 — watch: 对劫持的数据进行观察后，触发相应回调 | computed: 收集依赖 => 数据劫持 => 触发重新计算
=> once，immediate，deep：true …

2.其他
方案一：函数 - { { calcAdd(header) } }；管道符 { { header | calcAdd } }

方案二：v-text = ‘header’ v-html = ’ footer ’

方案三：直给 - {{ …三元表达式 }}

jsx 更自由的 all in js

可以用来做更加灵活且js化的方案 => vue并没有拒绝

特征二：组件化

• 1.抽象复用
• 2.精简 & 聚合
• 3.渲染顺序

混入mixin - 逻辑混入

• 1.应用：抽离公共逻辑（逻辑相同，模版不同）<=> extends 核心逻辑的继承
• 2.合并策略
  a.变量补充，多mixmins的情况下，后者覆盖前者；不会覆盖本体 <=> 单个，不会覆盖本体
  b.生命周期在父组件和子组件之间，多mixins前提下，按照引入顺序挨个加载 <=> 父组件和子组件之间，单个
  c. extends是在mixin之前

特征三：插件补充拓展