vue面试题

1、介绍一下vuex

vuex是vue.js应用的一个状态管理工具；

state：用于保存我们应用的状态。

2、v-show与v-if的区别和使用场景

区别：

   1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件 为假，元素会被销毁）；

    2.  v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

    3. v-if 有更高的切换开销，v-show 切换开销小；

    4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有

    5. v-if 可以搭配 template 使用，而 v-show 不行

使用场景：

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

3、computed和watch的区别和运用场景？

computed：是计算属性，依赖其他属性，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值；

watch：更多的是观察的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

4、谈谈你对keep-alive的了解？

keep-alive是vue的内置的一个组件，可以使被包含的组件保留状态，避免重新渲染；

其有以下特性：

• 一般结合路由和动态组件一起使用，用于缓存组件；

5、vue组件间通信有哪几种方式？

父子组件通信、隔代组件通信、兄弟组件通信；

（1）props / $emit 适用于父子组件通信

6、vue如何实现数据双向绑定的？

指数据变化更新视图，视图变化更新数据

7、vue 父子组件相互传值

// 父组件引用自组件
import Uploader from "@/components/uploader/index";

<Bacound ref="newslast" :parentNum="num" />


exrport default {
    data() {
        return {
            num: 0
        }
    }
}

// 组件称为子组件，当前页面为父组件
// 子组件给父组件传值

// 子组件给父组件传值
this.$emit('change', this.skip);

// 父组件给子组件传值
// 绑定一个属性parentNum，传num的值，子组件用props 接收


// 子组件给父组件传事件
this.$emit('closedel');
// 父组件使用

  // ref属性 用来向 子组件传事件 
  this.$refs.newslast.getList()