早已忘却的面试题，需要在隆冬忆起 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

哇哇哇哇。。。一边擦泪，一边誊写，早已忘却的面试题，需要在隆冬忆起。。

vue

vue自定义指令

通过自定义指令，我们可以扩展Vue的行为，让它在渲染DOM元素时添加额外的特性和事件，从而更好地完成业务需求
vue自定义指令分为两种类型：全局指令和局部指令（组件内指令）
全局指令会注册到Vue.directive上，可以全局使用，局部指令则只能在组件内使用

下面是一个全局自定义指令的示例：注册一个名为v-focus的全局自定义指令
注册了一个名为v-focus的全局自定义指令，并实现了inserted钩子函数，当该指令所绑定的元素插入到DOM中时，该钩子函数会被调用，从而实现元素的聚焦功能

Vue.directive("focus",{
   // 当绑定元素插入到DOM中执行
   inserted:function(el){
       //聚焦元素
       el.focus()
   }
})

下面是一个局部自定义指令的示例:在组件内定义一个名为v-highlight的局部自定义指令

export default {
    derectives:{
        highlight:{
            //当绑定元素插入到DOM中时执行
            inserted:function(el){
                //添加样式类
                el.classList.add("highlight")
            },
            //当绑定元素从DOM中移出时执行
            unbind:function(el){
                //移除样式类
                el.classList.remove("highlight")
            }
        }
    }
}

自定义指令在权限控制方面的应用

可以根据用户的角色信息来控制某些按钮或者表格中的行列是否可见，可编辑，可删除，
这个时候就可以通过自定义指令来实现这样的权限控制.
定义一个名为v-permission的全局自定义指令，并实现了bind钩子函数，在该函数中
通过当前用户的角色信息，判断该用户是否具有该元素的权限，如果没有，则将该元素隐藏
下面是一个示例代码：

//定义一个名为v-permission的全局自定义指令
Vue.directive("permission",{
    //bind 钩子函数只在指令第一次绑定到元素时执行一次
    //如果需要对指令的绑定值进行响应式的操作，应该在update钩子函数中进行
    bind:function(el,binding,vnode){
        //获取当前登录用户的角色信息
        const currentUser = getUserInfoFromLocalStorage().role;
        //获取绑定的值
        const {value} = binding
        //判断当前用户是否有该按钮的权限
        if(value&&value.length&&!value.includes(currentUser)){
            el.style.display = "none";  //隐藏该元素
        }
    }
})

javascript

作用域链：

在js中每个函数都有自己的作用域，
当在一个函数内部引用一个变量，js会按照代码中出现的顺序，从当前作用域开始依次向上查找
直到找到第一个包含这个变量的作用域为止，这个过程被称为作用域链的查找
如果整个作用域链都没有找到，就会报错抛出ReferenceError异常

function outer(){
    const a = 10
    function inner(){
        console.log(a);
        console.log(b);//Uncaught: ReferenceError：b is not defined
    }
    inner()
}
outer()

React

Vue和React的区别

分五个方面来说：

模版语法：
Vue使用了HTML的模版语法来编写组件模版，比较易于理解和学习，使得开发者可以快速的编写出页面。这样做的优点在于，将HTML和JavaScript代码分离开来，
有利于代码的维护性和阅读性。Vue的模版语法也提供了一些强大的功能，如条件渲染，循环渲染，事件处理等.
React则推崇：一切都是javascript,它采用了jsx语法，即Javascript和Xml的混合语法，使用jsx可以轻松地创建复杂的UI,并提高了应用程序的性能，
不过使用jsx的同事，你需要学习更多的语法和编程范式
数据绑定
Vue提供了双向数据绑定的功能，可以实现视图和数据的自动同步，极大方便了数据管理和操作。双向绑定包括两个部分：数据模型和视图模型。在Vue中，数据模型即组件实例中的数据；视图模型则负责数据模型中的数据绑定到视图中去。
React的数据流是则是单向的，采用了组件间props和State的传递和管理数据，通过props向组件传递属性值，并监听这个属性的更改事件来更新UI
从而实现数据的单向流动；而state则是保存组件内部状态的地方，是可变的数据，推荐在合适的情况下尽量使用不可变数据。
组件分类
Vue将组件分为有状态组件和无状态组件 functional两种，有状态组件包含了应用程序中的逻辑和数据，可以实现更复杂的操作和交互；无状态组件只提供了一个对应的UI界面，没有数据和逻辑的处理，通常用于小组件或纯展示类组件。Vue的组件具有生命周期函数，可以在组件的不同阶段执行不同的处理逻辑。
React没有严格的组件分类，但通常会将组件分为函数式组件和Class组件两种。函数式组件是一种纯javascript函数，接受props对象作为参数，返回一个React元素，不支持状态和生命周期函数；class组件则是使用面向对象编程的方式来构建组件，支持状态和生命周期函数。所以React组件也具有生命周期，可以在组件的不同阶段执行相关操作。
生命周期
Vue和React都拥有各自的生命周期函数,并分别在不同的组件阶段调用这些函数。Vue的生命周期函数包括了created、mounted、updated和destroyed等每个函数都有特定的用途和功能
React的生命周期函数包含了componentWillMount、componentDidMount、shouldComponentUpdate、componentWillUnmount等也都有各自的特点和用途。
生命周期函数可以用于解决组件挂载、更新、销毁等过程的一系列问题和逻辑
渲染效率

Vue采用了虚拟DOM和异步渲染等技术来提高程序的性能，虚拟DOM是将真实的DOM抽象成js对象，可以快速的进行对比和计算，从而减少DOM操作带来的性能损耗；
异步渲染则是让浏览器在空闲时间渲染组件，从而提高渲染效率。
React则使用了一种名为reconciliation的算法在不重新渲染整个组件数的情况下更新UI,这也使得React具有较高的渲染效率。
在组件更新时，React会通过对比虚拟DOM的变化来更新UI,从而避免大量的DOM操作

Vue和React都是非常优秀的前端框架，采用不同的实现方式，适用于不同的开发场景。Vue更加注重开发体验和易用性，适合快速开发小型和中型的应用；React更加注重应用程序的可维护性和性能，适合大型应用或需要更好的可扩展性的应用。选择哪个框架取决于项目的需求和团队的偏好

未完后续每日更新当前文章。。。🥲

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 有了红黑树，为啥还要跳表？

书接前文。前文书《红黑树是怎么来的》我们讲了通过红黑树（本质上是 2-3 树或者 2-3-4 树思想）来维护二叉搜索树的平衡性。从红黑树的实现来看，虽然相对于 2-3 树来说是简化了不少，但仍然是相当复杂的。有没有更加简单的实现方案呢？源于二分思想在前…

vue