2-1 vue使用-考点串讲

2-2 vue基本使用

• v-html 覆盖子组件，有xss风险
• computed:使用v-model 必须使用get()和set()
•  watch:引用类型，深度监听，拿不到oldVal,因为指针赋值的关系，指针相同，指向新的val

2-3 vue基本知识点串讲

• 便利对象——v-for
• key重要性
• v-for和v-if不混合使用

事件

• event参数，自定义参数-(2,$event)
• event.__proto__.constructor MouseEvent是原生event对象
• event.target 事件监听的位置
• event.currentTarget 事件被注册的当前元素（触发）

事件修饰符，按键修饰符

• .prevent .self .capture
• .ctrl .exact(精准只按下某个键)
• 【观察】事件绑定到哪里

表单

• v-mldel .trim .lazy .number

2-4 vue父子组件如何通讯

    //  props:['list']
    props:{
       list:{
           type:Array，
           default(){
               return []
            }
       }
    }

 

2-5 如何用自定义事件进行vue组件通讯

 event.js

    import Vue from 'vue'
    export default new Vue()  //vue本身自带自定义事件的能力

使用

    event.$emit('onAddTitle',this.title)  
    event.$on('onAddTitle',this.addTitleHandler)

优化上

    //自定义事件的解绑
    beforeDestroy(){
    //及时销毁，防止内存泄漏
        event.$off('onAddTitle',this.addTitleHandler)
    }

2-6 vue父子组件生命周期调用顺序

• 渲染 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 更新 父beforeUpdate->子beforeUpdate->子updated->父updated
• 销毁 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

2-7 面试会考察哪些vue高级特性

 

2-8 vue如何自己实现v-model

// 例如：vue颜色选择器
    <input type="text" 
    :value="text"
    @input="$emit('change',$event.target.value)"
    >
  export default{
       model:{
        prop:'text', //对应props text
        event:'change'//对应事件中 change
    },
        props:{
            text：String，
            default(){
                return ''
                }
            }
  }  
   

 

2-9 vue组件更新之后如何获取最新DOM

• vue 异步渲染
• data 改变后，DOM不是立刻渲染
• $nextTick 会在DOM渲染后 触发，获取最新DOM节点  

附：

1. 异步渲染。$nextTick 待 DOM 渲染完成后再回调
2. 页面渲染会将data的修改做整合，多次修改只会渲染一次

2-10 slot是什么

基本使用：父组件中插入一段文字或者组件 作用域插槽:子组件传值到父组件使用

子组件

    <slot :slotData="website"></slot>

父组件

    <template v-slot="slotProps">
    {{slotProps.slotData}}
    </template>

具名插槽

    <slot name ="header"></slot>

        //缩写 #header
    <template v-slot="header">
  
    </template>

2-11 vue动态组件是什么

• :is = "component-name"
• 根据数据，动态渲染场景（组件类型不确定）  

2-12 vue如何异步加载组件

• import xxx from './xxx' 组件引入同步加载
• import()函数

components:{
    formDemo:() => import('../comonents/formDemo')  
} 

•  类比路由的懒加载

2-13 vue如何缓存组件

•  keep-alive
• 缓存组件，频繁切换，无需重复渲染，性能优化 - 使用场景 tabs 切换

2-14 vue组件如何抽离公共逻辑

• mixin //可添加多个自动合并 缺陷：
• 变量来源不明确，不利于阅读-（只能全局搜索）
• 多个mixin,命名冲突
• mixin和组件 可能出现 多对多的关系，复杂度较高

2-16 vuex知识点串讲

• state 的数据结构设计

2-17 vue-router知识点串讲

路由模式（hash H5 history）

• 后者需要serve端支持-前端处理404页面 路由配置(动态路由)

routes:[
    {path:'/user/:id'. component: user}
]