vue面试题

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

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

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

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

<template>
  <div>
  	//父组件需要在这里传值
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
      	//调用父组件的方法
        this.$emit('fatherMethod');
      }
    }
  };
</script>

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

<template>
  <div>
  	//属性的方式传值
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
      	//使用
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

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

创建前/后
　　在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后
　　在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
　　在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后
当data变化时，会触发beforeUpdate和updated方法。
销毁前/后
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

vue 的双向绑定的原理是什么

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

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

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

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

说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定