vuejs之动态组件、修饰符、混入mixins、内置组件、路由懒加载

动态组件

<component :is="你的组件"></component>


import  你的组件 from "路径"

export default {
    
    data(){
        return {
            你的组件
        }
    }
}

修饰符

事件修饰符[掌握]

.stop===阻止事件冒泡

.prevent===阻止默认行为

语法

@事件类型.stop=“函数” 阻止事件冒泡

@事件类型.prevent=“函数” 阻止浏览器默认行为

@事件类型.stop.prevent=“函数” 阻止事件冒泡和浏览器的默认行为

键盘修饰符[掌握]

.enter === 回车键

.space === 空格键

.up ===上键

.down===下键

.left===左边

.right===右边

表单修饰符[掌握]

v-model.lazy=“值” 把底层input事件改成change

v-model.number=“值” 只能输入数字

v-model.trim=“值” 去掉首尾的空格

sync修饰符[了解]

是子组件修改父组件的值一种简写

<子组件 :msg="msg" @update:msg="msg=$event"></子组件>

<子组件 :msg.sync="msg"></子组件>

混入mixins[了解]–不建议开发中滥用

缺陷:

• 命名冲突

• 滥用的话后期很难维护

• 不好追溯源，排查问题稍显麻烦

• 不能轻易的重复代

  //作用:提取组件的公共部分
  
  import xx from "混入"
  
  export default {
      mixins:[x,y,z,ccc]
      
  }
  

内置组件

– slot: 插槽 匿名插槽 具名插槽 作用域插槽

– component: 通过 :is 动态挂载组件 动态组件 把组件当成数据

– transition: 写动画

<template>
 <transition name="名字">
  <你写的组件></你写的组件>
 </transition>
</template>

<style>
 // 进入动画的过程 和 离开动画的过程
.名字-enter-active, .名字-leave-active {
 transition: opacity .5s;
}
// 动画开始的瞬间 和 结束的瞬间
.名字-enter, .名字-leave-to {
 opacity: 0;
}
</style>

-keep-alive :缓存组件[掌握]

 include:包含
 exclude:除开
 max:最多缓存组件个数
 <keep-alive :include="['组件名a', '组件名b']" :max="1000" :exclude="['组件a', '组件b']">
     你需要缓存的组件
  </keep-alive>

v-model的底层原理[面试]

可以实现数据双向绑定?

表单元素绑定value的值

表单元素添加input的事件

表单元素给父组件自定义事件input

懒加载

路由懒加载—解决首屏加载时间[掌握]

{
    path:"路由",
    component:()=>import("组件的路径")
}

注意:第一次进来要加载组件和加载很多次组件不需要懒加载

组件懒加载(异步组件)[了解]

 components: {
    //组件懒加载 异步组件 用到了之后哉加载这个组件
    NumberInput: () => import("@/components/NumberInput.vue"),
  }

MVVM[面试]

是一种架构模式,vue的底层就是这种模式

M:model数据模型层 提供数据

V:View视图层 页面展示

VM:ViewModel层,是M和V之间桥梁

M->V:数据改变了,页面跟着变. 数据进行挟持 Object.defineProperty

V->M:页面变了,数据跟着变,对节点进行监听事件

虚拟DOM[面试]

是一个js对象,和真实dom一样的.存储在内存中.

数据变了,先更新虚拟dom,虚拟dom通过diff算法和真实dom进行对比(同层对比),替换变化的地方.

v-for需要key,就是提供给虚拟dom对比使用,优化性能.