vue面试知识点

小灰灰 2024-03-16 23:54 11阅读 0赞

Unsplash

*  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>
    
    
    <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>

复制