vue面试题,总结个人学习的面试题

1.vue生命周期

beforeCreate	在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created	实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
activated	keep-alive 组件激活时调用。
deactivated	keep-alive 组件停用时调用。
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

2.keep-alive

1.是什么
vue 自带的一个组件,用来缓存组件.
    提升性能,相应的减少发送请求的数量

3.v-if,v-show的区别

1.v-if,v-show
都用于控制元素的显示隐藏
v-if 是通过布尔值控制元素是否被创建
v-show 是通过控制元素的display属性 当v-show=true时元素显示
当v-show = fales 时相当于元素为display:none的状态(v-show会造成页面重排)

2.使用场景
初次加载时v-if比v-show好,页面不会加载通过v-if隐藏的元素
需要频繁切换的时候v-show比v-if好,频繁的通过v-if创建删除比控制元素display属性开销大.具体场景自己区分

4.v-for 和 v-if 的优先级

v-for的优先级高于v-if 这 取决于VUE的源码
v-for和v-if一般不会用在同一个标签中,如果非要同时使用需要配合computed能提高性能

5.ref是什么

vue可以通过ref来获取dom元素
在元素中定义 ref `<div class="box" ref="box"></div>`

然后通过 `this.$refs.box` 获取

6.nextTick是什么

nextTick是用来获取更新后的Dom内容
示例
<div ref="box" @click="btn">{{str}}</div>
当str发生改变时通过
console.log(this.$refs.box.innerHTML)//不会获取最新的内容
此时需要用到$nextTick
this.$nextTick(()=>{              console.log(this.$refs.box.innerHTML,"nextTick")
})

7.scoped原理

作用:让样式在本组件中生效,不会发生样式污染
原理:给元素新增属性,然后css根据属性选择器添加样式

8.样式穿透

样式穿透
1.`父元素 /deep/ 子元素 {}`
2.`父元素 >>> 子元素 {}`

9.组件间的通信

1.父传子

父组件`<sendBtn :sendMessage="fmessage"></sendBtn>`
通过自定义属性的方式将 fmessage 值传递给子组件

子组件
`props: {
		sendMessage: {
		type: String,
		default: "没传过来",
	},
 },`
通过props接收,接收的sendMessage 就能通过this直接调用

2.子传父

父组件
`<sendBtn @childFn="parentFn"></sendBtn>`
methods:{
    childFn(data){
        cconsole.log(data)//data就是子组件传递的值
    }
}

子组件
`this.$emit("childFn", this.message);`

3.兄弟组件之间传值

vue2.x 通过中转传值(bus)

//bus.js

import Vue from 'vue';
export default new Vue();

// 组件一,传值的一方
import bus from "../../utils/bus";

methods: {
      busFun(data) {
        // 通过 $emit 来触发方法，参数1 是定义方法名，参数2 是你要发送的数据
        bus.$emit('name', data)
      },
 }

//组件二,收值的一方
import bus from "../../utils/bus";
created() {
      bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
},
    
 // 为了防止数据冗余,在组件销毁时清除
beforeDestroy() {
   bus.$off('name');
},

vue3.x使用eventbus插件

//兄弟组件一
<template>
  <div>
    子组件：{{ChildStr}}
    <button @click="setParentStr">点击</button>
  </div>
</template>
<script>
import {  ref } from "vue"
import bus from 'vue3-eventbus'
export default {
  components: {},
  props: {  },
  setup(props, ctx) {
    const ChildStr = ref('Child的值')
    bus.on('setChildStr',(val)=>{
      ChildStr.value=val
    })
    return {
      ChildStr
    };
  },
};
</script>

//兄弟组件二
<template>
  <div>兄弟组件:{{Str}}
<button @click="setChildStr">点点</button>
  </div>
</template>
 
<script>
import { ref } from "vue";
import bus from 'vue3-eventbus'
export default {
  props: {},
  setup(props,ctx) {
    const Str = ref("我是兄弟组件")
    const setChildStr=()=>{
      bus.emit('setChildStr','我是兄弟组件传过来的值')
    }
    return {
      Str,setChildStr
    }
  }
}
</script>

vue3.x 兄弟组件传值总结
在这两个文件里面 分别引入 vue3-eventbus 这个插件 

传递方：
`bus.emit('传递名称',传递的值)`

接收方： 
`bus.on('传递名称',(传递的值)=>{要进行的操作})`

10.computed、methods、watch的区别

1.computed vs methods
computed有缓存,methods没有缓存
computed定义的方法如果返回值没有发生变化无论你调用多少次都只执行一次
methods多次调用多次执行

2.computed vs watch
watch只有当数据发生改变才能监听到
computed 可以计算某一个属性的改变,如果某一个值改变了,计算属性会监听到进行返回
watch 是当监听到数据改变了才会执行

11.props data 优先级

优先级取决于源码
props-->methods-->data-->computed-->watch