vue面试题由浅入深（一）

vue面试题的自我总结

• 基础的使用
• vue的原理层及高级特性
• 使用vue设计具体项目功能

使用

1、插值，表达式

vue可以使用 {{ }} 双花括号的方式在dom结构中插入想要的值，使用vue 我们的工作更多的是去操作数据改变视图，尽量避免直接操作dom元素。

2、指令动态属性

动态地绑定一个或多个 属性，或一个组件 prop 到表达式。
在绑定 class 或 style 属性时，支持其它类型的值，如数组或对象
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象

3、v-html 的xss风险

<p v-html="test"></p>
export default {
  data () {
    return {
      test: `<a οnclick='alert("xss攻击")'>链接</a>`
    }
}
//往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意攻击用户的特殊目的

4、computed 和watch 的区别

computed 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。computed 的结果会被缓存，也就是只有当依赖的响应式 property 变化才会重新计算

watch 事件监听，监听一个值得变换，当值发生改变时做出对应的函数处理，函数中有两个参数吗，分别接受newvalue，oldvalue
深度监听，如果不开启深度监听watch只能监听到基础数据类型的变化，数组和对象要开启deep属性

watch:{
 c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
 }

5、class 和style

可以动过v-bind的方法动态绑定样式class 和 style ，并且可以加上一些简单的三元判断，动态绑定class的值可以写成对象或者数组的形式。而style 的值要写成对象形式

<template>
<div v-bind:class="{ active: isActive }"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:style="{ color: red, fontSize: 30+ 'px' }"></div>
<div v-bind:style="styleObject"></div>
</template>
<script>
data: {
  isActive: true,
  hasError: false,
   styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
</script>

6、v-show 和v-if 的区别和使用场景

v-if 和v-show 都可以控制元素的显示和隐藏，区别是v-show 是通过切换元素的display:block 和 display:none 属性显示或者隐藏元素，元素总会被渲染。而v-if 是向dom树种添加或者删除dom
所以如果要频繁切换某节点时，可以使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

7、vue父子组件如何实现通信

父组件向子组件传值时，可以通过给子组件绑定自定义属性，然后子组件中props属性用于接受传递过来的值，两者要相互对应

子组件向父组件传值时，可以通过this.$emit()的方法绑定自定义事件，this.$emit()有两个参数，第一个参数是自定义的事件名，第二个是需要传递的值，父组件绑定子组件的自定义事件，获取传递过来的值

8、自定义事件实现兄弟组件传值

可以在main.js 初始文件中给vue的prototype上挂载一个新的 vue实例bus（公共的），需要传值的组件中通过this.bus.$emit()的方法绑定自定义事件，接受值得组件通过this.$on()获取传递过来的值

9、vue的生命周期

beforeCreate() 在页面初始化之前调用
created（）页面初始化之后调用
beforemount（） 在页面挂载之前调用
Mounted（ ） 页面挂载之后调用
beforeupdate（ ）页面更改时调用
updated （） 页面更改之后调用
beforeDestroy（） 页面销毁时调用
Destroyed （） 页面销毁之后调用