精华内容
下载资源
问答
  • 前端Vuex面试题

    千次阅读 2020-09-03 21:59:51
    什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态,而更改状态的唯一方法就是在mutaions里修改state,actions不能直接修改state vuex的组成结构示意图: ...

    什么是Vuex?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态,而更改状态的唯一方法就是在mutaions里修改state,actions不能直接修改state

    vuex的组成结构示意图:

    Vuex的特点是把数据单独隔离,形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出,其中action作为数据的输入,state作为数据的输出。如下图:

    在这里插入图片描述

    store:

    vuex 中最关键的是store对象,这是vuex的核心。可以说,vuex这个插件其实就是一个store对象,每个vue应用仅且仅有一个store对象。

    创建store:

    const store = new Vuex.Store({...});
    

    store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象:

    1. state => 基本数据
    2. getters =>state的计算属性
    3. mutations => 提交更改数据的方法,同步!
    4. actions => 把方法提交到mutation,异步操作
    5. modules => 将store模块化—当store很大的时候,分成模块,方便管理
    关于store,需要先记住两点:
    • \1. store 中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态发生了改变,那么相应的组件也会得到更新;
    • \2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

    一个完整的store的结构:

    const store = new Vuex.Store({
      state: {
        // 存放状态
      },
      getters: {
        // state的计算属性
      },
      mutations: {
        // 更改state中状态的逻辑,同步操作
      },
      actions: {
        // 提交mutation,异步操作
      },
      // 如果将store分成一个个的模块的话,则需要用到modules。
       //然后在每一个module中写state, getters, mutations, actions等。
      modules: {
        a: moduleA,
        b: moduleB,
        // ...
      }
    });
    

    语法糖辅助函数:

    mapState-----mapActions----mapMutations----- mapGetters

    当一个组件获取多种状态的时候,为了方便可以用语法糖辅助函数

    mapState和mapGetter的使用只能在computed计算属性中,
    mapMutations和mapActions使用的时候只能在methods中调用否则报错

    import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    
    
    computed:{
        ...mapState({
            a:"a",   //  "a" 指的是state中的a
            b:"b"
        }),
        ...mapGetters({
            Val:'newVal' // 可以重新命名
        })
    }
    
    methods:{
        ...mapActions({
            getSync:'getSyncNum'
        })
    
        ...mapMutations({
            increament:"increament"
        })
    }
    
    
    
    template
    
    {{a}}  {{b}}
    
    {{getSync(1)}}
    
    <button @click='increament(1)'></button>
    
    
    
    
    什么时候用vuex:

    当项目遇到以下两种场景时

    • 多个组件依赖于同一状态时。
    • 来自不同组件的行为需要变更同一状态。
    展开全文
  • vuex 面试题

    万次阅读 2019-05-14 03:25:51
    1、有哪几种属性 有 5 种,分别是 state、getter、mutation、action、module state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步!... 模块化Vuex 2、vu...
    1、有哪几种属性
    
    有 5 种,分别是 state、getter、mutation、action、module
    state => 基本数据 
    getters => 从基本数据派生的数据 
    mutations => 提交更改数据的方法,同步! 
    actions => 像一个装饰器,包裹mutations,使之可以异步。 
    modules => 模块化Vuex
    
    2、vuex 的 store 特性是什么
    
    (1) vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data
    
    (2) state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新
    
    (3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
    
    3、 vuex 的 getter 特性是什么
    
    (1) getter 可以对 state 进行计算操作,它就是 store 的计算属性
    
    (2) 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用
    
    (3) 如果一个状态只在一个组件内使用,是可以不用 getters
    
    4、vuex 的 mutation 特性是什么
    
    action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态
    
    action 可以包含任意异步操作
    
    5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中
    
    如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里
    
    如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回
    
    6、不用 vuex 会带来什么问题
    
    可维护性会下降,你要修改数据,你得维护3个地方
    
    可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的
    
    增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背
    复制代码
    展开全文
  • 关于Vue的各类面试题 下面列举一些题目 什么是MVVM? mvvm 和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合? vue的优点是什么? 组件之间的传值? vue.cli中怎样使用自定义的组件?有遇到过哪些问题...
  • 浅析Vuex及相关面试题答案

    千次阅读 2020-04-29 07:30:00
    自从学习了Vue框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少的的疑惑或不解,这篇文章就...

    自从学习了Vue框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少的的疑惑或不解,这篇文章就针对vuex原理进行研究,希望能帮助到大家,如果有不准确的地方,大家多多指教。。。

    Vuex是什么?

    Vuex是专门为Vue服务,用于管理页面的数据状态、提供统一数据操作的生态系统,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据。其中vuex类似的 还是有Redux,Redux大多用于React,针对Redux后续在做补充,现在就让我们好好了解下Vuex到底是个啥东西?

    概念理解性(必读)

    Vuex采用MVC模式中的Model层,规定所有的数据必须通过action--->mutaion--->state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理,可以让复杂的组件交互变的简单清晰,同时在调试时也可以通过DEVtools去查看状态。

    在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用,此时父子组件的传值,子父组件间的传值,兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props(父传子)commit(子传父)兄弟间也可以用localstorage和sessionstorage。但是这种方式在项目开发中带来的问题比他解决的问题(难管理,难维护,代码复杂,安全性低)更多。vuex的诞生也是为了解决这些问题,从而大大提高我们vue项目的开发效率。

    抛出问题 使用Vuex只需执行 Vue.use(Vuex),并在Vue的配置中传入一个store对象的示例,store是如何实现注入的?state内部是如何实现支持模块配置和模块嵌套的?在执行dispatch触发action(commit同理)的时候,只需传入(type, payload),action执行函数中第一个参数store从哪里获取的?如何区分state是外部直接修改,还是通过mutation方法修改的?调试时的“时空穿梭”功能是如何实现的?

    vue和vuex的区别与联系

    看一下这个vue响应式的例子,vue中的data 、methods、computed,可以实现响应式。

    视图通过点击事件,触发methods中的increment方法,可以更改state中count的值,一旦count值发生变化,computed中的函数能够把getCount更新到视图。

    <div id="app">
            <button @click="increment"></button>
            {{getcount}}
        </app>
        new Vue({
            el: "#app",
            // state
            data () {
             return {
                count: 0
             }
            },
             // view
            computed: {
                getCount(){
                    return this.count
                }
            },
            // actions
            methods: {
             increment () {
                this.count++
             }
            },
        })
    

    那么vuex又和vue这个响应式的例子有什么关系呢?我们可以用vuex实现和vue同样的响应式功能。其实他们原理时一样的,vuex中也有四个属性值:state、getters、mutations、actions。。在没有actions的情况下:数据:state --> data 获取数据:getters --> computed 更改数据:mutations --> methods

    视图通过点击事件,触发mutations中方法,可以更改state中的数据,一旦state数据发生更改,getters把数据反映到视图。

    那么actions,可以理解处理异步,而单纯多加的一层。

    既然提到了mutions actions这时候 就不得不提 commit dispatch,这两个有什么作用呢?

    在vue例子中,通过click事件,触发methods中的方法。当存在异步时,而在vuex中需要dispatch来触发actions中的方法,actions中的commit可以触发mutations中的方法。同步,则直接在组件中commit触发vuex中mutations中的方法。

    下面我们看下vuex中能像vue中实现改变状态,更新视图的功能:

    Vuex.js

    const store =  new Vuex.Store({
        
        state: {
            count: 0
        },
        
        //state的值只能通过mutations来修改
        mutations: {
            increment(state) {
                state.count++
            }
        },
        
       //this.$store.commit("increment")触发mutations中函数"increment"
        actions: {
            increment({commit}) {
                 commit("increment"); //this.$store.commit("increment")
            }
         
        },
        
       //通过getter中的方法来获取state值
        getters: {
            getCount(state) {
                return state.count
            }
        }
        })
         
        export default store
    
    

    App.vue

        <template>
        <div id="app">
                <button @click="increment">增加</button>
                <!-- 有时候不能直接 强制使用store里面的状态 this.$store.state.count -->
                {{this.$store.getters.getCount}}
        </div>
        </template>
         
        <script>
        export default {
            methods: {
            increment(){
                    //this.$store.dispatch("increment")触发actions函数"increment"
                    this.$store.dispatch("increment")
                }
            }
        }
        </script>
    
    

    现在我们已经了解vuex能实现和像vue双向数据绑定--更新试图的功能,下面我们重点说说vuex源码的实现:

    store注入组件install方法

    解答问题:vuex的store是如何注入到组件中的?

    首先使用vuex,需要安装插件:

    Vue.use(Vuex); // vue的插件机制,安装vuex插件
    
    

    当ues(Vuex)时候,会调用vuex中的install方法,装在vuex! 下面时install的核心源码:

    Vue.mixin({
            beforeCreate() {
                if (this.$options && this.$options.store) {
                    //找到根组件 main 上面挂一个$store
                    this.$store = this.$options.store
                    // console.log(this.$store);
    
                } else {
                    //非根组件指向其父组件的$store
                    this.$store = this.$parent && this.$parent.$store
                }
            }
        })
    

    可见,store注入 vue的实例组件的方式,是通过vue的 mixin机制,借助vue组件的生命周期 钩子 beforeCreate 完成的。即 每个vue组件实例化过程中,会在 beforeCreate 钩子前调用 vuexInit 方法。

    解答问题:vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢?

    new vue实现双向数据绑定:

            this._s = new Vue({
                data: {
                    // 只有data中的数据才是响应式
                    state: options.state
                }
            })
    

    getters实现

     //实现getters原理
            let getters = options.getters || {}
            // console.log(getters);
            // this.getters = getters; //不是直接挂载到 getters上 这样只会拿到整个 函数体
            this.getters = {};
            // console.log(Object.keys(getters))  // ["myAge","myName"]
            Object.keys(getters).forEach((getterName) => {
                // console.log(getterName)  // myAge
                // 将getterName 放到this.getters = {}中
                // console.log(this.state);
                Object.defineProperty(this.getters, getterName, {
                    // 当你要获取getterName(myAge)会自动调用get方法
                    // 箭头函数中没有this
                    get: () => {
                        return getters[getterName](this.state)
                    }
                })
            })
    

    从上面源码,我们可以看出Vuex的state状态是响应式,是借助vue的data是响应式,将state存入vue实例组件的data中;Vuex的getters则是借助vue的计算属性computed实现数据实时监听。

    mutations实现

    
    let mutations = options.mutations || {}
            // console.log(mutations);
            this.mutations = {};
            Object.keys(mutations).forEach(mutationName=>{
                // console.log(mutationName);
                
                this.mutations[mutationName] = (payload) =>{
                    this.mutations[mutationName](this.state,payload)
                }
            })
    

    实现同步加:动态效果图:

    actions实现

    // actions的原理
            let actions = options.actions || {}
            this.actions = {};
            forEach(actions,(actionName,value)=>{
                this.actions[actionName] = (payload)=>{
                    value(this,payload)
                }
            })
    

    commit dispatch的实现

        commit(type,payload){
            this.mutations[type](payload)
        }
    
        // type是actions的类型
        dispatch=(type,payload)=>{
            this.actions[type](payload)
        }
    

    原理总结:

    Vuex是通过全局注入store对象,来实现组件间的状态共享。在大型复杂的项目中(多级组件嵌套),需要实现一个组件更改某个数据,多个组件自动获取更改后的数据进行业务逻辑处理,这时候使用vuex比较合适。假如只是多个组件间传递数据,使用vuex未免有点大材小用,其实只用使用组件间常用的通信方法即可。

    常见面试题:

    1、vuex有哪几种属性?
    答:有五种,分别是 State、 Getter、Mutation 、Action、 Module

    2、vuex的State特性是?
    答:
    一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
    二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
    三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

    3、vuex的Getter特性是?
    答:
    一、getters 可以对State进行计算操作,它就是Store的计算属性
    二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
    三、 如果一个状态只在一个组件内使用,是可以不用getters

    4、vuex的Mutation特性是?
    答:
    一、Action 类似于 mutation,不同在于:
    二、Action 提交的是 mutation,而不是直接变更状态。
    三、Action 可以包含任意异步操作

    5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
    答:
    一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。

    6、不用Vuex会带来什么问题?
    答:

    一、可维护性会下降,你要想修改数据,你得维护三个地方

    二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

    三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。

    但兄弟组件有大量通信的,建议一定要用,不管大项目和小项目,因为这样会省很多事

    参考:https://www.cnblogs.com/hjson/p/10500770.html

    展开全文
  • VUE之VUEX常见面试题

    千次阅读 2021-01-15 10:18:42
    1.vuex是什么?怎么使用?哪种功能场景使用它? 答:vue框架中状态管理。在main.js引入store,注入。 新建了一个目录store.js,….. export 。 解决的问题:多个视图依赖同一个状态来自不同视图的行为需要变更...

    1.vuex是什么?怎么使用?哪种功能场景使用它?

    答:vue框架中状态管理。在main.js引入store,注入。

    新建了一个目录store.js,….. export 。

    解决的问题:多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用

    2.vuex有哪几种属性?

    答:有五种,分别是 State、 Getter、Mutation 、Action、 Module

    state:存放公共数据的地方;

    getter:获取根据业务场景处理返回的数据;

    mutations:唯一修改state的方法,修改过程是同步的;

    action:异步处理,通过分发操作触发mutation;

    module:将store模块分割,减少代码臃肿;

    3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

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

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

    4.页面刷新后vuex的state数据丢失怎么解决?

    就是放在localStorage 或者就是sessionStorage ,或者借用辅助插vuex-persistedstate。

    5.使用vuex的优势是什么?

    其实vuex中的所有功能都能够通过其他的方式进行实现,只不过vuex对这些方法进行了整合处理,使用起来更加便捷,同时也便于维护。

    附:

    VUE最全面试题:https://blog.csdn.net/qq_41161982/article/details/112647861

    VUE之生命周期面试题:https://blog.csdn.net/qq_41161982/article/details/112649973

    VUE之vue-router面试题:https://blog.csdn.net/qq_41161982/article/details/112648684

    展开全文
  • Vuex状态管理模式的面试题及答案

    万次阅读 2018-07-27 15:24:01
    1、vuex有哪几种属性? 答:有五种,分别是 State、 Getter、Mutation 、Action、 Module 1.1、state  state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue....
  • vuex的常见面试题

    千次阅读 多人点赞 2021-09-29 14:17:17
    1.vuex是什么?怎么使用?哪种功能场景使用它? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。(公共数据库) 当项目遇到以下两种场景时 1. 多个组件依赖于同一状态时。 2. 来自不同组件的行为...
  • vue常见面试题(附带答案)超实用!!建议收藏!!一、vue常见面试题二、生命周期函数面试题三、vue路由面试题四、vuex常见面试题 一、vue常见面试题 1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的...
  • 面试必备:2019Vue经典面试题总结(含答案) 一、什么是MVVM? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件...
  • 2021 前端面试题及答案

    万次阅读 多人点赞 2021-03-04 22:17:23
    跨域 18.vue生命周期 19.vue双向绑定 20.vue组件通讯 21.vuex 22.vue路由 23.vuex的使用场景和全局变量的区别 24.rem、em、px、vh,vw react 1.当你调用 setState 的时候,发生了什么事? 将传递给 setState 的...
  • 解析:①全局方法(推荐) Vue.prototype.msg = function(msg){ return msg.replace("\n"," ") } ②computed方法 computed:{ content:function(msg){ return msg... 2020Web前端开发面试题及答案解析 举报/反馈
  • Vue、Vuex、Vue-Router 面试题大全

    千次阅读 多人点赞 2020-12-17 20:47:33
    Vue面试题 Vue 1.请详细说下你对 vue 生命周期的理解? 总共分为 8 个阶段创建前 / 后,载入前 / 后,更新前 / 后,销毁前 / 后。 创建前 / 后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 和数据对象 data 都...
  • 由于本人使用的技术是以vue为主,所以面试官相应的会以vue为开始提问 Vue生命周期 答:Vue有四个生命周期,分别是beforeCreatecreated (创建前后)beforeMountmounted(挂载前后)beforeUpdateupdated (更新前后)...
  • VUE面试题汇总(十)

    千次阅读 2021-12-12 16:34:20
    VUE面试题汇总(一) VUE面试题汇总(二) VUE面试题汇总(三) VUE面试题汇总(四) VUE面试题汇总(五) VUE面试题汇总(六) VUE面试题汇总(七) VUE面试题汇总(八) VUE面试题汇总(九) 91. 发布-订阅模式 ...
  • 2020 web前端面试题及答案大全

    万次阅读 多人点赞 2020-05-12 13:43:50
    css相关 1. 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高,垂直 4.表格,center,middle;...5.display:table-cell;...7.绝对定位,上下左右全0,margin:auto ...9.IE6,IE7:给父元素设一个font-size...
  • 跨域 18.vue生命周期 19.vue双向绑定 20.vue组件通讯 21.vuex 22.vue路由 23.vuex的使用场景和全局变量的区别 24.rem、em、px、vh,vw react 1.当你调用 setState 的时候,发生了什么事? 将传递给 setState 的...
  • 2021前端必问面试题及答案

    万次阅读 多人点赞 2020-09-17 19:53:47
    web前端面试题【持续更新】js基础1.原型链和继承2.浅拷贝和深拷贝3.闭包4.事件委托5.this指向,call/apply/bind,回调函数6.数组的常用操作7.promise8.set和weakset,map和weakmap9.let和const10.解构赋值11.typeof...
  • 2021最全面、最详细web前端面试题及答案总结

    万次阅读 多人点赞 2021-02-01 09:34:00
    2021最全面、最详细web前端面试题及答案总结 总结不易,希望可以帮助到即将面试或还在学习中的web前端小伙伴,祝面试顺利,拿高薪! 本章是HTML考点的⾮重难点,因此我们采⽤简略回答的⽅式进⾏撰写,所以不会有太...
  • 总结vue前端面试题

    2020-10-27 15:52:46
    本人总结前端vue面试,包含vue的基础,以及vue的高级和组件话开发,和vue的2.0 版本,包含vue指令,插槽路由vuex
  • 2020年Web前端面试题及答案----Vue篇

    千次阅读 2020-12-14 17:13:32
    那么今天给大家带来vue的常见面试问题,如不详细或不正确的地方请大家在评论区补充纠正。 什么是MVVM? MVVM分为Model、View、ViewModel三者。 Model 代表数据模型,数据和业务逻辑都在Model层中定义; View 代表UI...
  • 2021年Vue最常见的面试题以及答案(面试必过)

    万次阅读 多人点赞 2020-12-15 14:39:41
    Vue常见面试题 Vue的优点 说说你对SPA单页面的理解,它的优缺点分别是什么? SPA首屏加载速度慢的怎么解决? Vue初始化过程中(new Vue(options))都做了什么? 对MVVM的理解? Vue数据双向绑定原理 Vue的响应式原理...
  • 前端面试常见面试题及答案h5新特性ES6新特性vuex的理解,组成以及原理介绍前端常用框架 h5新特性 html5总的来说比html4多了十个新特性,但其不支持ie8ie8以下版本的浏览器 一、语义标签 二、增强型表单 三、视频和...
  • vue前端框架面试问题汇总,附答案

    万次阅读 多人点赞 2018-05-15 11:34:04
    ps:16题答案同样适合” vue data是怎么实现的?” 此面试题 。   17、请详细说下你对vue生命周期的理解? 答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。 创建前/后:  在beforeCreated阶段,...
  • 29 2.16 、解释下CSS3的flexbox(弹性盒布局模型)适用场景.. 29 2.17 、line-height 三种赋值方式有何区别?... 30 2.18 、margin和padding分别适合什么场景使用?.. 30 2.19 、元素竖向的百分比设定是相对于...
  • 2021Vue.js面试题汇总及答案【全网最全 建议收藏】

    万次阅读 多人点赞 2021-10-09 13:53:34
    文章目录前言一、Vue.js基本问题1.1.Vue 响应式原理1.2.Vue.js 的...之前博主有分享过Vue学习由浅到深的文章(Vue学习之从入门到神经) 现在Vue学的好的话马内真的不必后端差 所以今天博主就汇总下有关Vue的相关面试题

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,451
精华内容 580
热门标签
关键字:

vuex面试题及答案

vue 订阅