vue整理面试题

1. v-if/v-show的区别?

v-if="表达式" 当表达式值true，v-if所作用的元素显示 否则隐藏

v-show="表达式" 当表达式值true，v-if所作用的元素显示 否则隐藏

理解：

•   v-if控制元素显示与隐藏，通过js创建dom元素或删除元素
•   v-show通过css的display显示与隐藏
•   频繁切换元素显示与隐藏用v-show,其余可以用v-if

2. $route和router作用?

route是查看路由信息

router提供一些方法，是路由跳转的

理解：$route对象是Vue.js中的一个全局对象，用于获取当前路由的信息，通过访问$route对象，你可以获取当前页面的路由信息并在组件中进行相应的处理。

router实例是Vue.js中的路由器实例，用于管理应用程序的路由，通过创建router实例，你可以配置应用程序的路由，并在组件中使用路由导航功能。

3. $nextTick有什么用?

作用：DOM更新完毕后执行回调函数，是处理异步的。

原理promise.then->Mutation0bserver->setImmdiate(宏任务)- >setTimeout

理解：用于在下次DOM更新循环结束之后执行回调函数。它的作用是在Vue实例更新DOM后，执行一些需要在DOM更新后进行的操作。

注意：$nextTick是一个异步方法，它会将回调函数放入一个队列中，在下次DOM更新循环时执行。这意味着如果你在同一个事件循环中多次调用$nextTick，它们的回调函数将会被合并为一个，只会执行一次。

4.vue生命周期

组件生命周期--------组件从创建到销毁

创建前的函数 beforeCreate() { }

创建后的函数  created()拿到数据

挂载前的函数 beforeMount()

挂载后的函数 mounted()拿到dom元素

更新前的函数 beforeUpdate()

更新后的函数   updated()

销毁前的函数   beforeDestory()

销毁后的函数   destoryed()数据清理

页面一打开执行的生命周期：

beforeCreate->created->beforeMount->mounted

5.组件通信方式

父传子

• 父组件内，在自组件标签上， 写属性

• 子组件内，通过props属性接收

子传父

• 子组件内， 通过: $emit(“自定义事件”,参数，参数2)

• 父组件内，子组件标签上， : @自定义事件名="函数式"

兄弟

通过事件总线(everbus)

 //通过new创建evenbus事件总线，然后导出
// 创建事件总线：
//创建eventbus 事件总线--个vue实例对象
import Vue from ' vue
const vm = new Vue( )
//导出vm
export default vm

//导入事件总线import Vm '.from./utils'
    兄：methods: {
    handleClick () {
      // 使用数据方 通过$on订阅
      vm.$on('useMsg', (data) => {
        console.log(data)
      })
    }

//导入事件总线import Vm .from './utils'  
    弟：methods: {
    handleClick () {
      vm.$emit('useMsg', this.msg)
    }
  },

依赖注入(祖先)

export default {
//提供给后代组件的数据
provide () {
return {
    money:this.money
}
},
孙子： <script>
           export default {
          inject: ['money']
          }
       </script>

6.v-model

1、用在表单元素或组件中
2、用在表单元素上
 文本框或密码框相当于:value="数据"+@input="数据=$event. target. value'"
 复选框:checked="数据" +@change="数据=$event. target. checked"
 下拉列表:selected="数据" +@change="数据= $event. target. selected"
3、用在组件实现父子数据双向绑定
 :value="数据" + @input=" 数据=$event"

7.sync修饰符

是一个语法糖,用于实现父子组件之间的双向数据绑定。

理解：父组件向子组件传递数据是单向的，即父组件的数据通过props传递给子组件，在子组件中只能读取这些数据，不能直接修改。如果需要在子组件中修改父组件的数据，就需要使用sync修饰符。

:属性.sync="数据"  相当于  :属性="数据" + @update:属性="数据=$event"

8.插槽

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

1. 好处：组件的内容结构可定制 用slot插槽进行占位

2. 语法

//子组件中通过slot进行占位
<template>
     <div>
        <header>
           <slot></slot>
               //这里面就是Hello
              //如果父亲传值，就是父亲里的，如果父亲和自己都有，优先用父亲的
       </header>
    </div>
</template>
//父组件要在双标签内写，在子组件标签嵌套的内容就会被渲染到slot地方
<template>
    <div>
       <base-layout>
        <h1>He1llo</h1>
      </base-layout>
   </div>
</ template>

如果右三个插槽，h1里的Hello都会给每个，所以我们不想要的这种效果，所以引来了具名插槽

default是默认插槽

总结：Hello默认给没有名字或defalut插槽

具名插槽

<template v-slot:dalete></template>
	等同于：
 <template #dalete></template>

<slot name="header"></slot>
<!-- 缩写写法 -->
<slot name="header"/>