vue 面试题

1，vue使用的是什么模式？请具体介绍一下这种模式

渐进式开发，采用mvvm的模式

model (模型层) axios data vuex(state)

view (视图层) template < template>< /template>

viewmodel（传递者）是双向绑定实现的机制

延伸问题：什么是渐进式？

Vue渐进式-先使用Vue的核心库，再根据所需要的功能再去增加相应的插件。

2，数据渲染 有几种方式 有什么区别?

v-htme 可以解析标签

v-text：原模原样输出

3.v-if和v-show有什么区别，切换时组件触发那些生命周期钩子函数？

v-if控制的是dom的销毁和创建

v-show只是控制的是display属性

触发的生命周期 v-if 显示：创建  挂载 隐藏：销毁

v-show不触发

4，v-if和v-for为什么不建议混合使用

被渲染的dom会重复一个创建销毁的过程

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

5，vue中如何自定义指令（全局和局部）

全局的：参数一 : 指令调用的dom对象

              参数二 : 获取相应的传值信息

指令定义函数提供了几个钩子函数 (可选)

bind：只调用一次

inserted：被绑定元素插入父节点时调用

update：所在组件的 VNode 更新时调用

componentUpdated：所在组件的 VNode全部更新时调用

unbind：只调用一次，指令与元素解绑时调用

6，vue中常用的指令有哪些

V-text：主要用来更新textContent
V-html：设置innerHTML
V-show：也是用于根据条件展示元素
V-if：可以实现条件渲染
V-else-if：当v-if的else-if块
V-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
V-on：用来监听dom事件
V-bind：用来动态的绑定一个或者多个特性
v-for：用v-for指令根据遍历数组来进行渲染
V-model：双向数据绑定
V-slot:  插槽
V-pre：跳过这个元素和它的子元素编译过程
V-cloak：这个指令是用来保持在元素上直到关联实例结束时进行编译。
V-once：只会渲染一次 实例极其所有的子节点将被视为静态内容跳过

7，计算属性和实例方法有什么区别？

计算属性有缓存 但是不能传参

实例方法没有缓存 可以传参

8，如何声明一个过滤器（全局的和局部的）

过滤器，将数据被渲染到视图之前进行格式化处理，不会修改作用域中原有的数据
原则是：左值右量

全局的

vue.filter

局部的

filters

9，你用过那些v-model修饰符？

.lazy文本框失去焦点后在更新数据
.trim清除前后空格的
.number从字符中获取数字

10,你知道那些事件修饰符

.stop阻止事件冒泡
.once只执行一次，一次性事件
.self阻止事件冒泡和事件捕获
.captrue事件捕获阶段触发
.prevent阻止浏览器默认行为
.native 触发原生事件

11,怎样声明全局组件，怎样使用全局组件


全局

Vue.component（‘myHeader’,{
         Template:` <div>全局组件</div>`
    }）

使用

<my-header></my-header>

12，怎样声明局部组件，怎样使用局部组件

定义  import引入 注册components 调用

13,父子组件怎样实现通讯？

父传子：

父组件：<mydiv :list='list'> </mydiv>
子组件：props[‘list’]

子传父：

子组件：this.$emit(‘子组件事件名’，参数)
父组件：<mydiv @子组件事件名=‘父组件事件名’></mydiv>

14，非父子组件之间如何传递参数？

兄弟组件可以父传子 子传父 pass
Vuex也可以实现数据共享(官方推荐使用vuex)
sessionStorgey

15，怎样使用props限定传递的数据，有哪些属性？

type //限定传递的数据类型
Required:true false //是否必传
Default:false //指定默认值
    // 自定义验证函数
validator: function (value) {
        // 条件
     } 

16，解释VUE中单向数据流的概念

子组件不可以直接修改父组件传过来的参数，如果直接修改会报错，只能声明成自己的才可以修改
注：this.$parent.title，可以修改父组件传过来的值

17，vue有哪些插槽，如何使用

默认插槽：<slot></slot>
具名插槽：具有name属性的插槽 ，定向给插槽传递内容
作用域插槽：作用域插槽其实就是带数据的插槽。作用域插槽就可以通过子组件绑定数据传递给父组件。

18，vue中怎样实现组件之间的嵌套

可以使用插槽，让插槽接受子组件中的内容

19，vue中怎样操作dom

ref document.getbyid（）

20，vue怎样监听数据的变化，怎样监听一个对象属性的变化

watch     深度监听，deep:true

21，vue中生命周期钩子函数有哪些，请写出语法

    创建前beforeCreate       创建后created（请求axios）
    挂载前beforeMount        挂载后mounted（也可以请求axios）
    更新前beforeUpdate       更新后updated 
    销毁前beforeDestroy      销毁后destroyed 

22，挂载和创建之间的区别

   创建之后只可以访问数据不可以操作dom
   挂载之后可以访问数据可以操作dom

23，keep-alive组件有什么作用？

当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。

24，vue.nextTick方法有什么用？

当数据更新了，在dom中渲染后，自动执行该函数

25，vue实现双向数据绑定的原理是什么？

用object.defineProperty将他转化为getter或者setter      v-model

26，什么是vue全局事件解绑？

在 bofordestroy销毁事件中销毁，清除

27，$set 方法有什么用？ 有什么特点？

$set是用于设置对象属性的

对于没有声明的属性使用 $set ，视图才会更新

28，路由显示区域和路由跳转 分别是哪个组件？

显示：router-view  

跳转 router-link <=> a  tag=“span”？ to=“path” active-class

29，路由中怎样传递和接收参数（单个 多个参数） window.localtion.href=""

this.$router.push 跳转

this.route.xxx 接收

30，active-class的作用

是vue-router模块的router-link组件中的属性，用来做选中样式的切换