精华内容
下载资源
问答
  • 转眼2019又要过去了,作为一名前端码农,又熬过一个没日没夜的年头,头发又少了不少,去年的学习计划一半也没完成,唉。。。现在为大家总结一下这一年面试的几家公司的关于前端面试题
  • 前端框架vue面试题.pdf

    2021-07-16 17:44:14
    前段VUE面试题
  • 本仓库为语音打卡社群(JS每日一题)维护的前端面试题库,包含不限于Vue面试题,React面试题,JS面试题,HTTP面试题,工程化面试题,CSS面试题,算法面试题,大厂面试题,高频面试题 同时我们提供更好阅读体验的在线...
  • 默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属 性,当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通 知相关依赖进行更新操作。 原理...
  • (都是一些基础的vue面试题,大神不用浪费时间往下看) 一、对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件,它负责...
  • vue面试题汇总

    2021-01-03 12:35:29
    vue 1.vue优点 操作虚拟dom,节省页面性能。 数据视图相分离。视图可以独立于数据变化和修改,当数据变化的时候视图也可以不变。 便于维护。 2.vue响应式原理 vue的响应式 3.单向数据流和双向数据流 单向数据流:数据...
  • vue面试题专场.pdf

    2020-11-04 15:09:22
    vue专场面试题
  • vue面试题(一).docx

    2020-03-04 22:59:14
    Vue面试题目,让更多的面试者更一步的了解到高频面试题,更容易拿下自己理想的工作,走向属于自己的岗位
  • VUE面试题汇总最新版

    2020-10-20 17:35:35
    网上汇集的一些vue面试题大多数都是基础题,前端找工作的同学可以下载看一看临时磨磨枪比较有用哦网上汇集的一些vue面试题大多数都是基础题,前端找工作的同学可以下载看一看临时磨磨枪比较有用哦
  • vue面试题(二).docx

    2020-03-04 23:00:00
    Vue面试题目,让更多的面试者更一步的了解到高频面试题,更容易拿下自己理想的工作,走向属于自己的岗位
  • Vue 面试题

    万次阅读 多人点赞 2018-11-30 14:49:12
    Vue面试题 1、Vue总结: vue的使用方式有两种 方式一:像jQuery一样引入使用--vue的特性都可以使用,双向数据绑定 方式二:跟node结合起来使用,使用的时候有点像java语言(面向对象) 2、为什么要使用vue...

    Vue面试题

    1、Vue总结:

       vue的使用方式有两种
          方式一:像jQuery一样引入使用--vue的特性都可以使用,双向数据绑定
          方式二:跟node结合起来使用,使用的时候有点像java语言(面向对象)
    

    2、为什么要使用vue(使用Vue的好处是什么)?MVVM的框架那么多?MVVM跟MVC有什么区别?MVVM的框架你知道有哪些?

    在这里插入图片描述

    2.1、Vue好处:
    vue两大特点:响应式编程、组件化 
    vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
    
    2.2、MVVM定义:

    MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

    2.3、MVC的定义:

    MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC,是因为大前端的来到,出现了MVVM模式的框架,我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。2. 为什么会有MVVM框架?在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。比如:angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。综上两方面原因,才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定,极大了提高了开发效率。3. MVVM框架:VUE的介绍Vue就是基于MVVM模式实现的一套框架,在vue中:Model:指的是js中的数据,如对象,数组等等。View:指的是页面视图viewModel:指的是vue实例化对象为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思?1.如果你已经有一个现成的服务端应用,你可以将vue 作为该应用的一部分嵌入其中,带来更加丰富的交互体验;2.如果你希望将更多业务逻辑放到前端来实现,那么VUE的核心库及其生态系统也可以满足你的各式需求(core+vuex+vue-route)。和其它前端框架一样,VUE允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。3.如果我们构建一个大型的应用,在这一点上,我们可能需要将东西分割成为各自的组件和文件,vue有一个命令行工具,使快速初始化一个真实的工程变得非常简单(vue init webpack my-project)。我们可以使用VUE的单文件组件,它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。以上这三个例子,是一步步递进的,也就是说对VUE的使用可大可小,它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。VUE最独特的特性:响应式系统VUE是响应式的(reactive),也就是说当我们的数据变更时,VUE会帮你更新所有网页中用到它的地方。

    3、Vue中有哪些钩子函数?作用是什么? Vue的生命周期

    在这里插入图片描述

    1 初始化前  --BeforeCreated
    
    2 初始化完成 ---***:发送ajax   --created    //比较常用
    
    3 双向数据绑定前 ---BeforeMount
    
    4 双向数据绑定完成 --Mounted
    
    5 更新前 --BeforeUpdate
    
    6 更新完成--updated
    
    7 销毁前--BeforeDestroyed
    
    8 销毁完成--Destroyed
    

    4、vue中做数据渲染的时候如何保证将数据原样输出?

     1. v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
     2. v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
     3. {{}}:插值表达式,可以直接获取Vue实例中定义的数据或函数,
     使用插值表达式的时候,值可能闪烁;而使用v-html、v-text不会闪烁,
     有值就显示,没值就隐藏
    

    5、vue中methods和computed有什么区别?应用场景如何?

    1.methods:方法,函数,绑定事件调用;不会使用缓存
    2.computed: 计算属性   本质是方法,使用时可以像属性一样使用,
    当操作的值没有发生改变时,会使用缓存,当值发生改变,才会改变;提高速度
    

    6、Vue中如何处理原生的DOM事件?

    答:6.1  DOM:HTML DOM 定义了访问和操作 HTML 文档的标准 方法。
    
             DOM 将 HTML 文档表达为树结构。我们可以通过DOM灵活的获取树节点,
             并且操作节点(重新设置值、重新设置属性、重新设置样式)
    
        6.2 DOM事件:
           onclick、onmouseover、onmouseout、onchange、onkeyup、onkeydown
    
        6.3 Vue是如何处理的:通过v-on,简写@的方式定义事件
          @click、@mouseover、@mouseout、@change、@keyup、@keydown...
                            并绑定函数
    

    7、什么是js的冒泡?Vue中如何阻止冒泡事件?

    js冒泡概念:当父元素内多级子元素绑定了同一个事件
    ,js会依次从内往外或者从外往内(?)执行每个元素的该事件,从而引发冒泡
        
        js解决冒泡:event.stopPropagation()
        vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop=""
    

    8、什么是js的回调地狱?为什么会引发回调地狱?如何解决回调地狱问题

    js的回调地狱:根据外层ajax请求的结果,将结果作为参数继续发起ajax请求
         --->引起回调地狱
        getA().then(res=>{
            getB(res.data.a).then(res=>{
    	    getC(res.data.b).then(res=>{
                   //....回调地狱
                })	
    	})
        })
        
        Promise 对象就是为了解决这个问题而提出的。
        它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。 
    
      getA().then(res=>{
    		return   getB(res.data.a)
    }).then(res=>{
    	//.....链式调用
    })
    

    9、Vue中父子组件是如何传值的?

     9.1 父向子传值:子组件定义的时候,
    	 通过props:['num']定义父组件传值的参数名,
    	 当父组件调用子组件的时候就通过:num="a"的方式将值传给子组件
    

    在这里插入图片描述

     9.2 子向父传值:无法直接传值,只能通过子类调用父类的方法,使用方法的参数传值
          在子组件的方法中通过$.emit("outshow",num)传值,第一个参数是父组件中的方法名,第二个参数是父组件中该方法的参数
    

    在这里插入图片描述## 10、Vue中双向数据绑定是如何实现的?

    双向数据绑定只存在于form表单元素中
    首先双向数据的绑定需要通过 v-model 来将数据关联起来,
    其次在 data 中一定要定义好通过 v-model 关联的数据,
    Vue 在实现数据监听只能够监听到 data 中的数据,
    如果在 data 中没有定义该数据,那么将无法实现监听 ,
    同时也无法实现表单的双向数据绑定
    

    11.Vue中有哪些事件修饰符?各有什么作用

    vue中的事件:@click、@mouseover、@mouseout、@change、@keyup、@keydown
    
        vue中的事件修饰符:.stop 阻止冒泡   .prevent:阻止默认事件
    
    

    12、vue中有哪些指令?

     答:v-if
        v-else
        v-for
        v-text
        v-html
        v-model
        v-on:简写@
        v-bind:简写:
    

    13、为什么要进行前后端分离?前后端分离的优势在哪里?劣势在哪里?

    答:前端专门负责前端页面和特效的编写
        后端专门负责后端业务逻辑的处理
        前端追求的是页面美观、页面流畅、页面兼容等
        后端追求的是三高(高并发、高可用、高性能)
        让他们各自负责各自的领域,让专业的人负责处理专业的事情
        提高开发效率
    
        缺点:1 当接口发生改变的时候,前后端都需要改变
              2 当发生异常的时候,前后端需要联调--联调是非常浪费时间的
    

    14、说说你对前后端分离的开发模式的理解

    1.前端静态化
    前端有且仅有静态内容,再明确些,只有HTML/CSS/JS. 
    其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.
    前端内容的运行环境和引擎完全基于浏览器本身.
    
    2.后端数据化
    
    后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则
         :只提供数据,不提供任何和界面表现有关的内容.
    
    3.平台无关化
    
    前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的Restful接口和交互Json数据,就这2者而言,
    任何技术和平台都可以实现.
    
    4.构架分离化
    
    后端构架几乎可以基于任何语言和平台的任何解决方案,
    大型构架方面, RestTful Api可以考虑负载均衡;而数据,
    业务实现等可以考虑数据库优化和分布式 
    但总而言之,前后端的分离 也实现了 前后端构架的分离.
    
     
    

    扶贫!! 帮助一下孩子吧。感谢♥:

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 【面试题】2021最新Vue面试题汇总

    万次阅读 多人点赞 2020-10-28 16:25:59
    面试题(2020)Vue面试题汇总 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1、对于MVVM的理解 MVVM 是 Model-View-ViewModel 的...

    【面试题】2021最新Vue面试题汇总

    博客说明

    文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

    更新时间:2021.11.30

    文章目录

    1、对于MVVM的理解

    MVVM 是 Model-View-ViewModel 的缩写。

    Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。

    View 代表UI 组件,它负责将数据模型转化成UI 展现出来。

    ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。

    在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

    2、vue实现双向数据绑定

    vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过**Object.defineProperty()**来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应监听回调。

    当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

    vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

    3、Vue组件间的参数传递

    1.父组件与子组件传值

    父组件传给子组件:子组件通过props方法接受数据;

    子组件传给父组件:$emit方法传递参数

    2.非父子组件间的数据传递,兄弟组件传值

    eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。

    项目比较小时,用这个比较合适。

    4、v-show 与 v-if 区别

    1.v-show和v-if的区别:

    v-show是css切换,v-if是完整的销毁和重新创建。

    2.使用

    频繁切换时用v-show,运行时较少改变时用v-if

    v-if=‘false’ v-if是条件渲染,当false的时候不会渲染

    5、Vue的生命周期

    beforeCreate(创建前) 在数据观测和初始化事件还未开始。

    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来

    beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。

    实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

    mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。

    实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。

    可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

    updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

    调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。

    该钩子在服务器端渲染期间不被调用。

    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

    destroyed(销毁后) 在实例销毁之后调用。

    调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

    1.什么是vue生命周期?

    答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

    2.vue生命周期的作用是什么?

    答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    3.vue生命周期总共有几个阶段?

    答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

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

    答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

    5.DOM 渲染在 哪个周期中就已经完成?

    答:DOM 渲染在 mounted 中就已经完成了。

    5、绑定 class 的数组用法

    1、对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

    2、数组方法v-bind:class="[class1, class2]"

    3、行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"

    6、计算属性computed和 监听watch 的区别

    计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
    所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。

    1、computed 是一个对象时,它有哪些选项?

    有get和set两个选项

    2、computed 和 methods 有什么区别?

    methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会

    3、computed 是否能依赖其它组件的数据?

    computed可以依赖其他computed,甚至是其他组件的data

    4、watch 是一个对象时,它有哪些选项?

    handler 当监听对象时

    deep 是否深度

    immeditate 是否立即执行

    总结

    当有一些数据需要随着另外一些数据变化时,建议使用computed。

    当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher。

    7、Vue的路由实现:hash模式 和 history模式

    hash模式

    在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取。

    特点

    hash虽然在URL中,但不被包括在HTTP请求中。

    只用来指导浏览器动作,对服务端安全无用。

    hash不会重加载页面。

    hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com/,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

    history模式

    history采用HTML5的新特性,并且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

    history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。

    8、Vue与Angular以及React的区别?

    (版本在不断更新,有的区别可能慢慢在靠近,目前我只针对Vue与其他两大框架的差别。)

    1.与AngularJS的区别

    相同点

    都支持指令:内置指令和自定义指令;

    都支持过滤器:内置过滤器和自定义过滤器;

    都支持双向数据绑定;

    都不支持低端浏览器。

    不同点

    AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观;

    在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢;

    Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。

    2.与React的区别

    相同点

    React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;

    中心思想相同:一切都是组件,组件实例之间可以嵌套;黑化的要考!

    都提供合理的钩子函数,可以让开发者定制化地去处理需求;

    都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;

    在组件开发中都支持mixins的特性。

    不同点

    React采用的Virtual DOM会对渲染出来的结果做脏检查;

    Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作Virtual DOM。

    9、事件修饰符

    1、绑定一个原生的click事件: 加native,

    2、其他事件修饰符:stop prevent self

    3、组合键:click.ctrl.exact 只有ctrl被按下的时候才触发

    10、组件中 data 为什么是函数

    为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?

    因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

    11、对于Vue是一套渐进式框架的理解

    渐进式代表的含义是:主张最少

    Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用。

    也可以整个用它全家桶开发,当Angular用。

    还可以用它的视图,搭配你自己设计的整个下层用。

    你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

    渐进式的含义,我的理解是:没有多做职责之外的事

    12、vue.js的两个核心是什么?

    数据驱动和组件化

    13、vue中 key 值的作用

    使用key来给每个节点做一个唯一标识

    key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。

    14、v-for 与 v-if 的优先级

    v-for的优先级比v-if高

    15、组件

    1、vue中子组件调用父组件的方法

    第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

    第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

    第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法。

    2、vue中父组件调用子组件的方法

    父组件利用ref属性操作子组件方法。

    // 父:
    <child ref="childMethod"></child>
    
    // 子:
    method: {
      test() {
         alert(1)
      }
    }
    
    //在父组件里调用test
    this.$refs.childMethod.test()
    
    3、vue组件之间传值
    (1)父组件给子组件传值:

    1.父组件调用子组件的时候动态绑定属性

    <parent :dataList='dataList'></parent>
    

    2.子组件定义props接收动态绑定的属性

    props: ['dataList']     
    

    3.子组件使用数据

    (2)子组件主动获取父子间的属性和方法:

    在子组件中使用this.$parent.属性或者this.$parent.方法

    (3)子组件给父组件传值:

    一、使用ref属性

    1.父组件调用子组件时绑定属性ref

     <parent :ref='parent'></parent>
    

    2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法

    二、使用$emit方法

    1.子组件调用this.$emit('方法名‘,传值)

    2.父组件通过子组件绑定的’方法名’获取传值。

    (4)vue页面级组件之间传值

    1.使用vue-router通过跳转链接带参数传参。

    2.使用本地缓存localStorge。

    3.使用vuex数据管理传值。

    (5)说说vue的动态组件。

    多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。

    (6)keep-alive内置组件的作用

    可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中。

    (7)递归组件的用法

    组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。

    那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

    16、怎么定义vue-router的动态路由?怎么获取传过来的值?

    动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:

    {
     path: '/details/:id'
     name: 'Details'
     components: Details
    }
    

    访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。

    当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数

    this.$route.params.id

    17、vue-router有哪几种路由守卫?

    全局守卫:beforeEach
    后置守卫:afterEach
    全局解析守卫:beforeResolve
    路由独享守卫:beforeEnter
    

    18、$route和 $router的区别是什么?

    • $router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。

    • $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。

    19、vue-router响应路由参数的变化

    image.png

    • (1)用watch 检测

    • (2)组件内导航钩子函数

    image.png

    20、 vue-router 传参

    (1)使用Params:
    • 只能使用name,不能使用path

    • 参数不会显示在路径上

    • 浏览器强制刷新参数会被清空

      image.png

    (2)使用Query:
    • 参数会显示在路径上,刷新不会被清空

    • name 可以使用path路径

      image.png

    21、不用Vuex会带来什么问题?

    1、可维护性会下降,你要想修改数据,你得维护三个地方

    2、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

    3、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。

    22、vuex有哪几种属性?

    有五种,分别是 State、 Getter、Mutation 、Action、 Module。

    23、vuex的State特性是?

    1、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data。

    2、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。

    3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

    24、vuex的Getter特性是?

    1、getters 可以对State进行计算操作,它就是Store的计算属性。

    2、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用。

    3、 如果一个状态只在一个组件内使用,是可以不用getters。

    25、vuex的Mutation特性是?

    Action 类似于 mutation,不同在于:

    Action 提交的是 mutation,而不是直接变更状态。

    Action 可以包含任意异步操作。

    26、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

    1、如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。

    2、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。

    img

    27、vue双向数据绑定原理、vue2和vue3原理的不同点

    因为vue2.0 object.defineProperty只能劫持对象属性,无法监控数组下标的变化,导致通过数据下标添加的元素不能实时响应的弊端。

    为了解决这个问题,经vue内部处理后,可以使用push()、pop() 、shift()、unshift()、splice()、sort()、reverse()进行hack处理,所以其他数组属性也是监测不到,具有一定的局限性。

    因为object.defineProperty只能劫持对象属性,从而需要对每个对象的每个属性进行遍历。vue2.0里是通过递归+遍历data对象来实现对数据的监控的,如果属性值是对象的话,还需要深度遍历。

    而Vue3.0中的proxy不仅可以代理对象,还可以代理数组,也可以代理动态添加的属性,有13种劫持操作:

    get 获取某个key值 (接收2个参数,目标值和目标值key值)

    set 设置某个key值 (目标值、目标的key值、要改变的值、改变前的原始值)

    apply 使用in 操作符判断某个key是否存在

    deleteProperty 删除一个property

    defineProperty 定义一个新的property

    推荐的同类文章

    1、前端HTTP浏览器相关面试题

    2、最新Vue面试题汇总

    3、微信小程序常见面试题

    4、HTML面试题汇总

    5、CSS面试题汇总

    感谢

    万能的网络

    以及勤劳的自己,个人博客GitHub测试GitHub

    公众号-归子莫,小程序-小归博客

    展开全文
  • vue面试题之三:vue常见面试题①

    千次阅读 2019-09-20 17:26:25
    3. vue常见面试题 1. vue的优缺点 优点:性能好,简单易用,前后端分离,双向数据绑定,单页面应用用户体验好。 缺点:不利于SEO优化。 2. keep-alive的作用是什么? <keep-alive>是Vue的内置组件,能在...

    3. vue常见面试题

    1. vue的优缺点
    • 优点:性能好,简单易用,前后端分离,双向数据绑定,单页面应用用户体验好。
    • 缺点:不利于SEO优化。
    2. keep-alive的作用是什么?
    • <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重负渲染DOM。

      <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

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

      • Include:字符串或正则表达式,只有匹配的组件会被缓存

      • exclude:字符串或正则表达式,任何匹配的组件都不会被缓存

    // 组件 a
    export default {
      name: 'a',
      data(){
      	return {}
      }
    }
    
    <keep-alive include="a">
      <component>
      	<!-- name 为 a 的组件将被缓存!-->
      </component>
    </keep-alive>
    
    <keep-alive exclude="a">
      <component>
        <!-- 除了 name 为 a 的组件都将被缓存 -->
      </component>
    </keep-alive>
    
    • 配合 vue-router 使用

      • router-view 也是一个组件,如果直接被<keep-alive>包裹,所有路径屁哦诶到的视图组件都会被缓存
    <keep-alive>
      <router-view>
        <!-- 所有路径匹配到的视图组件都回呗缓存!-->
      </router-view>
    </keep-alive>
    
    • 如果指向 <router-view> 里面的某个组件被缓存,需要增加 router.meta 属性
    const router = new VueRouter({
      routes: [
        {
          path: '/home',
          name: 'Home',
          component: Home,
          meta: {
          	keepAlive: true // 需要被缓存 false:不需要被缓存
        	}
        }
      ]
    })
    
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
        <!-- 被缓存的试图组件!-->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
      <!-- 不被缓存的视图组件!-->
    </router-view>
    
    3. vue中如何获取DOM元素
    • 通过给元素绑定ref=“XXX”,

    • 通过this.$refs.XXX 或者 this.$refs[‘XXX’]来获取

      * 注意:vue中操作dom需要谨慎,尤其是添加或者删除dom的时候,
    4. vue-loader是什么?使用它的用途有哪些?
    • vue-loader是解析 .vue 文件的一个加载器,将template/js/style转换成js模块。
    • js可以使用ES6语法,style样式可以用scss或者less,template 可以加jade等。
    5. Vue 中为什么使用key?
    • 用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点,可以高效的更新虚拟DOM。
    6. axios解决跨域
      1. 配置 BaseUrl, 配置访问的URL前缀。
    import Vue from 'vue'
    import App from './App'
    import Axios from 'axios'
    
    Axios.defaults.baseURL = '/api'
    // 每次发送请求都回带一个 /api 的前缀。
    
      1. 配置代理,在src文件夹下创建文件 vue.config.js文件。添加一下内容。
    module.exports = {
      outputDir: 'dist', // build 输出目录
      assetsDir: 'assets', // 静态资源目录
      lintOnSave: false, // 是否开启eslint
      devServer: {
        open: true, //是否自动弹出浏览器页面
        host: 'localhost',
        port: '8080',
        https: false, // 是否使用 HTTPS协议
        hotOnly: false, // 是否开启热更新
        proxy: {
          '/api': {
            target: 'https://www.xxx.com/api', // api服务器的地址
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    }
    
      1. 修改请求的URL,
    // 假设请求地址为 https://www.xxx.com/api/deatils/info
    this.$axios.get('/details/info')
      .then()
      .catch()
    
    
    7. $nextTick() 的使用
    • this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用他,然后等待dom更新。他跟全局的Vue.nextTick一样,不同的是回调的this自动绑定到调用他的实例上。
    <template>
      <div>
        <div ref="wrap">{{value}}</div>
        <button @click="clickBtn">点击改变</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'home',
      components: {
      },
      data() {
        return {
          value: '祝你面试成功'
        }
      },
      created() {
        console.log(`111: ${this.$refs['wrap']}`)
        this.$nextTick(() => {
          console.log(`222: ${this.$refs['wrap']}`)
        })
      },
      mounted() {
        console.log(`333: ${this.$refs['wrap']}`)
        this.$nextTick(() => {
          console.log(`444: ${this.$refs['wrap']}`)
        })
      },
      methods: {
        clickBtn() {
          this.value = '升职高薪'
          console.log(this.$refs['wrap'].innerText)
          this.$nextTick(() => {
            console.log(this.$refs['wrap'].innerText)
          })
        }
      }
    }
    </script>
    

    image-20190920150934386.png

    • 根据打印顺序可以看到,在created()执行的时候DOM并未进行任何渲染,而此时进行的DOM操作没作用,而在created()里面使用this.$nextTick()可以等待DOM生成以后再来获取dom对象。

    • 根据上面的放马点击栗子可以看出,在方法里直接打印的话,由于dom元素还没有更新,因此打印出来的还是为改变之前的值,而通过this.$nextTick()获取到的值为dom更新之后的值。

    • this.$nextTick()在页面交互,尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势。

    8. vue组件中的data为什么必须是一个函数?

    如果不用函数的话,实例化的组件是共享同样的一个data对象,当你修改一个属性的时候,data也恢复阿生改变。

    当data是一个函数的时候,每个实例的data属性都是独立的,不会相互影响。

    9. Vue中双向数据绑定是如何实现的?(vue双向数据绑定原理)

    vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值get()和设置属性值set()的操作来实现的。

    // Object.defineProperty()方法
    let obj = {}
    let name
    Obejct.defineProperty(obj,'name',{
      get: function() {
        console.log('获取')
        return val
      }
      set: function(newVal) {
      	console.log('设置')
    	}
    })
    obj.name = 'arthas' // 在给obj设置name属性的时候,触发了set这个方法
    const val = obj.name // 在得到obj的name属性,会触发get方法。
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="test"></div>
      <input type="text" id="text">
      <script>
        const obj = {}
        const test = document.querySelector('#test')
        const text = document.querySelector('#text')
        Object.defineProperty(obj,'name',{
          get: function() {
            return val
          },
          set: function(newVal) {
            text.value = newVal
          }
        })
        text.addEventListener('input', function(e){
          // 给obj的name属性赋值,进而触发该属性的set方法
          obj.name = e.target.value
        })
        obj.name = 'arthas' // 再给obj设置name属性的时候,触发了set这个
        test.innerHTML = obj.name // 调用obj的get属性获取name
      </script>
    </body>
    </html>
    

    更深层次的点击链接查看

    以上是经过参考很多同行分享与官方文档,汇总的一份总结,如有不对,请指出,最后感谢大家观看,求点赞,求分享,求评论,求打赏~~

    展开全文
  • 2020 Vue经典面试题

    2021-01-03 13:57:54
    本文是关注Vue开发和面试问题, 由基础到困难循序渐进, 适合面试和开发vue。 文档答案   (一)VUE经典基础(1)  1.mvvm 框架是什么?  2.vue的优点是什么?(为什么大部分公司选择vue)  3.vue的两个核心点是...
  • 由于疫情原因,原本每年的“金三银四”仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第一次写博客,如有错误之处,还请指出。 一. vue方面 1.vue-...
  • 2020年Vue面试题汇总

    万次阅读 多人点赞 2020-02-03 16:46:20
    2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识——理论篇 1、对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少。 Vue可能有些方面是不如React,不如Angular,...

     

    2020年Vue面试题

    Interview

    ●●●●

    作者:@烦恼会解决烦恼

     

     

     

    vue核心知识——理论篇

    1、对于Vue是一套渐进式框架的理解

    渐进式代表的含义是:主张最少。

    Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 
    渐进式的含义,我的理解是:没有多做职责之外的事。

    2、vue.js的两个核心是什么?

    数据驱动和组件化。

    3.vue生命周期钩子函数有哪些?

    总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。具体执行流程查看下图。

    4.vue 的双向绑定的原理是什么?

        vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程:

        我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

    1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

    2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

    3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

    流程图如下:

     

     

    vue核心知识——语法篇

     

    1.请问 v-if 和 v-show 有什么区别?

        相同点: 两者都是在判断DOM节点是否要显示。

        不同点:

    a.实现方式: v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。  v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。

    b.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;  v-show只是简单的基于css切换;

    c.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留;

    d.性能消耗:v-if有更高的切换消耗,不适合做频繁的切换;  v-show有更高的初始渲染消耗,适合做频繁的额切换;

    2、vue常用的修饰符

    a、按键修饰符

    如:.delete(捕获“删除”和”退格“键)      用法上和事件修饰符一样,挂载在v-on:后面,语法:v-on:keyup.xxx=’yyy’  <inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

    b、系统修饰符

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

    • .ctrl

    • .alt

    • .shift

    • .meta

    c、鼠标按钮修饰符

    • .left

    • .right

    • .middle
      这些修饰符会限制处理函数仅响应特定的鼠标按钮。如:<button @click.middle ="onClick">A</button>  鼠标滚轮单击触发   Click默认是鼠标左键单击

    d、其他修饰符
    
    • .lazy
      在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ,我们可以添加 lazy 修饰符,从而转变为使用 change事件进行同步:

    <inputv-model.lazy="msg" >
    • .number
      如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 .number修饰符:

    <input v-model.number="age" type="number">

    这通常很有用,因为即使在type="number"时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析,则会返回原始的值。

    • .trim
      如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    <inputv-model.trim="msg">

     

     

        同样前面都有空格加上.trim后 将前后空格都去掉了。

    3、v-on可以监听多个方法吗?

        可以,例如:@click = "fn(),fn2()"     会依次执行方法

    4、vue中 key 值的作用

        使用key来给每个节点做一个唯一标识

        key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,

    否则vue只会替换其内部属性而不会触发过渡效果。

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

        在 new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。

        当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。

    6、v-for 与 v-if 的优先级

        v-for的优先级比v-if高。

    7.说出至少 4 种 vue 当中的指令和它的用法

        v-if(判断是否隐藏)

        v-for(把数据遍历出来)

        v-bind(绑定属性)

        v-model(实现双向绑定)

     

     

     

    vue核心知识——组件篇

     

    1.vue中子组件调用父组件的方法

        第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

        第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

        第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法。

    2.vue中父组件调用子组件的方法

        父组件利用ref属性操作子组件方法。

    父:
    <child ref="childMethod"></child>
    子:
    method: {
      test() {
         alert(1)
      }
    }
    在父组件里调用test即 this.$refs.childMethod.test()

    3.vue组件之间传值

      (1)父组件给子组件传值:

    1.父组件调用子组件的时候动态绑定属性
     <parent :dataList='dataList'></parent>

    2.子组件定义props接收动态绑定的属性props: ['dataList']        

    3.子组件使用数据

      (2)子组件主动获取父子间的属性和方法:

        在子组件中使用this.$parent.属性/this.$parent.方法。

    (3)子组件给父组件传值:

     

    一、使用ref属性

    1.父组件调用子组件时绑定属性ref

      <parent :ref='parent'></parent>

    2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法

    二、使用$emit方法

    1.子组件调用this.$emit('方法名‘,传值)

    2.父组件通过子组件绑定的'方法名'获取传值。

    (4)vue页面级组件之间传值

        1.使用vue-router通过跳转链接带参数传参。

        2.使用本地缓存localStorge。

        3.使用vuex数据管理传值。

    (5)说说vue的动态组件。

            多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。

        主要考查面试这 component的 is属性。

     

    (6)keep-alive内置组件的作用

        可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

        

     (7)递归组件的用法

        组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

        首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

     

     

     

    vue核心知识——路由

    1.怎么定义vue-router的动态路由?怎么获取传过来的值?

    动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:

    {

      path: '/details/:id'

      name: 'Details'

      components: Details

    }

    访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。

     

    当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数

    this.$route.params.id

    2.vue-router有哪几种路由守卫?

    路由守卫为:
    全局守卫:beforeEach
    后置守卫:afterEach
    全局解析守卫:beforeResolve
    路由独享守卫:beforeEnter

     

    3.$route和 $router的区别是什么?

        $router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。

        $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。

    4.vue-router响应路由参数的变化

    image.png

    • (1)用watch 检测

    • (2)组件内导航钩子函数

      image.png

    5. vue-router 传参

      (1)使用Params:

    • 只能使用name,不能使用path

    • 参数会显示在路径上,刷新不会被清空

       image.png

    (2)使用Query:

    • 参数会显示在路径上,刷新不会被清空

    • name 可以使用path路径

        image.png

     

     

    vue核心知识——vuex

    不用Vuex会带来什么问题?

    一、可维护性会下降,你要想修改数据,你得维护三个地方

    二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

    三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。

    1.vuex有哪几种属性?

        有五种,分别是 State、 Getter、Mutation 、Action、 Module。

    2、vuex的State特性是?
    答:
    一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
    二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
    三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中


    3、vuex的Getter特性是?
    答:
    一、getters 可以对State进行计算操作,它就是Store的计算属性
    二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
    三、 如果一个状态只在一个组件内使用,是可以不用getters


    4、vuex的Action特性是?
    答:
    一、Action 类似于 mutation,不同在于:
    二、Action 提交的是 mutation,而不是直接变更状态。
    三、Action 可以包含任意异步操作



    5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
    答:
    一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。



             长按识别关注公众号

     

    展开全文
  • vue面试题详解.md

    2019-11-13 19:11:32
    前端前辈在一线企业工作二十多年汇聚的毕生精华,学其所好,苦心专研将其汇聚于此文档中,适用于技术栈为vue的小菜鸟
  • 2021 前端 VUE 面试题总汇

    千次阅读 多人点赞 2021-05-25 10:35:19
    一、vue面试题 1、vue的生命周期 beforeCreate:实例初始化之后;数据观测和事件配置之前调用,组件的选项对象还没有创建,el挂载和data都没有初始化,无法访问方法和数据。 created:实例创建完成之后调用;已经...
  • vue面试题

    2019-01-08 09:13:33
    https://blog.csdn.net/xiasohuai/article/details/80912349
  • 2021vue面试题总结

    千次阅读 多人点赞 2021-01-11 12:00:06
    3.Vue中的v-show和v-if怎么理解?4.Vue组件间通信方式都有哪些?正在收录中.... 1.说说你对vue的理解? vue是一个用于构建用户界面的开源渐进式框架,也是一个创建单应用页面的Web应用框架. Vue所关注的核心是MVC...
  • 详解30道Vue面试题

    千次阅读 2021-03-01 09:52:46
    来源 | https://juejin.im/post/5d59f2a451882549be53b170本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式...
  • 35道常见的前端vue面试题

    万次阅读 多人点赞 2021-03-06 00:04:32
    来源 | https://segmentfault.com/a/1190000021936876今天这篇文章给大家分享一些常见的前端vue面试题。有一定的参考价值,有需要的朋友可以参考一下...
  • 总结vue前端面试题

    2020-10-27 15:52:46
    本人总结前端vue面试,包含vue的基础,以及vue的高级和组件话开发,和vue的2.0 版本,包含vue指令,插槽路由vuex等
  • Vue相关 ***: (1)说一下vue最大特点是什么或者说vue核心是什么 答:vue最大特点我感觉就是“组件化“和”数据驱动“ 组件化就是可以将页面和页面中可复用的元素都看做成组件,写页面的过程,就是写组件,然后页面...
  • 1.请说一下Vue2及Vue3响应式数据的理解 数组和对象类型当值变化时如何劫持到。对象内部通过defineReactive方法,使用Object.defineProperty将属性进行劫持(只会劫持已经存在的属性),数组则是通过重写数组方法来...
  • Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件。 单文件组件文件有三个部分,(模板、脚本和样式)。 vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) ...
  • vue面试题的自我总结 基础的使用 vue的原理层及高级特性 使用vue设计具体项目功能 使用 1、插值,表达式 vue可以使用 {{ }} 双花括号的方式在dom结构中插入想要的值,使用vue 我们的工作更多的是去操作数据改变...
  • 1. v-show 与 v-if 的区别 v-show:操作...因此数据只能从一个方向来修改状态 web 前端 vue 面试题(一) web 前端 vue 面试题(二) web 前端 vue 面试题(三) web 前端 vue 面试题(四) web 前端 vue 面试题(五)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,309
精华内容 10,523
关键字:

vue面试题

vue 订阅