精华内容
下载资源
问答
  • 前端面试题 Vuex 的基础和应用方法

    多人点赞 2021-09-13 20:05:59
    一,Vuex 是什么?有什么用 Vuex是一个辅助于 Vue 的状态数据管理库,用于处理Vue开发过程中的重复数据过于冗余无意义从而拖累代码运行效率的一种方案,可以将在同一个入口文件管理下的所有重复的数据、计算、函数...

    目录

    一,Vuex 是什么?有什么用

    二,Vuex 的特点

    三,Vuex 中的数据及函数该如何定义

    1.基础数据 state

    2.同步函数 mutations

    3.异步函数 action

    4.计算函数 getters

    四,组件访问 Vuex 各项数据函数的方法

    1. state 的调用

    2. mutations 的调用

    3. actions 的调用

    4. getters 的调用

    // 分模块   调用方法


    一,Vuex 是什么?有什么用

            Vuex是一个辅助于 Vue 的状态数据管理库,用于处理Vue开发过程中的重复数据过于冗余无意义从而拖累代码运行效率的一种方案,可以将在同一个入口文件管理下的所有重复的数据、计算、函数定义到一个  store.js(叫什么名字都可以的哈) 的文件中,并且所有受到同一个入口文件管理的组件文件都可以直接访问到其中定义的

    数据。

    二,Vuex 的特点

            Vuex 的一个最大特点就是他是一个公共响应式数据 , 就是说当其中的数据改变时,那么调用此数据的组件也会随之进行更新操作

            例如:token属性是我已经在不同文件中获取的同一个Vuex 属性

            那么我在 A.vue 文件中 console.log(token) 与在  B.vue 中的 console.log(token) 打印出来的是同一个值,并且如果在其他文件中对直接 token 进行数据修改,其他的文件会同时进行更新token的数据

            比如在 C.vue 中让token的值改为了 "我不是token,是个人" ,那么在 A.vue 和 B.vue 文件中打印出来的token都会是 : "我不是token,是个人"

    三,Vuex 中的数据及函数该如何定义

            Vuex主要分为四部分,分别是:基础数据 state, 同步函数 mutations异步函数 actions计算属性 getters

    1.基础数据 state

            类似于data中定义的数据,字符串、数字、函数、对象等等数据都在这里定义,用来储存公共共享的数据源,此处定义的数据仅可以被 mutations 更改

            (1) 数据互通

            第一种定义方法可以在一个组件改变Vuex中定义的数据源时,那么其他复用过的同一个数据的组件也会同时进行改变更新 ,这是因为组件复用的时候是 以对象的形式进行声明, 引用类型数据会在堆区开拓空间,并在栈区存入一个堆区的地址,所以在改变数据的时候 会直接通过栈区地址找到堆区数据进行更改 其他组件进行获取数据时就会通过栈区地址获取同一个数据

            因此就可以使一个数据成为一个所有组件都可以访问复用的公共数据源,但因为复杂数据类型的特点,只开辟了一片空间,大大节省了性能和内存

      第一种注册方式如下:

    
            // 注册vuex  公共资源
            const store = new Vuex.Store({
                // state:   储存共享的数据源,仅可以被 mutations 更改
                state: {
                    text: '我想做个好人',
                    obj:{
                        text:'对不起,我是警察'
                    }
                }
            })
    

            如上,在注册好的vuex中以对象的形式声明 state,并且以键值对的形式进行声明

            (2) 数据复用互不影响

            但是如果vuex的数据在需要多次复用,但是用的时候又需要数据相对独立,不得互相影响的时候,此时就可以按照如下写法进行声明,

     state: () => ({
        // vuex中的模块也是可能进行复用的
        // 为了复用的时候 互相不影响 采用同样的函数执行 return对象的形式
        token: getToken() || '',
        userInfo: {}
      })

    2.同步函数 mutations

            唯一可以同步修改 state的属性的地方,所有同步改动 state 中数据的操作,都要经过 mutations 中定义的函数进行间接操作,例如我想将 state中的num改动为10,那么我不可以直接操作改动num,需要经过如图的 changeNum 这个函数进行操作

    // 注册vuex  公共资源
    const store = new Vuex.Store({
        // state:   储存共享的数据源,仅可以被 mutations 更改
        state: {
            num: 0
        },
    
        // mutations:  同步函数,`唯一` 可以 `同步` 修改 state的 地方
        mutations: {
            // 定义的同步函数
            changeNum( state , '形参' ) { 
                state.num = 10
            }
        }
    })

            在 mutations 中定义的所有函数的形参中,第一个参数为 state 对象,可以通过 state 访问到其中的数据,从第二个参数开始往后,所有的形参都为调用函数所传传递的参数,用以方便操作函数。

            mutations 中所定义的函数为同步函数,即被调用则立即直接被主线程执行,不会进入任务队列,在工作中主要负责的功能就是操作 state 中的数据。

            而在当前 Vuex 中要想访问到 mutations 中的方法,需要通过 commit 来查找到其中的同步函数名,具体操作请看 异步函数 action

    3.异步函数 action

            action 是一个异步函数书写的位置,但是涉及到控制 state 中的数据时,不可以直接进行操作改动,必须通过调用 mutations 中的方法来进行间接改动

            例如: state 中定义了 num = 1, 如果我想让他在 3秒 后变为 10, 就需要如图操作

    // 注册vuex  公共资源
    const store = new Vuex.Store({
        // state:   储存共享的数据源,仅可以被 mutations 更改
        state: {
            num: 1
        },
    
        // mutations:  同步函数,`唯一` 可以 `同步` 修改 state的 地方
        mutations: {
            numChange(state,newNum) { 
                state.num = newNum
            }
        },
    
        // actions: 异步函数,异步的修改 state,但其不能直接改,最终必须 commit 到指定 mutations 中
        actions: {
            setNum(store) {
                setTimeout(() => {
                    // commit 用来访问 mutations 中的同步函数
                    store.commit('numChange',10)
                }, 3000);
            }
        }
    })
    

            如图,在 action 中, 定义了一个异步函数为 setNum,他的第一个参数默认为当前 Vuex 根对象,通过 store 中的 commit 可以访问到 mutations 中定义的同步函数,而异步的操作则在当前函数内进行编写, 更改数值的时候进行调用

            格式为 : store.commit("同步函数名",传递的参数)

            第一个参数默认为根对象,之后的参数都为传递的实参

    4.计算函数 getters

            getters是 Vuex 的计算属性,以 state数据源 为数据计算而得到结果,类似computed、优势带缓存

            定义方法如下:

            格式为:  return  计算结果

            第一个参数默认为 state

    const store = new Vuex.Store({
        // state:   储存共享的数据源,仅可以被 mutations 同步更改
        state: {
            num: 50
        },
    
        // getters: vuex 的计算属性,数据源 计算而得到,类似computed、优势带缓存
        getters: {
            changeNum(state) {
                const newNum = state.num + 10
                return  newNum 
            }
        }
    })

    四,组件访问 Vuex 各项数据函数的方法

    首先要在入口文件中 挂上Vuex
    import Vuex from 'vuex'
    Vue.use(Vuex)

    之后在需要使用的组件中进行调用,调用方法分为 直接调用映射使用

            state、getters 都是 映射 在 组件 的 computed 中

            mutations、actions  都是 映射 在 组件 的 methods 中

    1. state 的调用

    // 直接调用:

    this.$store.state.变量名

    // 映射使用         mapState 

    映射分为对象和数组,对象可以更改映射在当前页面的属性名

    import { mapState } from 'vuex'
    export default {
        computed: {
            ...mapState(['state变量名']),// 不能改名
            ...mapState({ // 能改名
                留在原地计算属性名: 'state中变量名'
            })
        }
    }

    2. mutations 的调用

    // 直接调用:

     this.$store.commit('mutations中的函数名', 传值)

    // 映射使用        mapMutations

    import { mapMutations } from 'vuex'
    export default {
        methods: {
            ...mapMutations(['mutations中函数名'])
        }
    }

    3. actions 的调用

    // 直接调用:

    this.$store.dispatch('actions中的函数名', 传值)

    // 映射使用        mapActions

    import { mapActions } from 'vuex'
    export default {
        methods: {
            ...mapActions(['actions函数名'])
        }
    }

    4. getters 的调用

    // 直接调用

    this.$store.getters.计算属性的名字

    // 映射使用        mapGetters

    import { mapGetters } from 'vuex'
    export default {
        computed: {
            ...mapGetters(['getters中计算属性的名字'])
        }
    }

    // 分模块   调用方法

    // state
    this.$store.state.模块名.变量名
    ...mapState("模块名", ['变量名'])
    
    // mutations
    this.$store.commit("模块名/mutations里的函数名", 具体值)
    ...mapMutations("模块名", ['mutations里方法名'])
    
    // actions
    this.$store.dispatch("模块名/actions里的函数名", 具体值)
    ...mapActions("模块名", ['actions里方法名'])
    
    // getters
    this.$store.getters['模块名/计算属性名']
    ...mapGetters("模块名", ['getters里计算属性名'])
    

    展开全文
  • 前端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:

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

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

    2020-10-27 15:52:46
    本人总结前端vue面试,包含vue的基础,以及vue的高级和组件话开发,和vue的2.0 版本,包含vue指令,插槽路由vuex
  • 浅析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

    展开全文
  • VueJs(前端面试题整合)

    千次阅读 多人点赞 2020-12-10 09:24:24
    反观Proxy就没以上的问题,原生支持监听数组变化,并且可以直接对整个对象进行拦截,所以在Vue3.0中使用Proxy替换 Obeject.defineProperty 简述路由原理 前端路由就是监听 URL 的变化,然后匹配路由规则, 显示相应...

    vue和react的区别

    • React严格上只针对MVC的view层,Vue则是MVVM模式
    • virtual(虚拟) DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
    • 组件写法不一样,React推荐的做法是 JSX + inline style,也就是把HTML和CSS全都写进JavaScript了,即'all in js';Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件
    • 数据绑定:vue实现了数据的双向绑定,react数据流动是单向的
    • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

    redux和vuex的区别

    • vuex是redux的基础上进行改变,对仓库的管理更加明确
    • 使用mutation来替换redux中的reducer
    • vuex有自动渲染的功能,所以不需要更新
    • vuex是专门为vue提供的状态管理工具,而redux是一个泛用的状态管理框架

    vuex的实现原理

    Vuex的状态存储是响应式的,当Vue组件从store中读取状态时,若store中状态发生改变,响应的组件也会得到更新状态。但不能直接改变state,必须通过显示的提交(commit)mutations来追踪每一个状态的变化

    双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
    在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。 它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。
    属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。 然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

    Vue中父组件如何向子组件传值

    父子组件传参:

    1.父传子:通过props属性实现;子组件要做类型检测;

    2.子传父:

    • 子组件this.$emit触发父组件监听的方法;$emit第二个参数为:向父组件传递的数据
    • 父组件监听子组件触发的事件,然后调用绑定的方法;

    非父子组件传参:

    • 路由传值:<router-link>和编程式导航中,均可在query/params中传值,在子组件中:this.$route.query
    • 通过$parent $children方法调用层级关系的组件内部的数据和方法:this.$parent.$data.id  获取父元素data中的id,但是容易造成代码耦合性太强,难以维护
    • eventBus:在全局定义一个eventBus
      window.eventBus = new Vue( )或者Vue.eventBus = new Vue( )
      在需要传递参数的组件中定义一个emit发送需要传递的值:eventBus.$emit(‘name’,id)
      在需要接受参数的组件中,用on接受该值:eventBus.$on(‘name’,(val) => {…})
      注意:使用完后要在beforeDestroy( )中关闭这个eventBus eventBus.$off(‘name’)
    • 本地存储:localStorage或者sessionStorage,setItem存储value,getItem获取value
    • 状态管理 Vuex

    列举Vue中的事件修饰符

    Vue.js为v-on提供了事件修饰符。
    修饰符是由点开头的指令后缀来表示的。
    .stop 阻止事件继续传播
    .prevent 阻止默认事件
    .capture 使用捕获模式
    .self 只当事件在该元素本身(而不是子元素)触发时触发回调
    .once 事件只会触发一次

    vue常用指令有哪些

    • v-on  监听DOM事件,比如v-on:click=”handleFunction”,可简写为 @click
    • v-bind  绑定属性,比如 v-bind:href=”url”,可简写为 : href
    • v-for  循环列表
    • v-if  根据表达式seen的真假来插入/删除对应标签,比如 v-if=”seen”
    • v-else  必须跟在v-if后
    • v-show  根据表达式的真假值来切换元素的display CSS属性
    • v-model  表单元素的数据双向绑定
    • v-text  定义元素文本,比如 v-text=”message”
    • v-html  更新元素的innerHTML
    • v-once  只渲染元素和组件一次

    用过哪些基于Vue的组件库?

    Element-ui桌面端 mint-ui 移动端
    自己总结的

    Vue生命周期钩子有哪些,作用是什么

    Vue实例从创建到销毁的过程,就是生命周期
    Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
    在Vue的整个生命周期中,提供了一系列的事件,可以注册JS方法,达到控制整个过程的目的,在这些JS方法中的this直接指向的是vue的实例。 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会。

    Vue提供的生命周期钩子如下:

    • beforeCreate 在实例初始化之后,数据观测(data observer,开始监控Data对象数据变化)和初始化事件(init event,Vue内部初始化事件)之前被调用。
    • created 在实例已经创建完成之后被调用。实例已完成以下的配置:数据观测(data observer),属性和方法的运算,event事件回调。挂载阶段尚未开始,$el 属性不可见。
    • beforeMount 在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
    • mounted 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中,此时一般可以做一些Ajax操作。注意mounted只会执行一次。
    • beforeUpdate 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
    • updated 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
    • beforeDestroy 在实例销毁之前调用。实例仍然完全可用。
    • destroyed 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

    自己的总结

    v-if和v-show区别

    •  相同点:v-if 和 v-show 动态控制dom元素显示隐藏。
    • 不同点:v-if显示隐藏是将dom元素整个添加或删除,(例如:<div v-if=""></div> ,v-if 当值为 true时,显示div ,当值为false时,改元素消失,代码也会消失,相当于将代码删除了,当在为true时,页面会重新渲染div);而v-show显示隐藏只是将css属性设为display: block 或none。dom元素还在。
    • 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换。
    • 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留。
    • 性能消耗:一般的,v-if有更高的切换消耗,而v-show有更多的初始化渲染消耗。
    • 使用场景:如果需要频繁的切换而对安全性无要求,使用v-show。如果在运行时,条件不可能改变,则使用v-if较好。 

    watch和computed区别

    应用方面,watch比较适合对状态的监控,比如监控页面一个变量的值改变,需要进行什么操作。而computed适合简单计算并返回结果,结果随着内部变量改变而改变。
    调用方面,watch适合比较耗时的操作,比如网络异步请求,一个变量改变触发网络请求。watch可以看做一个onchange事件,computed可以看做几个变量的组合体。

    Vuex用过哪些方法,你如何在项目中使用它

    Store  表示对Vuex对象的全局引用。组件通过Store来访问Vuex对象中的State
    State  Vuex对象的状态,即其所拥有的数据
    Getter  相当于Store的计算属性。因为就像计算属性一样,Getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。下面会说到具体的使用场景 Mutation  定义了对State中数据的修改操作。组件使用State中的数据的时候并不能直接对数据进行修改操作,需要调用Mutation定义的操作来实现对数据的修改。这也是Vuex定义中所说的用相应的规则来让数据发生变化的具体实现 Action  Mutation中定义的操作只能执行同步操作,Vuex中的异步操作在Action中进行,Action最终通过调用Mutation的操作来更新数据

    在vuex中用过dispatch(),commit(),mapstate,mapgetters,mapmutation,mapaction。

    在项目中的使用:
    首先通过npm install vuex --save   安装vuex
    在项目的源代码文件夹下(如src文件夹)新建一个store文件夹(叫别的名字也行)
    store文件夹下新建一个store.js文件,用来存放Vuex实例。可以把store注入到在vue实例中,那么所有的组件都可以通过this.$store.state去调用。

    流程:vue Components使用dispatch()方法触发action里面的函数,通过在Action里面写公共的异步调用获取数据,供公共的组件渲染。Action使用commit()方法触发mutations里面的函数,Mutations去修改state,state重新render vue Components。

    vuex的使用便于大型项目管理,Store包含多个Module,Module包含State、Mutation和Action。

    mutation和action写在methods中

    getters和state写在computed中

    说说Vue.nextTick钩子的应用场景

    场景一:在created()钩子函数执行的时候,DOM并未进行任何渲染,这时操作DOM时会报错,这时,在created中使用Vue.nextTick(callback)进行操作即可解决。实际上直接将操作放在mounted钩子中是不会发生这种情况的,因为mounted函数执行时代表DOM已经渲染完毕

    场景二:当DOM渲染完成后,执行某些操作改变其结构时,需要把异步结果放在Vue.nextTick(callback)中

    其实可以理解为,Vue的数据驱动页面更新并不是数据改变后DOM立即做出响应,Vue 在更新 DOM 时是异步执行的,通过数据更新队列,监听数据变化,从而更新视图。而Vue.nextTick(callback)就是每次DOM渲染后触发的钩子

    Vue3.0使用Proxy代替Vue2.0中Obeject.defineProperty的原因

    Obeject.defineProperty虽然已经能够实现双向绑定了,但是他还是有缺陷的。只能对属性进行数据劫持,所以需要深度遍历整个对象,对于数组不能监听到数据的变化,虽然Vue中确实能检测到数组数据的变化,但是其实是使用了hack的办法,并 且也是有缺陷的。

    反观Proxy就没以上的问题,原生支持监听数组变化,并且可以直接对整个对象进行拦截,所以在Vue3.0中使用Proxy替换 Obeject.defineProperty

    简述路由原理

    前端路由就是监听 URL 的变化,然后匹配路由规则, 显示相应的页面,并且无须刷新。目前单页面使用的路由就只有两种实现方式
    hash 模式和history 模式

    像www.example.com/#/index就是 Hash URL,当 ## 后面的哈希值发生变化时,不会向服务 器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。
    而www.example.com/index就是History 模式,它是HTML5新推出的功能,比之HashURL更加美观。

    谈谈Virtual Dom(虚拟DOM)的意义及原理

    意义:直接通过JS操作DOM对象会对性能损耗很大,此时,我们可以通过JS对象模拟DOM对象,优化性能

    原理:

    Virtual Dom:如果需要对比两个完整的DOM多叉树,时间复杂度就是O(n^3)。React的核心就是通过diff算法调和,优化Virtual Dom,其团队优化了普通的DOM多叉树比较,将时间复杂度降低至O(n),其核心就是对比同层的节点,而不是跨层对比,Vue2.0中也引入了Virtual Dom算法,它是基于snabbdom算法修改的

    Virtual Dom中的Diff算法过程:

    首先从上至下,从左往右遍历对象,也就是树的深度遍历,这一步中会给每个 节点添加索引,便于最后渲染差异,一旦节点有子元素,就去判断子元素是否有不同

    Virtual Dom算法的实现步骤

    • 通过JS来模拟创建DOM对象
    • 判断两个对象的差异
    • 渲染差异
    展开全文
  • 2、非父子组件:公共bus.js、attrs/listeners、vuex 一、父子组件传值 1、props方法 父组件嵌套的子组件中,使用v-bind:msg=‘xxxx’进行对象的绑定,子组件中通过定义props接收对应的msg对象 父组件 // 引入子...
  • 面试过不少前端从业者,简历写的平平淡淡,别人会的技能他也都会,看起来什么都掌握一些;有些会请过来当面聊一下,有些就直接拒绝了(如果是公司内要求独立完成项目的岗位,简历里放很多学习时候的DEMO项目,没有...
  • VUE之VUEX常见面试题

    千次阅读 2021-01-15 10:18:42
    1.vuex是什么?怎么使用?哪种功能场景使用它? 答:vue框架中状态管理。在main.js引入store,注入。 新建了一个目录store.js,….. export 。 解决的问题:多个视图依赖同一个状态来自不同视图的行为需要变更...
  • 进大厂是大部分程序员的梦想,而进大厂的门槛也是比较高的,所以这里整理了一份腾讯、字节跳动、百度、阿里等一线互联网公司面试题大全,其中概括的知识点(HTML,CSS,JS,React,Vue,NodeJS,互联网基础知识)
  • vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 什么时候使用? 一般用于中大型 web 单页应用...
  • 给「前端开发博客」加星标,每天打卡学习长按二维码即可识别“进入网页”查看哟~1、深入理解JavaScript的作用域和作用域链(一)作用域是什么了解作用域之前先看一下变量和函数,变量...
  • 大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列:vue传值方式、vuex、router、vue服务器端渲染、多页面、权限、开发环境跨域方案等等,此方面内容在我们的工作中常用到, 也是面试官经常...
  • 逻辑运算符 JavaScript中有三个逻辑运算符,&...HTML面试题部分 1.H5的新特性有哪些 2.Label的作用是什么?是怎么用的? 3.HTML5的form如何关闭自动完成功能 4.dom如何实现浏览器内多个标签页之间的通信? 5.实现不使
  • 点进来之后你的噩梦就要来了,接下来你要面对上百道面试题,那么,如果你—— 是个小白菜: 推荐使用2~3周的时间来消化接下来的面试题, 遇到不会的专业名词请立刻去搜; 文章中只是简答,如果想要详细了解的话还...
  • 前端面试题之React篇

    千次阅读 2021-05-28 23:23:45
    前端面试题之React篇一、组件基础1. React 事件机制2. React的事件和普通的HTML事件有什么不同?3. React 组件中怎么做事件代理?它的原理是什么?4. React 高阶组件、Render props、hooks 有什么区别,为什么要不断...
  • 大厂前端面试题总结(Vue篇)

    千次阅读 2021-02-02 14:20:39
    大厂前端面试题总结(CSS篇) 大厂前端面试题总结(ES6篇) 大厂前端面试题总结(浏览器篇) 大厂前端面试题总结(性能优化篇) 大厂前端面试题总结(Web安全篇) 大厂前端面试题总结(JS理论篇) 大厂前端面试题...
  • 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 的...
  • 面试题 HTTP、浏览器 1,浏览器存储的方式有哪些 2,对前后端跨域可以说一下吗?如何解决跨域的? 3,浏览器 cookie 和 session 的认识。 4,输入URL发生什么? 5,浏览器渲染的步骤 6,页面渲染优化 7,强制缓存和...
  • 2021 前端 VUE 面试题总汇

    万次阅读 多人点赞 2021-05-25 10:35:19
    一、vue面试题 1、vue的生命周期 beforeCreate:实例初始化之后;数据观测和事件配置之前调用,组件的选项对象还没有创建,el挂载和data都没有初始化,无法访问方法和数据。 created:实例创建完成之后调用;已经...
  • 2021高频前端面试题(含答案)

    千次阅读 多人点赞 2021-04-22 13:54:18
    v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot… 四、综合 1、前端工程化理解(模块化、组件化、规范化、自动化) JS的模块化、css的模块化、资源的模块化 从UI拆分下来的每个包含...
  • 2020前端面试题(附带答案)

    千次阅读 2020-12-06 17:28:33
    这些面试题是本人在网上收集的题型及答案,以及自己的一些见解希望对大家有些帮助。 css的居中方式 答: 1.1 内联元素水平居中 利用text-align: center可以实现在块级元素内部的内联元素水平居中。此方法对内联...
  • 2020中高级前端面试题合集

    万次阅读 多人点赞 2020-03-18 22:19:00
    2020中高级前端面试题合集 “全方位总结一下所遇到的面试题目,与大家共同学习,也是对自己的一次总结” 01 前言 2020是不平凡的一年,这一年里发生许多事情,大家也都知道。对于互联网行业来说也是一次重大的...
  • 2022年最新前端面试题 热门题目 (面经最全版)(蛋糕)...持续维护中
  • 前端面试题(带答案)

    万次阅读 2021-05-14 09:50:54
    前端面试题(带答案)vueVue路由Vue常见面试题 vue 什么是vue生命周期? 答: Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的...
  • 2021最新前端面试题

    2021-03-18 11:34:54
    以下是2021年最新的公司面试题 try catch 的实现原理。 token怎么处理?刷新token的原理,为啥需要刷新token。 组件通信方法有哪些?事件总线和vuex的区别。 vue数据双向绑定原理,vue3又是怎么处理的,proxy的缺点...
  • 2021前端面试题和笔试题——Vue

    万次阅读 多人点赞 2020-06-02 17:59:32
    面试 vue前端工程师的常见面试题及笔试题。 面试了近十几家公司总结出一套VUE面试题,希望能帮助到更多的人。 对 MVVM 的理解 MVVM分为Model、View、ViewModel三者。 Model:代表数据模型 View:代表视图 ViewModel...
  • 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...
  • 前端面试题汇总

    千次阅读 多人点赞 2019-06-25 14:44:55
    文章目录综合前端性能优化SEO优化首页白屏优化IE兼容问题及hackhttp、https区别服务器状态码移动端适配HTML5新标签标签语义化CSS3选择器伪类和伪元素新属性动画水平垂直居中清除浮动ES5基本数据类型数组操作方法字符...
  • 2021前端面试题整理

    千次阅读 2021-01-19 10:54:03
    $:50道CSS基础面试题 常见布局 $:前端7大常用布局方式 $:Flex布局和常用属性 BFC $:什么是BFC?什么条件下会触发?应用场景有哪些? BEM $:BEM命名规范 CSS预处理器 $:Less常用到的语法 $:Sass和
  • 大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列: 使用Proxy代理跨域、watch监听、keep-alive、vue服务器端渲染、VUEX、vue单页面和多页面的使用等等,此方面内容在我们的工作中常用到, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,583
精华内容 1,833
关键字:

前端面试题vuex

vue 订阅