Vue框架面试题总结

Vue基础知识点

1.Vue特性

•轻量

Vue.js库的体积非常小的，并且不依赖其他基础库。

•数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

•指令

内置指令统一为（V—*）,也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

・插件化

Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

•组件化

组件可以扩展HTML元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构

建大型应用

2.Vue项目结构介绍

•build文件夹：用于存放webpack相关配置和脚本。

•config文件夹：主要存放配置文件，比如配置开发环境的端口号、开启热加载或开启gzip压缩等.

•dist文件夹：默认命令打包生成的静态资源文件。

•node_modules:存放npm命令下载的开发环境和生产环境的依赖包。

•src:存放项目源码及需要引用的资源文件。

•src下assets:存放项目中需要用到的资源文件，css、js、images等。

•srcTcomponets:存放vue开发中一些公共组件。

•src下emit:自己配置的vue集中式事件管理机制。

•src下router:vue-routervue路由的配置文件。

,srcTservice:自己配置的vue请求后台接口方法。

,src下page:存在vue页面组件的文件夹。

•src下util:存放vue开发过程中一些公共的js方法。

•src下vuex:存放vuex为vue专门开发的状态管理器。

•src下叩p.vue:整个工程的vue根组件。

•src下main.js:工程的入口文件。

•index.html:设置项目的一些meta头信息和提供html元素节点，用于挂载vue。

・package.json:对项目的描述以及对项目部署和启动、打包的npm命令管理.

3.Vue常用指令

•v-model多用于表单元素实现双向数据绑定（同angular中的ng-model）

•v-for格式：v-for="字段名in（of）数组json"循环数组或json（同angular中的ng-repeat）,需要注意

从vue2开始取消了$index

•v-show显示内容（同angular中的ng-show）

•v-hide隐藏内容（同angular中的ng-hide）

•v-if显示与隐藏（dom元素的删除添加同angular中的ng-if默认值为false）

•v-else-if必须和v-if连用

・v-else必须和v-i唯用不能单独使用否则报错模板编译错误

•v-bind动态绑定作用：及时对页面的数据进行更改

•v-on:click给标签绑定函数，可以缩写为@,例如绑定一个点击函数函数必须写在methods里面

•v-text解析文本

•v-html解析htrrd标签

•v-bind:class三种绑定方法1、对象型'{red:isred}'2、三元型'isred?"red":"blue'"3、数组型

'[{red:"isred"},{blue:"isblue"}]'

•v-once进入页面时只渲染一次不在进行渲染

•v-cloak防止闪烁

・v-pre把标签内部的元素原位输出

4.Vue常用的修饰符

a、按健修饰符

