vue2 高级特性

1.自定义 v-model

2.$nextTick

3.ref

4.slot

5.动态组件

6.异步组件

7.keep-alive

8.mixin

一、自定义 v-model，以及v-model的实现原理

　　子组件：

<template>

<input type="text" v-model="value" @input="$emit('change', $event.target.value)">

</template>

<script>

export default {

 // model:{ // model 中的 prop 和 event 如果是默认的 value 和 input,则可以忽略不写

 // prop: 'value', // prop 默认值是 value

 // event: 'input' //event 默认值是input

 // } ,

  props:{

     value:{

         type: String,

         default: ''

     }

  }

}

</script>

父组件引用：

<custom-v-model v-model="name" @change="onChange"></custom-v-model>
<p>{{name}}</p>
export default{
     data:{
        name:''
     },
     onChange(value){
         this.name = value
     }
    
}    

 2.实现原理：

• • input 元素的 value = this.name
  • 绑定 input 事件 this.name = $event.target.value
  • data 更新触发重新渲染 re-render　　　　

二、$nextTick

• Vue 是异步渲染
• data 改变之后，DOM 不会立即渲染
• $nextTick 会在DOM 渲染完 之后被触发　

  <ul ref="ul1>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
      <button @click="addItem">添加</button>
  </ul>
  
  export default{
       data(){
             return {
                    list:['1','2','3']
             }
       },
      methods:{
           addItem(){
                   this.list.push('4')
                   this.list.push('5')
                  this.list.push('6')
                 
                   // 异步渲染，待 DOM 渲染完$nextTick 进行回调
                  // 页面会将 data 的修改做整合，多次data 修改只渲染一次
                  this.$nextTick(()=>{
                          //只执行一次，虽然上面对data 进行了三次操作
                             //获取DOM元素
                           const el = this.$refs.ul1;
                          console.log(el)
                  })
           }
      }
  }    

三、ref

四、slot

　　1.基本使用

　　　　　子组件 SlotDemo.vue：

<template>
       <span>
                  <slot>默认内容</slot><!--父组件不传显示默认内容，传了就显示传过来的内容-->
        </span>
<template/>

　　　　父组件引用子组件:

<slot-demo>测试数据</slot-demo>

     2. 作用域插槽

　　　　子组件在绑定属性，将信息传递给父组件使用。这些属性会挂在父组件的 v-slot 接受的对象上

　　　　子组件：定义两个属性text 和 count

<template>
    <div>
       <slot :text="msg" :count="1"></slot>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'ceshi',
            count: 1
        }
    }
}
</script>

　　父组件：

 <my-component v-slot="slotProps"> 
        {{slotProps.text}} {{slotProps.count}}
   </my-component>

     3. 具名插槽

　　　　子组件用 name 属性 表示插槽的名称。父组件使用时加上name属性

<!---子组件Child.vue-->

<template>
    <slot>插槽后备的内容</slot>
     <slot name="content">插槽后备的内容</slot>
</template>



<!---父组件-->
<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

五、动态组件

• 用法  :is="component-name"　　
• 场景： 需要根据数据动态渲染不同的组件类型时。例如：新闻详情页：可以是全文字内容，也可以是全图片类型

  <div v-for="(name) in lists" :key="name">
       <component :is="name">
  </div>
  
  exprt default {
       components:{
              ImgComponent,
              VedioComponent
  
        },
        data(){
               return{
                       list:[
                           'ImgComponent',
                           'VedioComponent'
                        ]
              }
        }
  }

六、异步组建

　　用法： 按需加载，异步加载大组建。使用 注册组件的时候 使用 () => import('....')函数加载

<my-component />
export default {
       components:{
               MyLists, //同步加载组件
               MyComponent: ()=> import('./components/Mycomponent')  //异步加载组件
       }
}        

七、keep-alive

• • • 缓存组件。
    • 频繁切换，不需要重复渲染时使用。
    • vue 常见性能优化的方案之一

八、mixin

• • • 多个组件有相同的逻辑，抽离出来
    • mixin 并不是完美的解决方案，会有一些问题。
      • 变量来源不明确，不利于阅读
      • 多 mixin可能会造成命名冲突
      • mixin 和组件可能出现多对多的关系，复杂度较高　　
    • vue3 提出的 Composition API 会解决这个问题