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)
}
}
}