如：.delete(捕获删除和“退格"键)用法上和事件修饰符一样，挂载在v-on后面，

语法:

v-on:keyup.xxx='yyy'<inputclass='aaa'v-model="inputvalue"

@keyup.delete="onKey"/>

b、系统修饰符

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

(1).ctrl

(2).alt

⑶.shift

(4).meta

Q鼠标按钮修饰符

(1).left

(2).right

(3).middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

如：〈button©click.middle="onClick">A</button>鼠标滚轮单击触发

Click默认是鼠标左键单击

d、其他修饰符

(1).lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，我们可以添

加lazy修饰符，从而转变为使用change事件进行同步：

<1nputv-model.lazy=nmsgn>

(2).number

如果想自动将用户的输入值转为数值类型，可以给v-model添加.number修饰符：

<inputv-model.number="age"type=Hnumber">

这通常很有用，因为即使在type="number”时，HTML输入元素的值也总会返回字符串。如果这个值

无法被parseFloatQ解析，则会返回原始的值。

⑶.trim

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

<1nputv-model.trim="msg">

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

5.条件渲染

v-if:条件指令

〈inputtype="checkbox"v-model="ok”>同意许可协议

<!--v:if条件指令：还有v-else、v-else-if切换开销大-->

<hlv-if="ok,,>if：Loremipsumdolorsitamet.</hl>

<hlv-else>no</hl>

v-show:条件指令

使用v-show完成和上面相同的功能

<!—v:show条件指令初始渲染开销大-->

<hlv-show="ok">show：Loremipsumdolorsitamet.</hl>

<hlv-show="!ok">no</hl>

•v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销

毁和重建。

•V-if也是惰性的：如果在初始渲染时条件为假，则什么也不做一一直到条件第一次变为真时，才会

开始渲染条件块。

•相比之下，v-show就简单得多一一不管初始条件是什么，元素总是会被渲染，并且只是简单地基

于CSS进行切换。

•一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁

地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

6.列表渲染

v-for:列表循环指令

・简单的列表渲染

<!--简单的列表渲染-->

<ul>

<liv-for="nin10u>{{n}}</li>

</ul>

<ul>

<!—如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面一,

<liv-for="(n,index)in5">{{n}}-{{index}}</li>

</ul>

•遍历数据列表

data:{

userList:[

{id:1,username:'helen',age:18),

{id:2,username:*peter*,age:28),

{id:3,username:*andy*,age:38)

]

)

<•—2、遍历数据列表一〉

<tableborder=nl">

<!-<trv-for=,,'iteminuserList"x/tr>-->

<trv-for=n(item,index)inuserList">

<td>{{1ndex}}</td>

<td>{{item.id}}</td>

<td>{{1tem.username}}</td>

<td>{{item.age}}</td>

</tr>

</table>

7.组件

组件(Component)是Vue.js最强大的功能之一。

组件可以扩展HTML元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为

一个组件树：

(1)局部组件

varapp=newVue({

el:*#app*,

//定义局部组件，这里可以定义多个局部组件

components:{

//组件的名字

*Navbarf:{

//组件的内容

template:首页学员管理

)

)

})

使用组件

<divid="appn>

<Navbarx/Navbar>

</div>

(2)全局组件

定义全局组件：components/Navbar.js

//定义全局组件

Vponent(*Navbar,,{

template:首页学员管理讲师管理

})

<divid=',app,,>

<Navbarx/Navbar>

</div>

<scriptsrc="vue.min.js"x/script>

<scriptsrc="components/Navbar.js"></script>

<script>

varapp=newVue({

el:'#app'

})

</script>

Vue核心知识点

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

渐进式代表的含义是：没有多做职责之外的事，vue.js只提供了vue-di生态中最核心的组件系统和双向

数据绑定，就好像vuex、vue-router都属于围绕vue.js开发的库。

示例：

使用Angular,必须接受以下东西：

1）必须使用它的模块机制。

2）必须使用它的依赖注入。

3）必须使用它的特殊形式定义组件（这一点每个视图框架都有，这是难以避免的）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西

集成，这些主张会带来一些困扰。

使用React,你必须理解：

1）函数式编程的理念。

2）需要知道它的副作用.

3）什么是纯函数。

4）如何隔离、避免副作用。

5）它的侵入性看似没有Angular那么强，主要因为它是属于软性侵入的。

Vue与React、Angular的不同是，但它是渐进的：

1）可以在原有的大系统的上面，把一两个组件改用它实现，就是当成jQuery来使用。

2）可以整个用它全家桶开发，当Angular来使用。

3）可以用它的视图，搭配你自己设计的整个下层使用.

4）可以在底层数据逻辑的地方用0。和设计模式的那套理念。

5）可以函数式，它只是个轻量视图而已，只做了最核心的东西。

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

数据驱动和组件系统：

数据驱动：ViewModel,保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

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

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

不同点：

（1）实现方式：v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。v-show只是在

修改元素的css样式，也就是display的属性值，元素始终在Dom树上.

（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子

组件；v-show只是简单的基于cs沏换；

（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局

部编译；v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被

保留；

（4）性能消耗：v-i隋更高的切换消耗，不适合做频繁的切换；v-show有更高的初始渲染消耗，适合做频

繁的额切换；

4.v-for与v-if的优先级

当它们处于同一节点，v-for的优先级比v-i度高，这意味着v-if将分别重复运行于每个v-for循环中。当

你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<1iv-for="todointodos"v-if="!todo.isComplete">

{{todo}）

</1i>

上面的代码只传递了未完成的todoso

而如果你的目的是有条件地跳过循环的执行，那么可以将v-if置于外层元素（或〈template〉）上。如：

<liv-for="todointodosn>

{{todo}}

</li>

</ul>

<pv-else>Notodosleft!</p>

5.v・on可以监听多个方法吗？

v-on可以监听多个方法

<template>

<divclass=nabout">

<button©click-myclickChello','world','你好世界'，$event)”>点我text</button>

<!--v-on在vue2.x中测试，以下两种均可-->

<buttonv-on="{mouseenter:onEnter,mouse!eave:oni_eave}”>鼠标进来［〈/button〉

<button@mouseenter="onEnter"@mouseleave="onLeave”>鼠标进来2v/button>

<!——个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号一〉

<button©click="a(),b()”>点我ab</button>

<button@click="one()">^^onetwothree</button>

<!―v-on修饰符.stop.prevent.capture.self以及指定键.{keycode|keyAlias}-->

<!--这里的.stop和.prevent也可以通过传入&event进行操作-->

<!--全部按键别名有：entertabdeleteescspaceupdownleftright-->

<form@keyup.delete="onKeyupn©submit.prevent="onSubmit">

<1nputtype=ntext"placeholder="在这里按delete”〉

<buttontype="submi点我提交〈/button〉

</form>

</div>

</template>

<script>

exportdefault{

methods:{

//这里是es6对象里函数写法

aO{

console.log("a");

),

b(){

console.log("b");

},

one(){

console.logC'one");

this.twoO;

this.three();

},

two(){

console.log(,,twon);

),

three(){

console.log("three");

},

myclickfmsgl,msg2,msg3,event){

console.log(msgl+msg2+"--"+msg3);

console.1og(event);

},

onKeyupO{

console.log(*'youpress'delete*");

},

onSubmitO{

console.log("sumited");

},

onEnterf){

console.log("mouseenter");

},

onLeaveO{

console.log("mouseleave");

)

},

)；

</script>

6.vue中key值的作用

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

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使

用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效

果。

7.vue-cli工程升级vue版本

npminstall-g@vue/di

8.vue事件中如何使用event对象？

注意在事件中要使用$符号

//html部分

<ahref="javascript:void(0);"data-id="12"©click="showEvent(Sevent)">event</a>

//js部分

showEvent(event){

//获取自定义data-id

console.log(event.target.dataset.id)

//阻止事件冒泡

event.stopPropagation();

//阻止默认

event.preventDefault()

)

9.$nextTick的使用

参数:{Function}[callback]

用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。

实例:

<template>

<pref=nmsgpn>{{msg}}</p>

<button@click="change',>$nextTick</button>

</divx/template>

<script>exportdefault{

name:*nextTick,,

data(){

return{

msg:‘未更新'

)

},

methods:{

changef){

//修改数据

this.msg='被更新了'

//DOM还没有更新

console.logCthis.$refs.msgp.innerHTML)

this.$nextTick(()=>{

//DOM更新了

console.log(*$nextTick:*+this.$refs.msgp.innerHTML)

})

)

),

