ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue前端面试题

2021-01-19 23:03:22  阅读:138  来源: 互联网

标签:面试题 Vue 实例 前端 调用 组件 data 属性


Vue生命周期?

beforeCreate:

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 

created:

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前尚不可用。

 

beforeMount:

在挂载开始之前被调用:相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

 

mounted:

实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。 如果根实例挂载到了一个文档内的元素上,当mounted被调用时vm.$el也在文档内。

该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

 

beforeUpdate:

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

 

updated:

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

 

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

 

beforeDestroy:

实例销毁之前调用。在这一步,实例仍然完全可用。

 

destroyed:

实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

 

errorCaptured(2.5.0版本之后新增的):

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

 

 

vue与react有什么区别?

相同点:

  • 两者都是用于创建UI的JavaScript库;
  • 两者都快速轻便;
  • 都有基于组件的架构;
  • 都是用虚拟DOM;
  • 都可放入单个HTML文件中,或者成为更复杂webpack设置中的模块;
  • 都有独立但常用的路由器和状态管理库;

 

不同点:

  • React偏向MVC模式,VUE属于MVVM模式。

 

  • React一般适用于大型的项目开发,而且更倾向于原生app的开发,扩展性更强,更灵活。

 

  • VUE相对于React,更适合一些中小型的项目,开发速度快,还有指令系统,很多东西都是内置的,写起来方便。
  • Vue组件分为全局组件和局部组件,在react中都是通过import相应组件,然后模版中引用;
  • 多了指令系统,让模版可以实现更丰富的功能,而React只能使用JSX语法;
  • react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css;

而 vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。

 

<div>

       <p>{{msg}}</p>

</div>

 

new Vue ({

//挂载点

       el: ‘#app’,

       //数据相当于this.state

       data:{

       msg:‘你好’

},

//所有的方法

methods:{

       changemsg(){

              console.log(‘app===this’, app===this);

              //因为app代理了data上的数据,

              //this就是app,所以也就代理了data上的数据

              this.msg = ‘我很好’

}

}

 

})

 

一、data在new Vue构造器中他是一个对象,在单文件组件中,他是一个方法

 

二、Vue的实例对象,代理了data上所有的变量和对象

直接app.msg就可以直接获取和修改数据

或者app.$data.msg是一样的

 

V指令

Vue内置指令,完成指定功能分为两种:

1,内置的。

2.用户自定义的。

 

1.v-bind:属性名 = ‘变量’

功能:将data:{变量:值}中的属性值,绑定到html标签的属性上

2.v-if指令:

true 添加到当前DOM结构中

false 从当前DOM结构中移除

 

3.v-for="value in 数组"

遍历数组或对象

 

4.v-on:事件名="事件处理函数"

事件绑定

 

5.v-model 双向数据绑定的指令:

将变量和表单项进行绑定

 

6.v-once只绑定一次

<span v-once>Message:{{msg}}</span><br><!—v-once类似jquery的one()-->

 

7.v-html把字符串转成HTML编译

你的站点上动态渲染的任意 HTML 可能会非常危险,

因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,

绝不要对用户提供的内容插值。

 

Vue模板语法-插值

  • 插入文本:数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值
  • 插入属性: {{ }}不能在 HTML 属性中使用,应使用 v-bind 指令

 

 

修饰符:(Modifiers)

是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

事件修饰符:

例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 

 

.stop          阻止单击事件冒泡     demo5

.prevent     提交事件不再跳转     demo6

.capture     添加事件侦听器时使用事件捕获模式(由外而内触发)  demo7

.self            只当事件在该元素本身(比如不是子元素)触发时触发回调 ,不会引发事件冒泡   demo8

.once         点击事件将只会触发一次  demo9

说明:<a v-on:click.stop.prevent="doThat"></a>修饰符可以串联

例:

<!-- v-on:click.prevent阻止a标记默认动作,类似于原生的e.preventDefault() -->

         

<a v-bind:href="url" v-on:click.prevent="show">去百度</a>

 

键值修饰符:

  • 在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符:

 

Vue.js 为两个最为常用的指令提供了特别的缩写:

       v-bind:href  缩写  :href

       v-on:click 缩写 @click

 

计算属性: computed

可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message ,

因此当 vm.message 发生改变时,所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:

计算属性的 getter 是没有副作用,这使得它易于测试和推理。

 

计算属性与methods的区别

可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。相比而言,只要发生重新渲染,method 调用总会执行该函数。

 

计算属性与watch的区别

计算属性是把属性缓存起来,如果从新render时,属性没有变化,则不会再从新渲染这个属性。

Watch是监控data属性,如果data改变,就可以在watch中做一些改变。

 

插槽slot

在实际项目开发当中,时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为slot插槽。

 

标签:面试题,Vue,实例,前端,调用,组件,data,属性
来源: https://www.cnblogs.com/naitang/p/14300563.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有