zoukankan      html  css  js  c++  java
  • 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)
            }
        }
    }
    
    
    
  • 相关阅读:
    软件测试培训第9天
    软件培训第8天
    软件测试培训第7天
    软件测试培训第5天
    软件测试培训第6天
    软件测试培训第4天
    软件测试培训第3天
    MySQL复杂用法
    MySQL的基本语法
    VM虚拟机上安装Redhat
  • 原文地址:https://www.cnblogs.com/loveliang/p/13679396.html
Copyright © 2011-2022 走看看