createdO{

}}</script>

$nextTick()的应用场景：

在vue的生命周期createdO钩子函数中进行dom操作，一定要放在$nextTick()函数中执行。在

createdO钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以

此处一定要将DOM操作的代码放进nextTick()的回调函数中。

mounted。钩子函数，因为该钩子函数执行时，所有的DOM挂析口渲染都已完成，此时在该钩子函数

中进行任1可DOM操作都不会有问题，

在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置

$nextTick()的回调函数中。

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

在newVue()中，data是可以作为一个对象进行操作的，然而在component中，data只能以函数的

形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的

data不会相互影响，是独立的。

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

Vue中子组件调用父组件的方法，这里有三种方法提供参考

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

父组件

<template>

<div>

<childx/child>

</div>

</template>

<script>

importchildfrom*~/components/dam/chiId';

exportdefault{

components:{

child

),

methods:{

fatherMethodO{

console.log('测试');

}

)

)；

</script>

子组件

<template>

<div>

<button©click="chi1dMethodO点击〈/button〉

</div>

</template>

<script>

exportdefault{

methods:{

childMethod(){

this.$parent.fatherMethodO;

)

}

};

</script>

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

父组件

<template>

<div>

<chi1d@fatherMethod="fatherMethod"x/chi1d>

</div>

</template>

<script>

importchildfrom*~/components/dam/chiId,;

exportdefault{

components:{

child

),

methods:{

fatherMethod(){

console.log('测试')；

)

}

)；

