• 前端面试基础面试题——11


    1.什么是 vue 的计算属性?

    2.vue怎么实现页面的权限控制

    3.watch的作用是什么

    4.响应式系统的基本原理

    5.vue-loader 是什么?使用它的用途有哪些?

    6.vuex 工作原理详解

    7.vuex 有哪几种属性?

    8.什么是 MVVM?

    9.computed 和 watch 区别?

    10.keep-alive 组件有什么作用? 

    1.什么是 vue 的计算属性?

     计算属性的定义: 当其依赖的属性的值发生变化的时,计算属性会重新计算。反之则使用缓存中的属性值。 计算属性和vue中的其它数据一样,都是响应式的,只不过它必须依赖某一个数据实现,并且只有它依赖的数据的值改变了,它才会更新。

    2.vue怎么实现页面的权限控制

    利用 vue-router 的 beforeEach 事件,可以在跳转页面前判断用户的权限(利用 cookie 或 token),是否能够进入此页面,如果不能则提示错误或重定向到其他页面,在后台管理系统中这种场景经常能遇到

    3.watch的作用是什么

    watch 主要作用是监听某个数据值的变化。和计算属性相比除了没有缓存,作用是一样的。

    借助 watch 还可以做一些特别的事情,例如监听页面路由,当页面跳转时,我们可以做相应的权限控制,拒绝没有权限的用户访问页面

    4.响应式系统的基本原理

    vue响应式的原理,首先对象传入vue实例作为data对象时,首先被vue遍历所有属性,调用Object.defineProperty设置为getter和setter,每个组件都有一个watcher对象,在组件渲染的过程中,把相关的数据都注册成依赖,当数据发生setter变化时,会通知watcehr,从而更新相关联的组件

    5.vue-loader 是什么?使用它的用途有哪些?

     vue-loader 是解析 .vue 文件的一个加载器,将 template/js/style 转换成 js 模块。

    用途:js 可以写 es6、style 样式可以 scss 或 less;template 可以加 jade 等。

    6.vuex 工作原理详解

    vuex 整体思想诞生于 flux, 可其的实现方式完完全全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件;

    解析:vuex的原理其实非常简单,它为什么能实现所有的组件共享同一份数据? 因为vuex生成了一个store实例,并且把这个实例挂在了所有的组件上,所有的组件引用的都是同一个store实例。 store实例上有数据,有方法,方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例,所以一个组件改变了store上的数据, 导致另一个组件上的数据也会改变,就像是一个对象的引用。

    7.vuex 有哪几种属性?

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

    8.什么是 MVVM?

    MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象(桥梁)。

    在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

    9.computed 和 watch 区别?

     computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。 watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

    10.keep-alive 组件有什么作用?

    如果你需要在组件切换的时候,保存一些组建的状态防止多次渲染,就可以使用keep-alive组件包裹需要保存的组件
  • 相关阅读:
    ReactNative安卓首屏白屏优化
    Java精进-手写持久层框架
    微信小程序的常见测试点,设计测试用例
    jmeter 简单数据写入器 创建文件失败
    FastAPI 学习之路(十三)Cookie 参数,Header参数
    编译期的序列遍历
    【WINDOWS / DOS 批处理】if命令中的比较运算符
    计数排序详解
    CPU眼里的C/C++:1.2 查看变量和函数在内存中的存储位置
    基于JavaFX的扫雷游戏实现(五)——设置和自定义控件
  • 原文地址:https://blog.csdn.net/qq_21861771/article/details/133940480