Vue面试学习及总结

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.on 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