vue常见面试题

1什么是vue的生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。

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

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

3Vue生命周期总共有几个阶段？

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

4第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

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

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

6生命周期钩子的一些使用方法：

1beforecreate:可以在加个loading事件，在加载实例是触发

2created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3mounted:挂载元素，获取到dom节点

4updated:如果对数据统一处理，在这里写上相应函数

5beforeDestroy:可以一个确认停止事件的确认框

6nextTick:更新数据后立即 *** 作dom

7v-show与v-if的区别

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

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

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

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成

v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

8开发中常用的指令有哪些

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定

v-html：更新元素的innerHTML

v-show与v-if：条件渲染，注意二者区别

v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数

v-for：基于源数据多次渲染元素或模板

v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法

v-bind:title=”msg”简写：title="msg"

9绑定class的数组用法

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

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

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

10路由跳转方式

1router-link标签会渲染为标签，咋填template中的跳转都是这种；

2另一种是编辑是导航，也就是通过js跳转比如routerpush('/home')

12 computed和watch有什么区别

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续 *** 作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13 vue组件的scoped属性的作用

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；

但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的；

解决办法：

①：使用混合型的css样式：（混合使用全局跟本地的样式） / 全局样式 / / 本地样式 /

②：深度作用选择器（>>>）如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> *** 作符： a >>> b { / / }

14 vue是渐进式的框架的理解：( 主张最少,没有多做职责之外的事 )

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

在我看来，渐进式代表的含义是：主张最少。视图模板引擎

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

15vuejs的两个核心是什么(数据驱动、组件系统。)

数据驱动:ObjectdefineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。

16vue常用修饰符

修饰符分为：一般修饰符，事件修身符，按键、系统

①一般修饰符：

lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

<inputv-modellazy="msg">

number

<inputv-modelnumber="age"type="number">

trim

1如果要自动过滤用户输入的首尾空白字符<inputv-modeltrim='trim'>

② 事件修饰符

<av-on:clickstop="doThis"></a><!-- 阻止单击事件继续传播 -->

<formv-on:submitprevent="onSubmit"></form> <!-- 提交事件不再重载页面 -->

<av-on:clickstopprevent="doThat"></a> <!-- 修饰符可以串联 -->

<formv-on:submitprevent></form> <!-- 只有修饰符 -->

<divv-on:clickcapture="doThis"></div> <!-- 添加事件监听器时使用事件捕获模式 -->  <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->

<divv-on:clickself="doThat"></div> <!-- 只当在 eventtarget 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 -->

<av-on:clickonce="doThis"></a> <!-- 点击事件将只会触发一次 -->

③按键修饰符

全部的按键别名:

entertabdelete(捕获“删除”和“退格”键)escspaceupdownleftrightctrlaltshiftmeta

<inputv-on:keyupenter="submit">或者<input@keyupenter="submit">

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

ctrlaltshiftmeta

<input@keyupalt67="clear">或者<div@clickctrl="doSomething">Dosomething</div><!-- Ctrl + Click -->

20Vue 组件中 data 为什么必须是函数

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。

如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

ref可以绑定dom节点或字组件，用于获取子组件的方法和属性。但是只有组件 完成渲染 时，才可以获取得到，且$refs也不是响应式的！

响应式处理可以包括以下几种方法：也就是说，在子组件完成渲染以后，动态修改的data或method，在父组件都可以实时获取。

（1）使用nexttick（）；子组件 同步 更改数据可反映到父组件上，nexttick属于微任务，也就是说，在本轮事件循环完成之前，可以执行异步 *** 作，从而保证实时性。

（2）如果子组件数据更新是异步，比如说从接口请求回来的这种，使用nexttick，甚至settimeout(()=>{},0) 都无法读取到已经修改的data，因为在消息队列里面，异步任务作为宏任务始终排在队尾。常发生的情况是，接口请求的数据还没到，父组件中已经读取了refs[componets]xxx的数据，这会导致这个数据打印出来是undefined。

解决办法是：

>>>settimeout(100ms）的等待，这种方法虽然可以解决，但是非常不好，原因是你无法控制接口要多少秒才能到达响应结果

打印结果：

由此可见 settimeout 0 会在接口响应前执行。

>>> 使用回调的方式。接口响应完，在then里，通过$emit触发父组件获取refs的方法。这种回调必然可以保证数据已经set到，再次手动获取，即可得到响应值。

（3）以上分别用于解决子组件同步和异步的问题，但如果子组件使用v-if（资料发现v-for同样会有这种问题），子组件未被渲染，同样会出现$refs无法读取的问题。暴力解决法是，v-if换成v-show。区别在于：v-show不会发生重拍，只是display：none。这种方式虽然可以保证 $refs获取到子组件的数据，但在某些特定的业务场景下（比如子组件请求必须在父组件完成某 *** 作的时候进行），会导致一些逻辑错误。因此合理的解决办法是，用（2）中回调的方法。

其他解决办法待更新

vue生命周期的栗子

注意触发vue的created事件以后,this便指向vue实例,这点很重要

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>vue生命周期</title>

<script src="/js/vuejs"></script>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

</head>

<body>

<div class="test" style="border: 1px black dashed;padding: 8px;">

{{a}}

</div>

<div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">

我是内容二

</div>

<script type="text/javascript">

var myVue = new Vue({

el: "test",

data: {

a: "我是内容,在控制台输入myVuea=123456,可以改变我的值"

},

created: function () {

//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。

//但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即thisa存在,可打印出来 。

consolelog("建立");

},

beforeCompile: function () {

consolelog("未开始编译");

},

compiled: function () {

//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。

consolelog("编译完成");

},

ready: function () {

//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm$appendTo() 等方法或指令更新）才触发 ready 钩子。

consolelog("一切准备好了");

},

attached :function () { //myVue$appendTo("test2")暂时触发不了,不知道怎么解决

//在 vm$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接 *** 作 vm$el 不会 触发这个钩子。

consolelog("插入DOM成功");

},

detached :function () { //触发事件 myVue$destroy(true),其中参数true控制是否删除DOM节点或者myVue$remove()

//在 vm$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接 *** 作 vm$el 不会 触发这个钩子。

consolelog("删除DOM成功");

},

beforeDestroy: function () { //触发方式,在console里面打myVue$destroy();

//在开始销毁实例时调用。此时实例仍然有功能。

consolelog("销毁前");

},

destroyed: function () { //触发方式,在console里面打myVue$destroy();其中myVue$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在

//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。

consolelog("已销毁");

}

});

</script>

</body>

</html>

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误，

这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：

<template>

<div style="display: block;" ref="abc">

<!-- -->

</div>

</template>

<script>

export default {

mounted () {

consolelog(this$refsabcstylecssText)

}

}

</script>

结果是 display: block;

如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行赋值:

<template>

<div ref="nana">

<!-- -->

</div>

</template>

<script>export default {

mounted () {

let w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;

let h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;

this$refsnanastyleheight = h +'px';

}

}

以上就是关于vue常见面试题全部的内容，包括:vue常见面试题、vue获取使用$refs获取自组件方法和属性注意问题、vue 怎么获取到dom渲染vm数据完毕之后的生命周期钩子等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！