美文网首页
Vue面试学习及总结

Vue面试学习及总结

作者: __拾光__ | 来源:发表于2021-03-23 22:21 被阅读0次

    computed和watch

    • computed是计算属性,也就是依赖某个值或者props通过计算得来得数据;
    • computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算;
    • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
    • watch监听引用类型拿不到oldVal
    • 不支持缓存,数据变直接会触发相应的操作;
    • 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
    • 支持异步操作;
    • 当多个属性影响一个属性的时候,建议用computed
    • 当一个值发生变化之后,会引起一系列的操作,这种情况就适合用watch
    • watch是监听器,可以监听某一个数据,然后执行相应的操作

    点击事件

    • 点击时间传$event可以把event参数传进去
    • event是原生的
    • 事件被挂载到当前元素

    事件修饰符

    • .stop阻止单击事件继续传播
    • .prevent提交事件不再重载页面
    • .stop.prevent可以串联
    • .ctrl 即使按了Alt或者shift也会触发
    • .ctrl.exact有且只有Ctrl被按下才会触发
    • .exact没有任何系统修饰符被按下才能触发

    表单

    • v-modeal.trim 截取前后空格
    • v-model.lazy 输入完之后才会加载
    • v-model.number转换成数字

    组件使用

    • props $emit
    • 自定义事件
      • event.emit和event.on emit和on的事件必须在一个公共的实例上,我们可以使用一个空的 Vue 实例作为中央事件总线。 event.$off解绑
    • 单个组件的生命周期
      • beforeCreate 生成Vue实例,事件和生命周期初始化
      • created data初始化,计算属性事件回调,但dom树还未挂载
      • beforeMount将虚拟dom替换成真正的dom
      • mounted挂载完成,dom树渲染到页面,可进行dom操作
      • beforeUpdate数据有更新被调用
      • updated 虚拟dom重新渲染,以最小dom开支来重新渲染dom
      • beforeDestroy 清除自定义事件、定时器等等
      • destroyed组件已销毁

    父子组件生命周期执行顺序

    • 父created、子created、子mounted、父mounted
    • 父before update、子before update、子updated、父updated

    Vue高级特性

    • 自定义v-model
        Vue.component('base-checkbox', {
        model: {
          prop: 'checked',
          event: 'change'
        },
        props: {
          checked: Boolean
        },
        template: `
          <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"
          >
        //使用
        <base-checkbox v-model="lovingVue"></base-checkbox>
        `
      })
      
    • $nextTick
      • 页面渲染时会将data的修改做整合,多次data修改只会渲染一次
      • data改变后,DOM不会立刻渲染
      • $nextTick会在DOM渲染之后触发,已获取最新DOM节点
    • slot
      • 基本使用 组件里的内容直接插入slot标签中
      • 作用域插槽 使用v-slot="slotProps"来获取带子组件传过来的数据
      • 具名插槽 使用v-slot:header来插入指定的插槽中
    • 动态组件
      • 使用 <component :is="NexTickName" 来渲染NexTickName指定的组件
    • 异步组件
      • 使用的时候再加载
      • FormDemo:()=>import('../FormDemo')
    • keep-alive
      • 缓存组件
      • 频繁切换,不需要重复渲染
    • mixin
      • 多个组件有相同的逻辑,抽离出来
      • 来源不明确,阅读困难
      • 命名重复问题
      • mixin和组件可能出现多对多的关系,复杂度高
    • Vuex
      • state
      • getters
      • action
      • mutation
      • 用于Vue组件
      • dispatch
      • commit
      • mapState
      • mapGetters
      • mapActios
      • mapMutations
    • Vue-router使用
      • 路由模式 hash和H5history
      • 路由配置 动态路由和懒加载
      • 动态路由 /user/:id 使用$router.params.id
      • 懒加载 compo nent:()=>import(/* webpackChunkName:"navigator" */ './Nav')
        4-1

    相关文章

      网友评论

          本文标题:Vue面试学习及总结

          本文链接:https://www.haomeiwen.com/subject/yfmqhltx.html