</script>

子组件

<template>

<div>

<button©click="chi1dMethodO”>点击〈/button〉

</div>

</template>

<script>

exportdefault{

methods:{

childMethod(){

this.$emit(*fatherMethod1);

)

}

}；

</script>

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

父组件

<template>

<div>

<chi1d:fatherMethod=,,fatherMethod"x/chi1d>

</div>

</template>

<script>

importchildfrom*~/components/dam/chiId';

exportdefault{

components:{

child

),

methods:{

fatherMethod(){

console.log。测试')；

}

)

)；

</script>

子组件

<template>

<div>

<button©click="chi1dMethod()”>点击〈/button,

</div>

</template>

<script>

exportdefault{

props:{

fatherMethod:{

type:Function,

default:nul1

)

),

methods:{

childMethodC){

if(this.fatherMethod){

this.fatherMethod();

)

)

}

}；

</script>

12.vue中keep-alive组件的作用

作用：用于保留组件状态或避免重新渲染(缓存的作用)

比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面二>返回目录页面=>打

开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用<keep-alive>

</keep-a”ve>进行缓存，这样用户每次返回目录时，都能从缓存中快速渲染，而不用重新渲染。

13.vue中如何编写可复用的组件？

组件，是一个具有一定功能，且不同组件间功能相对独立的模块。高内聚、低耦合。

开发可复用性的组件应遵循以下原则：

1)规范化命名：组件的命名应该跟业务无关，而是依据组件的功能命名。

2)数据扁平化：定义组件接口时，尽量不要将整个对象作为一个prop传进来。每个prop应该是一个

简单类型的数据。这样做有下列几点好处：

(1)组件接口清晰。

(2)props校验方便。

(3)当服务端返回的对象中的key名称与组件接口不一样时，不需要重新构造一个对象。

扁平化的props能让我们更直观地理解组件的接口。

<!--反例

<card:item="{title:,description:item.desc,poster:item.img}>

</card>

<card

:title="item・name”

:description="item.descH

:poster="item.1mg">

</card>

3)可复用组件只实现UI相关的功能，即展示、交互、动画，如何获取数据跟它无关，因此不要在组件

内部去获取数据。

4)可复用组件应尽量减少对外部条件的依赖，所有与vuex相关的操作都不应在可复用组件中出现。

5)组件在功能独立的前提下应该尽量简单，越简单的组件可复用性越强。

6)组件应具有一定的容错性。

7)组件应当避免对其父组件的依赖，不要通过this.parent来操作父组件的示例。父组件也不要通过

this.children来引用子组件的示例，而是通过子组件的接口与之交互。

8)可复用组件除了定义一个清晰的公开接口外，还需要有命名空间。命名空间可以避免与浏览器保留标

签和其他组件的冲突.特别是当项目引用外部UI组件或组件迁移到其他项目时，命名空间可以避免很多

命名冲突的问题。

14.什么是vue生命周期？

vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行

的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

vue生命周期的这八个阶段：

1)创建前(beforeCreate)

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形

成，不能获得DOM节点。

2)创建后(created)

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3,载入前(beforeMount)

对应的钩子函数是beforeMount,在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂

载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶

段是过渡性的，一般一个项目只能用到一两次。

4,载入后(mounted)

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写

在这里。在这个阶段，数据和DOM都已被渲染出来。

5,更新前(beforeUpdate)

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate

函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作

用。

6,更新后(updated)

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7,销毁前(beforeDestroy)

对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不

再需要vue操纵DOM时，就要销毁Vue,也就是清除vue实例与DOM的关联，调用destroy方法可以

销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8,销毁后(destroyed)对应的钩子函数是destroyed。

在销毁后，会触发destroyed钩子函数。

vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可

以准确的控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MWM的生动体现和继

承。

15.vue生命周期钩子函数有哪些？

1)VUE生命周期是VUE实例化或者组件创建到消亡的过程。

2)beforeCreate创建前的状态，初始化事件和生命周期。

3)创建完毕状态Init(初始化)injections(依赖注入)&reactivity(开始响应)。

4)beforeMount挂载前状态，是否有元素el,是否有模板，是否渲染到了函数内，是否作为模板进行

