生命周期
父子组件之间的生命周期更新， 其实大家想一下就明白了， 只是平时不会去考虑
Vue常用的高级特性
- 自定义v-model
常见方法一
<AComponent :value="a" @input="val=>a=val" />
自定义 v-model 里的 prop和event
// AComponent 子组件
<input :value="text" @change="$emit('change', $event.target.value)"/>
export default {
model: {
prop: 'text',
event: 'change'
},
props: {
text: String
}
}
// 父组件
<AComponent v-model="a"/>
第二个方法就很少用了， 因为你完全可以不修改model， 在chang的时候直接$emit('input')是一样的。如果组件比较复杂用model用有一种声明的感觉在里面， 让人点进来就知道你这个组件的v-model是用change触发的
个人还是推荐用 value和input保持和官网一样的
- $nextTick
- 异步执行， 在dom更新后执行
- 为什么需要这个？
- data更新不是马上更新dom的， 如果需要操作dom之类的你可能就需要用到了
- 为什么data不马上更新dom？
- 马上更新影响效率， 每次更新前vue、react都需要经过diff算法， 创建虚拟dom一系列运算， 为了缩小和原生开发的渲染性能的差距， 就有必要减少多余的运算
- slot
匿名slot
// 子组件 A
<div>
你好<slot></slot>
<div>
// 父组件
<A>世界</A>
// 展示
你好世界
匿名slot 设置默认值
// 子组件 A
<div>
你好<slot>world</slot>
<div>
// 父组件
<A>世界</A>
<A></A>
// 展示
你好世界
你好world
具名slot
// 子组件 A
<div>
<slot name="c"></slot>你好<slot></slot>
<div>
// 父组件
<A>
<templete v-slot:prefix>啊～</templete>世界
</A>
// 展示
啊～你好世界
作用域slot（子组件给父组件传递数据）
// 子组件 A
<div>
你好<slot row="{id:1}"></slot>
<div>
// 父组件
<A>
<templete v-slot={row}><div @click="handle(row.id)">aaaa</div></templete>
// 具体使用场景参考el-table
</A>
- 动态、异步组件
动态组件
components: {
c,d
},
data(){
return {
a: ''
}
}
created(){
this.a = 'c'
setTimeout(()=>{
this.a = 'd'
}, 2000)
}
<component :is="a"/>
// 等于下面这种写法
<c v-if="a ==="c"/>
<d v-if="a === d"/>
异步组件
components: {
a: ()=>import('a')
},
- keep-alive keep-alive 就是保持之前的状态 和v-show差不多， 所有的状态都保留
<tab-group v-model="tabVal">
<tab name='c'></tab>
<tab name='d'></tab>
</tab-group>
<keep-alive>
<c v-if="tabVal ==="c"/>
<d v-if="tabVal === d"/>
</keep-alive>
- 那么为什么不直接使用v-show呢
- v-show会初始化进来渲染所有内容， 已经发送所有组件请求， 特别如果是复杂的组件还有tab数比较多， 一进页面发送请求数量太多
- mixin
mixin 主要是抽离代码逻辑的， 个人不喜欢用， 如果真想抽离公共代码逻辑个人喜欢抽离成js， 一个个方法。
为什么不用mixin： 因为mixin是一个黑盒子，
- 在引入页面中根本不知道引入了哪些方法和属性， 而且这些方法和属性和本页面的重名也会存在冲突的
- 在查阅代码时经常就是这个方法在本页面找不到， 如果一个页面有多个mixin你就得一个个找， 多个mixinn也提升了重名的隐患， 重名最可怕的就是你还不知道， 他还不会报错
