一、js基础

1、怎么理解闭包

我们首先知道闭包有3个特性：

①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收

典型例子：函数作为返回值，定时器作为闭包

二、vue.js基础

1、普通函数和箭头函数有什么区别

箭头函数是匿名函数箭头函数不能作为构造函数使用不能使用new
箭头函数的this,始终指向父级上下文
箭头函数不能通过call apply bind改变this指向,但是可以通过这些方法传递参数
箭头函数没有原型属性
箭头函数没有arguments属性,可以用...展开运算符来接收所有的参数集合

2、nextTick原理

DOM更新之后执行的回调，可以用来获取更新后的DOM元素

3、后台权限管理的按钮权限怎么做（考自定义指令）

定义一个包含自定义指令的js文件，main.js中引用该文件 js文件中先定义一个判断是否拥有权限的方法hasAuth() 定义自定义指令


    import Vue from 'vue'
    
    /**权限指令**/
    const has = Vue.directive('permission', {
        bind: function (el, binding, vnode) {
            // 获取页面按钮权限
            let btnPermissionsArr = [];
            if(binding.value){
                // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
                btnPermissionsArr = Array.of(binding.value);
            }else{
                // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。
                btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
            }
            if (!Vue.prototype.$_has(btnPermissionsArr)) {
                el.parentNode.removeChild(el);
            }
        }
    });
    // 权限检查方法
    Vue.prototype.$hasAuth = function (value) {
        let isExist = false;
        // 获取用户按钮权限
        let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
        if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
            return false;
        }
        if (value.indexOf(btnPermissionsStr) > -1) {
            isExist = true;
        }
        return isExist;
    };
    export {has}

参考基于VUE自定义指令实现按钮级权限控制

4、computed和watch在原理上有什么区别

watch和computed在实现原理上的不同：
watch实现是给watch 对象的每一个 key分配了一个watcher，this.get()取值，收集当前的用户watcher，并保存下初始值。当key变化的时候，触发watcher.run()，保存下新值，同时执行回调函数cb。
computed的实现通过给computed 对象的每一个 key分配了一个lazy Watcher，默认不执行，取值的时候才执行。Object.defineProperty在vm上定义了computed的每个key。通过key所依赖值收集当前的渲染watcher，来实现依赖值变化，视图更新。通过dirty属性来实现缓存效果。当dirty为true时，调用evaluate重新求值

前端面试总结（二）