vue 面试题

1.虚拟dom

https://blog.csdn.net/wanghuan1020/article/details/112506075#t8

2.vue-router 路由守卫

1、全局守卫: router.beforeEach

2、全局解析守卫: router.beforeResolve

3、全局后置钩子: router.afterEach

4、路由独享的守卫: beforeEnter

5、组件内的守卫: beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

https://blog.csdn.net/qq_34089503/article/details/81980142

3.vue路由的实现

https://blog.csdn.net/qq_38998319/article/details/118532453?spm=1001.2014.3001.5501

4.Vuex刷新页面数据丢失怎么解决?

**办法一:**将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie)

**办法二:**在页面刷新的时候再次请求远程数据,使之动态更新vuex数据

**办法三:**在父页面向后台请求远程数据,并且在页面刷新前将vuex的数据先保存至sessionStorage(以防请求数据量过大页面加载时拿不到返回的数据)

5.Vue 组件 data 为什么必须是函数

data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实

例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就

使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

 6.$route 和 $router 的区别

$router 为 VueRouter 实例,想要导航到不同 URL,则使用 $router.push 方法

$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

7.如何让CSS只在当前组件中起作用?

将当前组件的<style> 修改为 <style scoped>

8.对keep-alive 的了解?\

keep-alive 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

使用方法:

<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>

 9.第一次页面加载会触发哪几个钩子?

beforeCreate, created, beforeMount, mounted

10.Computed和Watch

Computed本质是一个具备缓存的watcher,依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时,在模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性中处理。

Watch没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开deep:true选项,这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听。

 11.Vue如何自定义一个过滤器

1、局部过滤器

Html:

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| 过滤器名称 }}
</div>

JS:

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      过滤器名称: function (value) {
        if (!value) return ''
        ...
        return value
      }
    }
})

2、全局过滤器

Vue.filter('过滤器名称', function (value) {
  if (!value) return ''
  ...
  return value
})

 12,那你能讲一讲MVVM吗?

MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。

 13.说一下MVC的理解?

mvc是模型(model)-视图(view)-控制器(controller)`的缩写,
一种软件设计典范使用MVC的目的是将M和V的实现代码分离,从而使
同一个程序可以使用不同的表现形式。`MVC对应Html,CSS,js。

14简述Vue的生命周期

常用的有8个(生命周期不仅仅是8个),都是成对出现。分别是:

beforeCreate阶段、created阶段;

beforeMount阶段、mounted阶段;

beforeUpdate阶段、updated阶段;

beforeDestroy阶段、destroyed阶段;

分别为:创建前/后,载入前/后,更新前/后,销毁前/后。

15.前端路由和后端路由的区别

**什么是路由 **

路由是根据不同的 url 地址展示不同的内容或页面;

前端路由

很重要的一点是页面不刷新,前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,每跳转到不同的URL都是使用前端的锚点路由.

随着(SPA)单页应用的不断普及,前后端开发分离,目前项目基本都使用前端路由,在项目使用期间页面不会重新加载。

优点:

1. 用户体验好,和后台网速没有关系,不需要每次都从服务器全部获取,快速展现给用户
  2. 可以再浏览器中输入指定想要访问的url路径地址   3. 实现了前后端的分离,方便开发。有很多框架都带有路由功能模块。

缺点:

1. 使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存
 2. 单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置

后端路由

浏览器在地址栏中切换不同的url时,每次都向后台服务器发出请求,服务器响应请求,在后台拼接html文件传给前端显示, 返回不同的页面,

意味着浏览器会刷新页面,网速慢的话说不定屏幕全白再有新内容。后端路由的另外一个极大的问题就是 前后端不分离。

优点:

  1. 分担了前端的压力,html和数据的拼接都是由服务器完成。

缺点:

  1. 当项目十分庞大时,加大了服务器端的压力,同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢,那将会延迟页面的加载,对用户体验不是很友好

 16.$refs 和 $el的用法

ref 有三种用法:

1、ref 加在普通的元素上,用this.$refs(ref值) 获取到的是dom元素。

2、ref 加在子组件上,用 this.$refs 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.XX。

 $el的用法

获取 OffsetTop,组件不是DOM元素,是没有OffsetTop的,无法通过.OffsetTop来获取的。就需要通过$el来获取组件中的DOM元素:

this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop

17.vue常用的修饰符?

https://blog.csdn.net/weixin_44475093/article/details/111503490?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162624223216780274135148%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162624223216780274135148&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-111503490.first_rank_v2_pc_rank_v29&utm_term=vue%E5%B8%B8%E7%94%A8%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9F&spm=1018.2226.3001.4187

18.axios和 ajax的区别

1.区别 axios 是通过 promise 实现对 ajax 技术的一种封装,就像 jQuery 实现 ajax 封装一样。 简单来说: ajax 技术实现了网页的局部数据刷新,axios 实现了对 ajax 的封装。 axios 是 ajax ajax 不止 axios。 下面列出代码来对比一下:

axios: axios({   

          url: '/getUsers',

            method: 'get',

            responseType: 'json', // 默认的

            data: {     

            //'a': 1,      

           //'b': 2,       

      }         }).then(function (response) {

            console.log(response);  

           console.log(response.data);

        }).catch(function (error) {   

          console.log(error);

           })

ajax:

$.ajax({  

           url: '/getUsers',

            type: 'get',

            dataType: 'json',

            data: {

                //'a': 1,  

               //'b': 2,

            },  

           success: function (response) {

                console.log(response)

            }

        }) 

2.优缺点: ajax: 本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮 基于原生的 XHR 开发,XHR 本身的架构不清晰,已经有了 fetch 的替代方案 JQuery 整个项目太大,单纯使用 ajax 却要引入整个 JQuery 非常的不合理(采取个性化打包的方案又不能享受 CDN 服务 axios: 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止 CSRF 提供了一些并发请求的接口(重要,方便了很多的操作)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值