了outerHTML渲染到了页面，向虚拟DOM上挂载的过程，并且还是把我们的‘#app，生成虚拟

DOM,生成完毕后并渲染到view层。

5)mounted挂载结束状态，渲染到真正的DOM。

6)beforeUpdate可以拿到Vue实例化改变前的状态。

7)Updated拿到变动完成的状态。

8)beforeDestroy消亡前的状态。

9)destroyed实例化或组件被摧毁消亡。

16.vue如何监听键盘事件中的按键？

在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keycode,直接使用别名就能监听

按键的事件。

<1nput©keyup.enter="function">

别名实际键值

.deletedelete（删除）/Backspace（退格）

.tabTab

.enterEnter（回车）

.escEsc（退出）

.spaceSpace（空格键）

,leftLeft（左箭头）

.upUp（上箭头）

.rightRight（右箭头）

.downDown（下箭头）

,CtrlCtrl

,altAlt

.shiftShift

.meta（window系统下是window键，mac下是command键）

另外，Vue中还支持组合写法:

组合写法按健组合

@keyup.aIt.67unction"Alt+C

@click.ctrl=MfunctionKCtrl+Click

但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用

到.native修饰符了，如：

<el-input

v-model="inputName"

placeholder『搜索你的文件”

©keyup.enter.native="searchFile（params）"

>

</el-input>

如果遇到.native修饰符也无效的情况，可能就需要用到$】isteners了.

17.vue更新数组时触发视图更新的方法

1)Vue.set响应式新增与修改数据

可以设置对象或数组的值，通过key或数组索引，可以触发视图更新

#Vue.set(target,key,value)

•参数：

。{ObjectArray}target

。{stringnumber}key

°{any}value

•返回值：设置的值.

•用法：

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视

图更新。这个方法主要用于避开Vue不能检测属性被添加的限制。

注意对象不能是Vue实例，或者Vue实例的根数据对象。

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value:重新赋的值

・数组修改

vue.set(array,indexofltem,newvalue)

this.array.$set(indexofltem,newvalue)

•对象修改

Vue.set(obj,keyOfltem,newvalue)

this.obj.$set(keyOfltem,newvalue)

2)Vue.delete

删除对象或数组中元素，通过key或数组索引，可以触发视图更新

#Vue.delete(target,key)

•参数：

。{Object|Array}target

°{string|number}key/index

仅在220+版本中支持：还支持Array+index用法。

•用法：

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于

避开Vue不能检测到属性被删除的限制，但是你应该很少会使用它。

«目标对象不能是一个Vue示例或Vue示例的根数据对象。

・数组修改

Vue.delete(array,indexofltem)

this.array.$delete(indexofltem)

•对象修改

Vue.delete(obj,keyOfltem)

this.obj.$delete(keyOfltem)

3)数组对象直接修改属性，可以触发视图更新

this.array[0].show=true;

this.array.forEach(function(item){

itern,show=true;

})；

4)splice方法修改数组，可以触发视图更新

this.array.splice(indexofltem,1,newElement)

5)数组整体修改，可以触发视图更新

vartempArray=this.array;

tempArray[0].show=true;

this.array=tempArray;

6)用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新

//object.assign的单层的覆盖前面的属性，不会递归的合并属性

this.obj=Object.assign({),this.obj,{a:l,b:2))

//assign与object.assign一样

this.obj=_.assign({),this.obj,{a:1,b:2))

//merge会递归的合并属性

this.obj=merge({},this.obj,{a:l,b:2})

7)Vue包含一组观察数组变异的方法，使用它们改变数组也会触发视图更新

push。向数组的末尾添加一个或多个元素，并返回新的长度。

pop()删除最后一个元素，把数组长度减1,并且返回它删除的元素的值。

shiftO把数组的第一个元素从其中删除，并返回第一个元素的值。

unshiftO向数组的开头添加一个或更多元素，并返回新的长度。

splicef)向/从数组中添加/删除项FI,然后返回被删除的项目o该方法会改变原始数组。

sort()对数组的元素进行排序。

reverse()颠倒数组中元素的顺序。

不变异的方法：

fi1ter()

concatf)

slice()

他们返回的是一个新数组，使用这些方法时，可以用新数组来替换原始数组

原理：

-Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化复用DOM元素。替换的数组

