Vue 面试知识点

Nian糕

修改于 2024-03-19 14:41:04

1K0

修改于 2024-03-19 14:41:04

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 为什么返回函数两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

面试