首页 > 其他分享 >vue学习面试题整理(day01)

vue学习面试题整理(day01)

时间:2022-11-15 23:02:37浏览次数:50  
标签:面试题 vue day01 绑定 视图 Vue 过滤器 数据

一、Vue的最大优势是什么?

   简单易学,轻量级整个源码js文件不大,双向数据绑定,数据驱动视图,组件化,数据和视图分离,vue负责关联视图和数据,作者是中国人(尤雨溪),文档都是中文的,入门教程很多,容易上手,相比于传统网页,vue是单页面可以只刷新某一部分

二、mvvm和mvc的区别是什么?

MVC:也是一种设计模式,组织代码的结构,是model数据模型,view视图,controller控制器,在控制器层编写js代码,来控制数据和视图关联。m和v是有关联的,m层一旦发生变化,v层需要通过观察者模式来更改视图

MVVM:即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁,内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定

三、model层数据变化了,viewmodel是如何监听到的呢?(vue的双向数据绑定的原理)
viewmodel创建的时候,会把所有的data数据绑定到vm实例上,被vm所管控,
内部借助于Object.defineProperty设置setter和getter方法
当获取数据的时候,触发getter方法,当修改数据的时候设置setter方法,
当数据设置完成之后呢,在setter方法内部会进一步的触发wather方法,实现虚拟dom的对比,更新真实的dom
四、v-show和v-if的区别
原理:
v-show控制显示和隐藏的原理:控制元素的display:none和display:block
v-if控制显示和隐藏的原理:控制dom元素的创建和删除
性能消耗:大量的操作dom会引起页面的重绘,很耗费性能 【获取元素 添加元素 删除元素】
v-if: 在每一次切换都会消耗性能
v-show: 初始显示,消耗一次性能
使用的时候:
频繁的切换显示隐藏 使用v-show
不频繁的切换显示隐藏 使用v-if
安全性能(在后面vue项目中 权限管理)
v-if 更加安全
v-show 不安全

五、重绘与回流(重排)的概念
回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时,回流就会发生 (布局变化)
重绘: 不影响布局, 只是标签页面发生变化, 重新绘制 (标签变化)
注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排)

 

----------------------------------

六、Vue和jQuery区别是什么?

jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签
​ Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视图关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能
七、 为什么避免v-for和v-if在一起使用
Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.
八、 vue2中直接使用 数组[索引]的方式修改数据,会导致无法更新的情况?为什么?怎么解决?
Vue的响应式原理是通过 Object.defineProperty方法来实现数据劫持,但是有一个小缺陷,无法劫持直接修改数组元素的值
可以使用 Vue.$set(this.arr,0,'张三')的方式来实现数组元素的修改
九、 说出至少4个Vue指令及作用
v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
​ v-else 必须和v-if连用 不能单独使用 否则报错
​ v-bind 动态绑定 作用: 及时对页面的数据进行更改, 可以简写成:分号
​ v-on 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
​ v-text 解析文本
​ v-html 解析html标签
v-model //双向绑定,用于表单
十、 vue.js的两个核心是什么
数据驱动和组件化
十一、 简述vue过滤器?
过滤器是将后台返回的数据换一种形式输出,不改变原来的数据
应用场景:商品价格,处理后台传入的时间戳
有全局过滤器 和 局部过滤器
. 全局过滤器
Vue.filter('过滤器',对应的过滤器函数)
局部过滤器
通过在Vue实例上挂载filers添加过滤器,只能在当前组件内部使用

 

标签:面试题,vue,day01,绑定,视图,Vue,过滤器,数据
From: https://www.cnblogs.com/juanbao-com/p/16894357.html

相关文章

  • Vue3在Vite中配置scss并使用
     提出问题单个文件引入时,需要在每个 stylelang="scss"scoped标签下这样引入,每次都要手动引入非常麻烦,因此就想做全局配置@import"@/assets/scss/global.scss"......
  • 前端常见的Vue面试题目汇总
    请说一下响应式数据的原理默认Vue在初始化数据时,会给data中的属性使用Object.defineProperty重新定义所有属性,当页面到对应属性时,会进行依赖收集(收集当前组件中的watcher)......
  • Vue项目中使用树形控件 vue-table-width-tree-grid
    Vue项目中使用树形控件vue-table-width-tree-grid需要实现的整体效果如下:这个树形结构组件ElementUI是没有提供的,我们需要依赖第三方插件来完成。一、安装tree-ta......
  • day01-Tomcat框架分析
    引入课程和Maven1.Mavenmaven中央仓库:MavenRepository:Search/Browse/Explore(mvnrepository.com)maven仓库是国外的一个网站,由于网络问题,我们也常使用maven仓库的......
  • Vue3解决前端跨域问题
    在vue.config.js里添加代理备注:例如vue想请求不在同一台服务器上的localhost:8080服务器的接口,在下面proxy里的target里写上要访问的服务器的前缀,然后写一个别名'/project......
  • 11月面试题
    1、js为什么快?单线程,但凡是复杂的或者是请求数据都可以交给异步2、node为什么快/发明出来解决了什么问题?node主要解决的是后端的高明并发问题3、什么叫js的单......
  • VueBaiduMap使用记录
    项目中有用到地图,之前采用的是腾讯地图,使用后发现在IE中地图展示空白,就想着换百度地图试试,又看到有基于Vue框架的百度地图插件VueBaiduMap,正好符合我的需求;本文记录一下。......
  • 20221115面试题
    XXXXX一面vue3APIref和reactivevue-router的两种模式hashhistory区别vuexmutation同步action异步commit调用mutation方法dispatch调用action方法大屏经验地......
  • 使用vue-json-editor实现json编辑框
    1、进入到自己的项目,使用npm安装vue-json-editornpminstallvue-json-editor--save2、在vue组件中使用vue-json-editor<template><div><p>vue-json-edito......
  • vue打包后网页首次打开加载慢
    二、nginx配置server{gzipon;gzip_buffers324K;gzip_comp_level6;gzip_min_length100;gzip_typesapplication/javascripttext/csstext/xml;gzip_disable"M......