中，含有相同元素的项不会被重新渲染，

因此可以大胆的用新数组来替换旧数组，不用担心性能问题。

-值得注意的是：

以下变动的数组中Vue是不能检测到的，也不会触发视图更新。

1.通过索引直接设置项，比如this.books[3]={…}

2.修改数组长度，比如this.books.length=1;

两个问题都可以用splice来解决：

第一个问题还可以用set方法this.$set(this.books,3,{...))

18.vue中对象更改检测的注意事项

还是由于JavaScript的限制，Vue不能检测对象属性的添加或删除:

vanvm=newVue({

data:{

a:1

)

})

//'vm.a'现在是响应式的

vm.b=2

//'vm.b'不是响应式的

对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是，可以使用Vue.set(object,

propertyName,value)方法向嵌套对象添加响应式属性。例如，对于：

varvm=newVue({

data:{

userprofile:{

name:'Anika,

)

)

})

你可以添加一个新的age属性SI嵌套的userProfile对象：

Vue.set(vm.userProfi1e,*age*,27)

你还可以使用vm.$set实例方法，它只是全局Vue.set的别名：

vm.$set(vm.userProfile,*age*,27)

有时你可能需要为已有对象赋值多个新属性，比如使用Object.assign()或一.extend。。在这种情况

下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile,{

age:27,

favoritecolor:*VueGreen,

})

你应该这样做：

vm.userProfile=Object.assign({),vm.userProfile,{

age:27,

favoritecolor:*VueGreen,

))

19.解决非工程化项目初始化页面闪动问题

vue页面在加载的时候闪烁花括号{},v-doak指令和css规则如[v-doak]{display:none}一起用时，这个

指令可以隐藏未编译的Mustache标签直到实例准备完毕。

/*css样式*/

[v-cloak]{

display:none;

}

<!—html代码一>

<divid="app"v-cloak>

<ul>

<1iv-for="iternintabsH>{{itern.text}}</li>

</ul>

</div>

20.“for产生的列表，实现active的切换

<divv-for="(desc,tabieindex)indescriptions.firstface">

<ulclass=ncontrol1er-checkboxsclearfix">

<li

@click="currentlndex=index,currentTable=tableindex"

class='*controller-checkbox-item"

:class="{active:index===currentlndex&&tablelndex==currentTable}n

v-for="(ctrlvalue,index)indesc.argsn>

</li>

</ul>

</div>

21.“model语法糖的组件中的使用

<inputtype="text"v-model="mes">

此时mes值就与input的值进行双向绑定

实际上上面的代码是下面代码的语法糖。

<1nputv-bind:value="mes"v-on:input="mes=Jevent.target.value"/>

要理解这行代码，首先你要知道input元素本身有个oninput事件，这是HTML5新增加的，类似

onchange,每当输入框内容发生变化，就会触发oninput,把最新的value传递给mes。从而实现了v-

model

v-model用在组件上的时候

我们知道v-model可以实现数据的双向绑定，但是，如果说这是一个复杂的输入框，在项目中也经常使

用。此时我们我们就把这个输入框封装成组件，那怎么利用v-mode让父组件的值与子组件input框里的

值双向绑定起来。看下面的例子：

1）父组件

<inputBoxv-model="mes"></inputBox>根据上面讲的v-model语法糖，所以InputBox那行代码也

可以写成<lnputBoxv-bind:value="value"v-on:input="mes=Sevent.target.value">

</InputBox>

2）子组件

<template>

<div>

<inputtype="text"ref="input"

「:value="value"

v-on:input="inputNew($event.target.value)"

i>

</div>

：</template>

•<script>

