Vue 面试知识点

Unsplash

  • class 和 style 使用动态属性,使用驼峰式写法
  • v-ifv-show v-if 不渲染不满足判断条件的模块,v-show 渲染但不显示,使用场景:是否多次切换或频繁更新条件状态
  • keep-alive 缓存组件,使用场景:频繁切换,不需要重复渲染
  • v-for 中添加唯一的 key 为了高效的更新虚拟 DOM,会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素,添加方式:key="'list_' + index"
  • mixin 抽离多个组件里的公共逻辑 缺点:变量来源不明确,不利于代码阅读;多个 mixin 可能会造成命名冲突;mixin 和组件可能会出现多对多关系,复杂度高
  • $nextTick Vue 是异步渲染,data 改变后,DOM 不会立刻渲染,页面渲染时会将 data 的做整合,$nextTick 会在 DOM 渲染完之后执行延迟回调,减少 DOM 操作次数,提高性能
  • 组件 data 为什么返回函数 两个实例都引用同一个对象,当其中一个实例属性改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会互相干扰
Component.prototype.data = {
  message: 'hello'
}
Component.prototype.data = function() {
  return {
    message: 'hello'
  }
}
  • 组件化 传统组件,只是静态渲染,更新还要依赖于操作 DOM Vue MVVM 数据驱动视图,修改 Model 数据;ViewModel 监听事件、指令;View 渲染
  • 动态组件 :is
// 列表页:轮播图、文章、视频、图片
<div v-for="(item, index) in newsData" :key="index">
  <component :is="item.type"/>
</div>
  • 异步组件 import
comments: {
  Tab: () => import('../comments/Tab')
}
  • 计算属性和侦听器 computed 有缓存,data 不变则不会重新计算,监听值类型可正常拿到 oldVal watch 一般用于监听数据变化的同时,进行异步操作或者是比较大的开销,监听引用类型拿不到 oldVal,因为指针相同,此时已经指向了新的 Val
  • Vue 生命周期(创建、挂载、更新、销毁) beforeCreate created 页面还没有渲染,但 Vue 实例已经初始化了,可以调用 methods 中的方法、改变 data 中的数据,使用场景:发送请求获取数据 beforeMount mounted 页面已经渲染完毕,可以获取到 el 中的 DOM 元素,进行 DOM 操作 beforeUpdate updated beforeDestroy 清除定时器、自定义事件 destroyed
  • 父子组件创建、更新顺序 父组件 created 子组件 created 子组件 mounted 父组件 mounted 父组件 beforeUpdate 子组件 beforeUpdate 子组件 updated 父组件 updated
  • 组件之间的传值通信 父组件给子组件传值通过 props 子组件给父组件传值通过 $emit 触发回调 其他组件通信,通过实例一个 Vue 实例 event 作为媒介,要相互通信的组件之中,都引入 event
  • 动态路由配置(路由懒加载)
{
  path: '/user/:id',
  component: () => import('../components/User')
}
  • vue-router 路由模式 hash 模式 url 多了 # 号,它的特点在于:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端完全没有影响,不需要后台进行配置,因此改变 hash 不会重新加载页面 history 模式 利用了 pushState()replaceState() 方法,history 模式改变了路由地址,因为需要后台配置地址

History.pushState() 方法用于在历史中添加一条新记录,浏览器地址栏立刻显示新地址,但并不会跳转,它只是成为浏览历史中的最新记录 History.replaceState() 的使用与 history.pushState() 非常相似,区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个

  • 事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThis"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在event.target是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThis">...</div>
  • 表单部分
<template>
  <p>输入框:{{name}}</p>
  <input type="text" v-model.trim="name"/>
  <input type="text" v-model.lazy="name"/>
  <input type="text" v-model.number="age"/>

  <p>多行文本:{{desc}}</p>
  <textarea v-model="desc"></textarea>

  <p>复选框{{checked}}</p>
  <input type="checkbox" v-model="checked"/>

  <p>多个复选框{{checkedNames}}</p>
  <input type="checkbox" id="beijing" value="beijing" v-model="checkedNames"/>
  <label for="beijing">北京</label>
  <input type="checkbox" id="shenzhen" value="shenzhen" v-model="checkedNames"/>
  <label for="shenzhen">深圳</label>
  <input type="checkbox" id="guangzhou" value="guangzhou" v-model="checkedNames"/>
  <label for="guangzhou">广州</label>

  <p>单选{{gender}}</p>
  <input type="radio" id="male" value="male" v-model="gender"/>
  <label for="male">男</label>
  <input type="radio" id="female" value="female" v-model="gender"/>
  <label for="female">女</label>

  <p>下拉列表选择{{selected}}</p>
  <select v-model="selected">
    <option disable value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

  <p>下拉列表选择(多选){{selectedList}}</p>
  <select v-model="selectedList" multiple>
    <option disable value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      name: '年糕',
      age: 17,
      desc: 'lalalala',
      checked: true,
      checkedNames: {},
      gender: 'male',
      selected: '',
      selectedList: []
    }
  }
}
</script>
End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 九宫格抽奖

    这是之前国庆活动所做的一个新功能,以往抽奖都是采用转盘的形式,这次换了个新的玩法,折腾了两天才实现,主要代码出自哪里已经无法考究了,我做了部分优化,贴上来给大家...

    Nian糕
  • Vue2.0 数据抓取及Swiper组件开发

    本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

    Nian糕
  • Canvas 让你的屏幕下一场 Hacker 流星雨吧

    今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

    Nian糕
  • RediSQL 0.8.0 发布 将查询结果写入流中

    RediSQL 0.8.0 发布了,RediSQL 是一个 Redis 模块,为 Redis 提供完整的 SQL 功能。RediSQL 支持所有 Redis 数...

    Zip
  • 云计算与物联网的关系

      物联网与云计算都是基于互联网的,可以说互联网就是它们相互连接的一个纽带。物联网就是互联网通过传感网络向物理世界的延伸,它的最终目标就是对物理世界进行智能化管...

    云计算爱好者
  • 怎样成为解决问题的高手(连载二)

    在连载一里,我们分享了解决问题的四个步骤,这四个步骤非常的重要,我要在这里重复一下。

    黄成甲
  • 禾多科技拿下首张高速自动驾驶路测牌照,低线激光雷达方案,剑指量产

    4月11日,禾多宣布获得江苏省智能网联道路测试牌照,获准在江苏省内指定路段开展自动驾驶车辆路测。

    量子位
  • iOS提交Appstore时报错: iTunes Store operation failed.

    kongxx
  • python第三方库推荐 - dateu

    在dateutil中,吸引我的东西有2个,1个是parser,1个是...

    py3study
  • 程序员不仅要学会百度,更要懂得提问

    前些天在学习EasySwoole的时候看到了开发文档上关于提问的艺术,以下是结合了自己开发过程中遇到的问题列出了几点建议:

    benny

扫码关注云+社区

领取腾讯云代金券