$nextTick

vue是异步渲染的、data改变之后Dom不会立即渲染、而$nextTick会在DOM渲染之后被触发、以获取最新的DOM节点。页面渲染的时候将整个data的修改做整个，多次data修改只会渲染一次。this.$ref获取dom元素。

slot

基本使用：从父组件添加子组件，通过solt放到子组件的指定位置。场景子组件是一个公用的组件，提供一些通用的功能。作用域插槽：父组件通过slot获取子组件中的值使用v-solt，就是子作用域的data传到父作用域中使用。具名插槽：就是插槽外部包裹了语义化标签比如〈header〉里面包裹一个slot

动态组件

用法：：is="component-name" 场景：需要根据数据、动态渲染场景。既组件类型不确定性。列入今日头条的新闻详情页，内容有text、图片、视频、但是这里的排序不是确定的、是动态变化的。

异步加载组件

css 复制代码

conmponents：{
    formDome:() => import('../BaseUse/FormDemo')
}

如何缓存组件

场景切换频繁、不需要重复渲染，渲染内容多，如果渲染内容少可以直接用v-show。缓存可以减少事列的渲染和销毁的次数。

〈keep-alive〉标签

mixin混入

作用：多个组件有相同的逻辑，抽离出来。

缺点：mixin 并不是完美的解决方案，会有一些问题，比如在多个组件对多个业务的时候，会让代码不好理解与维护比如data数据冲突，函数命名冲突等。在vue3中Composition API解决了这个问题。

自己实现一个v-model

dart 复制代码

<input type="text"  :value="text" @input="$emit('change',$event.target.value)"></input>


//首先定义一个
props：{
    text:String,
    default(){
       return:''
    }
}
model:{
    prop:'text',//对应props text
    event：'change'
}