>exportdefault{

props:{

value:{

default:100

},

'卜

(data(){

return{}

:3

•created(){

»卜

methods:{

inputNew(value){

this.$emit("input",value)

1)

，}

)

'</script>

所以说：

1)接受一个valueprop

2)在有新的值时触发input事件并将新值作为参数。

这样，我们就可以看到子组件和父组件的值就可以联动起来。但是我们看到v-model中的事件是input,如

果碰到单选复选按钮这种check事件，那我们就需要去自定义v-model

v・model自定义

父组件

<lnputCheckoutv-model="foo,,x/inputcheckout>

<lnputBoxv-bind:value="value"v-on:input="mes=$event.target.value">

</lnputBox>

但是单选复选框不会触发input事件，只会触发change事件。所以在子组件我们需要自定义v-model。我

们来看看代码：

<template>

<div>

<inputtype="checkbox"

@change="newValue($event.target.checked)"

:checked="checked"

>

</div>

</template>

<script>

exportdefault{

props:['checked'],〃这里就不用value了，而是checked

model:{

prop:'checked,,

event:'changeEvent'

卜

data(){

return{

)

},

created(){

卜

methods:{

newValue(val){

this.$emit('changeEvent',val)

}

)

}

22.Vue中自定义过滤器

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很

便利的过滤器，过滤器通常会使用管道标志"|使用：

<td>{{item.ctime|dataFormat(*yyyy-mm-dd*)}}</td>

自定义全局过滤器

虽然Vuejs给我们提供了很多强有力的过滤器，但有时候还是不够。值得庆幸的，Vue给我们提供了一个

干净简洁的方式来定义我们自己的过滤器，之后我们就可以利用管道〃|〃来完成过滤。

定义一个全局的自定义过滤器，需要使用Vue.fi1ter()构造器。这个构造器需要两个参数。

//定义一个全局过滤器

Vue.fi1ter(1dataFormat*,function(input,pattern=*'){

vardt=newDateCinput);

//获取年月日

vary=dt.getFul1Year();

varm=(dt.getMonth()+1).toStringO.padstart(2,'0');

vard=dt.getDate().toStringO.padstart(2,'0');

//如果传递进来的字符串类型，转为小写之后，等于yyyy-mm-dd,那么就返回年-月-日

//否则，就返回年-月-日时：分：秒

if(pattern.toLowercaseO===1yyyy-mm-dd'){

return'${y}-${m}-${d}';

}else{

//获取时分秒

varhh=dt.getHoursO.toStringO.padstart(2,'0');

varmm=dt.getMinutesO.toStringO.padstart(2,'0');

varss=dt.getSeconds().toStringO.padstart(2,'0');

return'${y}-${m}-${d}${hh}:${mm}:${ss}";

}

))；

自定义私有过滤器

filters:{//私仃局部过滤器，只能在当前VM对象所控制的view区域进行使用

dataFormat(input,pattern={//在参数列表中通过pattern：””来指定形参默认

值，防止报错

vardt=newDate(input);

//获取年月日

vary=dt.getFullYearO;

varm=(dt.getMonthO+1).toStringO.padstart(2,'0');

vard=dt.getDate().toStringO.padstart(2,'0');

//如果传递进来的字符中类型，转为小写之后，等于yyyy-mm-dd,那么就返回年-月-日

//否则，就返回年-月-日时：分：秒

if(pattern.toLowercaseO===*yyyy-mm-dd'){

return'${y}-${m}-${d}';

}else(

//获取时分秒

varhh=dt.getHoursO.toStringO.padstart(2,'0');

varmm=dt.getMinutesO.toStringO.padstart(2,'0');

varss=dt.getSeconds().toStringO.padstart(2,'0');

return'${y}-${m}-${d}${hh}:${mm}:${ss}';

)

23.vue等单页面应用及其优缺点

优点：

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

2）前后端分离，比如vue项目

3）完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方

式更加规范化，便于修改和调整；

缺点：

1）首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。

2）不利于SE。优化，单页页面，数据在前端渲染，就意味着没有SEO。

3）页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进

后退功能，所以需要自己建立堆栈管理）

24.什么是vue的计算属性？

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板

过重且难以维护。

<divid="example">

{{message.split（**）.reverseO.join（**）}}

</div>

这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性

computed来进行处理。

25.vue-cli提供的几种脚手架模板

vue-di的脚手架项目模板有browserify和webpack,官网给出了两个模板：webpack-simple和

webpack两种。两种的区别在于webpack-simple没有包括Eslint检查功能等等功能，普通项目基本用

webpack-simple就足够了.

搭建官方项目模板步骤：

1、npminstallvue-cli（安装vue-cli）有的时候有看到其它两种写法：-save-dev和-save的写法。这

两个有一定的区别，我们都知道package.json中有一个"dependencies"和"devDependencies"的