Vue 面试知识点

2024-03-19 14:41:04 浏览数 (1)
UnsplashUnsplash
  • class 和 style 使用动态属性，使用驼峰式写法
  • v-if和 v-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 为什么返回函数 两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰
代码语言：javascript复制
Component.prototype.data = {
  message: 'hello'
}
Component.prototype.data = function() {
  return {
    message: 'hello'
  }
}
  • 组件化 传统组件，只是静态渲染，更新还要依赖于操作 DOM Vue MVVM 数据驱动视图，修改 Model 数据；ViewModel 监听事件、指令；View 渲染
  • 动态组件 :is
代码语言：javascript复制
// 列表页：轮播图、文章、视频、图片
<div v-for="(item, index) in newsData" :key="index">
  <component :is="item.type"/>
</div>
  • 异步组件 import
代码语言：javascript复制
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
  • 动态路由配置（路由懒加载）
代码语言：javascript复制
{
  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() 是修改了当前的历史记录项而不是新建一个

  • 事件修饰符
代码语言：javascript复制
<!-- 阻止单击事件继续传播 -->
<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>
  • 表单部分
代码语言：javascript复制
<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>
面试 vue.js 渲染

0 人点赞