vue常见面试题

前端面试
前端面试
发布日期:   2021-10-12
更新日期:   2022-03-04
文章字数:   3.6k
阅读时长:   13 分
阅读次数:  

vue 的优点

  1. 轻量级框架，只关心视图层
  2. 组件化编码
  3. 简单易学，国人开发（尤雨溪），中文文档
  4. 双向数据绑定，保留了 angular 的特点，在数据操作方面更为简单；
  5. 虚拟 dom,不在使用原生的 dom 操作节点，极大解放 dom 操作

父组件向子组件传递事件？

  • 通过 props

子组件像父组件传递事件？

通过$emit（）方法

例如：子组件

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3>
    <br/><button @click='select(`上海`)'>点击此处将‘上海’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
</script>

例如：父组件

<template>
  <div class="train-city">
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>

  </div>
</template>
<script>
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

为什么使用 key?

  • 使用 key 一般用来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点。
    作用主要是比较两个节点是否相同，相同就复用，不相同就删除并创建新的节点，目的是为了高效的更新虚拟 DOM。

v-show 和 v-if 指令的共同点和不同点？

  • 相同点：v-show 和 v-if 都能控制元素的显示和隐藏

  • 不同点：v-show 和 v-if 控制元素的显示和隐藏的本质方法不同，v-show 是通过 css 中的 display 设置为 none 来控制显示隐藏，只编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，频繁使用 v-if，会比较消耗性能。

    总结：如果要频繁切换某节点，使用 v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。

scoped 的作用？

  • 确保样式只针对当前组件，让 CSS 只在当前组件中起作用。

vue 中 ref 的作用及使用方法

  • 作用：获取本页面的 dom 元素
  • 用法：this.$refs.domName
<template>

    <div id="app">
      <div ref="testDom">111</div>
      <button @click="isClick">点击获取dom节点</button>
    </div>
    </template>
    <script>
      new Vue({
        el: "#app",
        data: {},
        methods: {
          isClick() {
            console.log(this.$refs.testDom); //<div >111</div>
          }
        }
      })
    </script>

说出几种 vue 当中的指令和它的用法

  • v-modle:双向数据绑定

  • v-html:用于输出 html，它与 v-text 区别在于 v-text 输出的是纯文本，浏览器不会对其再进行 html 解析，但 v-html 会将其当 html 标签解析后输出。可能会导致 xss 攻击。一定要在可信的内容上使用 v-html，表单提交慎用）

  • v-text:用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。v-text 支持逻辑运算。

  • v-on:主要用于事件绑定

  • v-bind:主要用于属性绑定，比方你的 class 属性，style 属性，value 属性，href 属性等等，只要是属性，就可以用 v-bind 指令进行绑定

  • v-model 通常用于表单组件的绑定，例如 input，select 等。它与 v-text 的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
    （1）v-bind 绑定一个 value 属性；
    （2）v-on 指令给当前元素绑定 input 事件。

  • v-once: 只绑定一次。

vue-loader 是什么？使用它的用途有哪些？

答：vue 文件的一个加载器，将 template/js/style 转换成 js 模块。
用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

vue 组件中 data 为什么必须是一个函数？(作用：使每个组件实例数据互不影响 🇺)

  • 因为 JavaScript 的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象。
    　　组建中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data，这样改一个全都改了。

Vue 中双向数据绑定是如何实现的？

  • vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
    核心：关于 VUE 双向数据绑定，其核心是 Object.defineProperty()方法。

v-if 和 v-for 的优先级

  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐 v-if 和 v-for 同时使用。
    如果 v-if 和 v-for 一起用的话，vue 中会自动提示 v-if 应该放到外层去。

static 和 assets 的区别

  • 相同点：assets 和 static 两个都是用于存放静态资源文件。

  • 不同点：放在 static 中的文件不会进行构建编译处理，也就不会压缩体积，在打包时效率会更高，但体积更大在服务器中就会占据更大的空间；放在 assets 中的文件会进行压缩体积、代码格式化，压缩后会放置在 static 中一同上传服务器。

  • 总结：因此建议样式文件放在 assets 中进行打包，引入的第三方文件放到 static 中，因为引入的文件已经做过打包处理。

