Vue 面试题常见知识点

1. 事件修饰符

   • .stop: 阻止事件冒泡
   • .prevent: 阻止默认事件，如超链接标签的重定向
   • .capture: 网页是默认按照冒泡方式去触发函数的，但是当我们使用.capture修饰符时，网页就会按照捕获的方式触发函数，也就是从外向内执行，但是这个时候一定要注意，.capture修饰符一定要写在外层才能生效

2. 按键修饰符

   <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
   <button @click.ctrl="onClick">A</button>
   
   <!-- 有且只有 Ctrl 被按下的时候才触发 -->
   <button @click.ctrl.exact="onCtrlClick">B</button>
   
   <!-- 没有任何系统修饰符被按下的时候才触发 -->
   <button @click.exact="onClick">C</button>
   

3. 表单项修饰符

   <!-- 截断前后空格 -->
   <input type="text" v-model.trim="name" />
   
   <!-- 类似防抖，输入结束后才会变化，输入的过程中不会变化 -->
   <input type="text" v-model.lazy="name" />
   
   <!-- 转化为数字 -->
   <input type="text" v-model.number="age" />
   

4. 父子组件传参

   <!-- 父组件传值给子组件 -->
   <!-- 父组件 -->
   <template>
     <child :parentToChild="value1"></child>
   </template>
   <script>
   export default {
     data () {
       return {
         value1:'父组件的值传给子组件'
       }
     },
   }
   </script>
   
   <!-- 子组件 -->
   <template>
     <p>这是子组件</p>
   </template>
   <script>
   export default {
     props: ['parentToChild']
   }
   </script>
   

   <!-- 子组件传值给父组件 -->
   <!-- 子组件 -->
   <template>
     <div>
       <p>这是子组件</p>
       <button @click="clickEvent">点击按钮</button>
     </div>
   </template>
   <script>
   export default {
     data () {
       return {
         value1: '这是要传给父组件的值',
         value2: '可以传多个值'
       }
     },
     methods: {
       clickEvent(){
         this.$emit('sendValueToParent', this.value1, this.value2);
       }
     }
   }
   </script>
   
   <!-- 父组件 -->
   <template>
     <child @sendValueToParent = "getValueFromChild"></child>
   </template>
   <script>
   export default {
     methods: {
       getValueFromChild(value1, value2) {
         console.log(value1, value2) // 这是要传给父组件的值 可以传多个值
       }
     }
   }
   </script>
   

5. 兄弟组件传参

   // event.js
   import Vue from 'vue'
   export default new Vue()
   

   <!-- 父组件 -->
   <template>
   	<div>
   		<son1></son1>
   		<son2></son2>
   	</div>
   </template>
   

   <!-- 兄弟组件1 -->
   <script>
   import event from './event'
   export default {
     methods: {
       addTitleHandler(title) {
         console.log('on add title', title)
       }
     },
     mounted() {
       // 绑定自定义事件
       event.$on('onAddTitle', this.addTitleHandler)
     },
     beforeDestroy() {
       // 及时销毁，否则可能造成内存泄露
       event.$off('onAddTitle', this.addTitleHandler)
     }
   }
   </script>
   

   <!-- 兄弟组件2 -->
   <script>
   import event from './event'
   export default {
     methods: {
       addTitle() {
         // 调用自定义事件
         event.$emit('onAddTitle', 'title')
       }
     }
   }
   </script>
   

6. vue父子组件生命周期调用顺序

   • 初始化父子组件执行顺序
     父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount=> 子mounted => 父mounted
   • 删除子组件触发生命周期顺序
     父beforeUpdate => 子beforeDestroy => 子destroyed => 父updated
   • 更新子组件触发生命周期顺序
     父beforeUpdate => 子beforeUpdate => 子updated => 父updated
   • 销毁父子组件执行顺序
     父组件beforeDestory->子组件beforeDestory->子组件destory->父组件destory

7. created 和 mounted 有什么区别？

   • created 只是把 Vue 实例初始化了，它只是存在与 js 模型之中的一个变量而已，这时候页面并没有渲染。
   • mounted 页面已经渲染完成，一般是在 mounted 进行操作。

8. 哪个生命周期获取不到 Vue 实例？
   beforeCreated

9. beforeDestory 里要做什么事情？

   • 解除绑定
   • 销毁子组件以及事件监听器

10. 数据修改之后 updated 是什么顺序？是父组件先 updated，还是子组件先 updated

    • 父组件 beforeUpdat e-> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated
    • 只有子组件更新渲染完成，父组件才能说更新渲染完成

11. 父子组件生命周期为什么这么渲染？
    子组件是父组件的一部分，渲染完所有的子组件，父组件才算渲染完成。

12. $nextTick

    • Vue 是异步渲染的
    • data 改变之后，DOM 不会立刻渲染
    • $nextTick会在 DOM 渲染之后被触发，以获取最新 DOM 节点待 DOM 渲染完再回调

13. 异步加载组件

    <script>
    	// 同步加载
    	// import Demo from '../Demo'
    	export default {
    		components: {
    			Demo: () => import('../Demo')	// 异步加载
    		}
    	}
    </script>
    

14. keep-alive

    • keep-alive 它是会将组件生成 DOM 缓存起来常规的组件
    • v-if 切换的时候，都是销毁然后重建，其中会重新创建 vnode ，重新执行 diff 算法。
    • 而 keep-alive 它会将组件生成 DOM 缓存起来，下次再重建时直接拿来使用。不再执行 mounted 和 destroyed
    • 关键就是，将组件渲染的结果缓存起来，不用再重新创建、重新渲染。

15. mixin

    • 多个组件有相同的逻辑，抽离出来
    • minxin 并不是完美的解决方案，会有一些问题
    • mixin 的逻辑是多个组件之间共用的

    <!-- 多个组件之间通过mixin把公共部分引入进来 -->
    <script>
    	import myMixin from './mixin'
    	export default {
    		mixins: [myMixin, myMixin2...]	// 可以添加多个，会自动合并起来
    	}
    </script>