面试前的总结-vue篇

总结一些vue的面试题吧，为了年后的面试作准备。

vue指令

v-for //为什么要写key 因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

v-if // dom的显示与隐藏

v-show // 通过改变样式来达到显示和隐藏效果

v-modle // 双向绑定

v-html // 能够读取html标签

v-on // 事件

v-text // 读取文本不能读取html标签

v-bind // 动态绑定

vue的生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

computed 和watch的区别

• 计算属性（computed）

对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

• 侦听器（watch）

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

官方文档很清晰地表达了，watch是在执行一些复杂的操作时候使用的。更直观的例子，我们可以看下官方对computed和watch的对比：
以下代码是针对fullname这个属性的监听：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

可以明显的看出，在执行简单的计算操作时，computed比watch更简洁易读。
总结：
1.如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。
2.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

vue的组件之间的传参

props、emit父子组件间传参的主要方式
父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用
子组件$emit(事件名，传递的参数)向外弹出一个自定义事件, 在父组件中的属性监听事件，同时也能获取子组件传出来的参数

//  父组件
<hello-world msg="hello world!" @confirm="handleConfirm"><hello-world>
//  子组件
 props: {
    msg: {
      type: String,
      default: ''
    }
  }，
  methods：{
      handleEmitParent(){
          this.$emit('confirm', list)
      }
  }

vue响应式原理

通过Object.defineProperty去劫持data里的属性，将data全部属性替换成getter和setter，配合发布者和订阅者模式，每一个组件都有一个watcher实例，当我们对data属性赋值和改变，就会触发setter，setter会通知watcher，从而使它关联的组件进行重新渲染。
主要记录vue相关面试题，详细解答请参考其他文档。