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

news/2024/10/22 13:50:47/

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组件包裹需要保存的组件

http://www.ppmy.cn/news/1169195.html

相关文章

7种典型的钢结构BIM应用

钢铁的工作流程往往会造成项目各个阶段信息缺乏、成本高、效率低等问题。 BIM技术通过数字化真实信息模拟建筑,通过中央文档共享信息,将流程的各个阶段紧密联系起来,交换信息,提高效率,降低成本。 制造专用软件不断发展…

自动化运维ansible(ansible-playbook)

一、ansible-playbook的构成 Inventory:主机列表,表示剧本中的任务要应用在哪些主机上; Tasks:具体任务,即调用哪些模块完成操作,可以配置多个任务; Variables:变量,包含内置变量和自定义变量;…

[论文笔记]GPT-2

引言 今天继续GPT系列论文, 这次是Language Models are Unsupervised Multitask Learners,即GPT-2,中文题目的意思是 语言模型是无监督多任务学习器。 自然语言任务,比如问答、机器翻译、阅读理解和摘要,是在任务相关…

【源码】C/C++运动会计分系统 期末设计源码

文章目录 题目介绍功能源码效果展示带报告(内容) 题目介绍 使用语言: 两个版本都会发: 版本1:C语言 版本2: C 代码量: 500 题目介绍: 要求:初始化输入:N-参赛…

使用Python打造微信高效自动化操作教程

引言 在如今数字化时代,人们对于效率的追求越来越强烈,尤其是在工作和学习中。自动化操作成为了提高生产力的有效途径之一,而PyAutoGUI和Pyperclip作为Python中的两个强大库,为我们实现自动化操作提供了便利。本文将向大家介绍如…

2023-10-20 游戏开发-unity不同版本下载-记录

unity hub下载页面: Unity官方下载_Unity最新版_从Unity Hub下载安装 | Unity中国官网 Unity最新版本下载-Unity稳定版本 | Unity中国官网 不同版本引擎下载: UnityHub国际版下载链接 复制链接地址,在浏览器导航栏粘入地址,打开UnityHub,等待…

ARM CoreSight相关模块简介

最近在学习ARM CPU软硬件开发,对于CoreSight看到很多模块,简单总结了下。 1. DAP ARM DAP (Debug Access Port) 的主要作用是为调试工具提供直接访问 ARM 处理器和其它相关硬件的途径。DAP 是 ARM CoreSight 调试和追踪技术的一部分,它允许…

有什么小程序可以下载视频号的视频?

​最近有一些朋友问我,【视频号下载助手】和【视频下载bot】小程序,有什么作用? 首先视频号下载助手是协助用户进行下载的,但由于下载要符合平台规定,我们就将视频下载助手与视频下载bot小程序想结合的模式&#xff0…