vue面试题（3）

1.$nextTick是什么？

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新

nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，

则可以在回调中获取更新后的 DOM。

2.v-for key的作用

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，

你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

3.vue如何获取dom

<div ref="test"></div>

const dom = this.$refs.test

4.assets和static的区别

这两个都是用来存放项目中所使用的静态资源文件。

两者的区别：

assets中的文件在运行npm run build的时候会打包，简单来说就是会被压缩体积，

代码格式化之类的。打包之后也会放到static中。

static中的文件则不会被打包。

建议：将图片等未处理的文件放在assets中，打包减少体积。

而对于第三方引入的一些资源文件如iconfont.css等可以放在static中，因为这些文件已经经过处理了。

5.vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在

还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样

首先：在css里加上以下代码

[v-cloak] {
    display: none;
}

如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

但有时添加完毕后仍有部分变量会显示，这是怎么回事呢？通过控制台查看，

原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，我的处理方案是添加 !important ，

[v-cloak] {
  display:none !important;
}

6.ajax请求代码应该写在组件的methods中还是vuex的actions中

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

7.从vuex中获取的数据能直接更改吗？

从vuex中取的数据，不能直接更改，需要浅拷贝对象之后更改，否则报错；

8.vuex中的数据在页面刷新后数据消失

用sessionstorage 或者 localstorage 存储数据

8.怎么在组件中批量使用Vuex的getter属性

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

9.mutation和action有什么区别?

1.action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态

2.action 可以包含任意异步操作。mutation只能是同步操作

3.提交方式不同

action 是用this.store.dispatch('ACTION_NAME',data)来提交。

mutation是用this.$store.commit('SET_NUMBER',10)来提交

4.接收参数不同，mutation第一个参数是state，而action第一个参数是context.

10.在v-model上怎么用Vuex中state的值？

需要通过computed计算属性来转换。

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}