单页面应用（SPA）首屏加载慢如何解决

  • 安装动态懒加载所需插件；使用 CDN 资源。

Vue-router 跳转和 location.href 有什么区别

  • 使用 location.href=’/url’来跳转，简单方便，但是刷新了页面；
    使用 history.pushState(‘/url’)，无刷新页面，静态跳转；
    引进 router，然后使用 router.push(‘/url’)来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗。
    其实使用 router 跳转和使用 history.pushState()没什么差别的，因为 vue-router 就是用了 history.pushState()，尤其是在 history 模式下。

vue 路由传递参数,params 和 query 的区别

答：用法：query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name和this.$route.params.name。
url 地址显示：query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query 刷新不会丢失 query 里面的数据
params 刷新 会 丢失 params 里面的数据。

vue 常用的 UI 组件库

  • 移动端：Mint UI，VUX
  • 客户端：element

watch 和 computed 区别 及二者使用场景

  • 1、区别：
    watch 中的函数是不需要调用的
    computed 内部的函数调用的时候不需要加()

watch 属性监听 监听属性的变化
computed:计算属性通过属性计算而得来的属性

watch 需要在数据变化时执行异步或开销较大的操作时使用
对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性 computed。

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

computed 中的函数必须用 return 返回最终的结果

当 computed 中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取

watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

  • 2、使用场景：
    computed 　　　　
    　　　　当一个属性受多个属性影响的时候就需要用到 computed
    　　　　最典型的例子： 购物车商品结算的时候
    watch
    　　　　当一条数据影响多条数据的时候就需要用 watch
    　　　　搜索数据

单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于 pc 端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点 spa 对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于 seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

简述 vue 每个周期具体适合哪些场景

vue 总共有十一个生命周期函数，8 个常见的和后来加的 3 个不太常用的。

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

后三个不常用

activated

deactivated

errorCaptured

其中 8 个生命周期，分别在阶段创建前/后，载入前/后，更新前/后，销毁前/后。

  • beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在 beforeCreate 生命周期执行的时候，data 和 methods 中的数据都还没有初始化。不能在这个阶段使用 data 中的数据和 methods 中的方法,因为数据代理还未开始（vue 实例的挂载元素$el 和数据对象 data 都为 undefined，还未初始化）
  • create：data 和 methods 都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作（vue 实例的数据对象 data 有了，$el 还没有。）
  • beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的（vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换）
  • mounted：执行到这个钩子的时候，就表示 Vue 实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 一般在这个生命周期中开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作（vue 实例挂载完成，data.message 成功渲染。）
  • beforeUpdate： 当执行这个钩子时，数据是新的，但页面中的显示的数据还是旧的，data 中的数据是更新后的， 页面还没有和最新的数据保持同步
  • updated：页面显示的数据和 data 中的数据已经保持同步了，都是最新的
  • beforeDestory：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
  • destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

created 和 mounted 的区别

created:在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。

mvvm 框架是什么？

MVVM 是一种设计思想，它是 Model-View-ViewModel 的缩写。它也是 MVC 的增强版。

  • Model 是代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。
  • View 是代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
  • ViewModel(视图模型) 是一个同步 View 和 Model 的对象。

vue 是实现了双向数据绑定的 mvvm 框架，当视图改变更新模型层，当模型层改变更新视图层。在 vue 中，使用了双向绑定技术，就是 View 的变化能实时让 Model 发生变化，而 Model 的变化也能实时更新到 View。

vue-router 是什么?它有哪些组件

vue-router 用来写路由一个插件。router-link、router-view

active-class 是哪个组件的属性？

答：vue-router 模块的 router-link 组件。children 数组来定义子路由

route 和 $router 的区别

$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push 方法。返回上一个历史 history 用$router.to(-1)
$route 为当前 router 跳转对象。里面可以获取当前路由的 name,path,query,parmas 等。

vuex 是什么？怎么使用？哪种功能场景使用它？

答：vue 框架中状态管理。在 main.js 引入 store，注入。
新建了一个目录 store.js，….. export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

文章作者: BiLiang
文章链接: https://liang996.github.io/2021/101215001.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
前端面试
赏
评论
  目录