Vue2 必备的50个知识点
单页面路由
数据与视图分开
缺点:
单页面不利于seo
不兼容IE
首屏加载时间长
2、为什么说Vue是一个渐进式框架?
Vue的全家桶,你可以选择不用,或者只选几样去用,比如不用vuex
3、Vue跟React的异同点?
相同点:
都是单向数据流
都使用了虚拟DOM的技术
都支持SSR
组件化开发
不同点:
前者template,后者JSX
数据改变,前者响应式,后者手动setState
React单向绑定,Vue双向绑定
React状态管理工具Redux、Mobx,Vue状态管理工具Vuex
4、MVVM是什么?和MVC有何区别呢?
MVC
Model:负责从数据库中取数据
View:负责展示数据
Controller:用户交互的地方,例如点击事件
思想:Controller将Model的数据展示在View上
MVVM
VM:就是View-Model,数据双向绑定
Model:取数据的地方
View:展示数据的地方
思想:View和Model实现数据同步,不需要手动更新
注意:Vue不严格符合MVVM,因为MVVM规定Model和View不能直接通信,而Vue可以使用
ref
进行通信
5、Vue和JQuery的区别在哪?为什么放弃JQuery用Vue?
JQuery直接操作DOM,而Vue不直接操作DOM,而是只需操作数据
Vue的虚拟DOM技术,能适配多端
Vue集成了一些库,大大提高开发效率,例如Route、Vuex等等
6、为什么data是个函数并且返回一个对象呢?
防止组件被多个页面使用时,造成的变量互相污染
7、使用过哪些Vue的修饰符呢?
.lazy
:输入框失焦时才会更新v-model的值.trim
:讲v-model绑定的值首位空格给去掉.number
:将v-medol绑定的值转数字.stop
:阻止事件冒泡.capture
:事件的捕获.self
:点击事件绑定本身才触发.once
:事件只触发一次.prevent
:阻止默认事件.native
:绑定事件在自定义组件上时,确保能执行.left、.middle、.right
:鼠标左中右键的触发passive
:相当于给移动端滚动事件加一个.lazy
camel
:确保变量名会被识别成驼峰命名.sync
:简化子修改父值的步骤
8、路由的几种模式?
hash:哈希模式,根据hash值的更改进行组件切换,而不刷新页面
history:历史模式,依赖于HTML5的pushState和replaceState
abstract:适用于Node
9、路由的钩子函数?
全局钩子
beforeEach:跳转路由前
to:将要跳转进入的路由对象
from:将要离开的路由对象
next:执行跳转的方法
afterEach:路由跳转后
to:将要跳转进入的路由对象
路由独享钩子
routes: [
{
path: ‘/xxx’,
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]
组件内路由钩子
beforeRouteEnter(to, from, next):跳转路由渲染组件时触发
beforeRouteUpdate(to, from, next):跳转路由且组件被复用时触发
beforeRouteLeave(to, from, next):跳转路由且离开组件时触发
10、使用过哪些Vue的内部指令呢?
v-text
:元素的textContentv-html
:元素的innerHTMLv-show
:通过样式display改变显隐v-if
:通过操作DOM改变显隐v-else
:配合v-ifv-else-id
:配合v-elsev-for
:循环渲染v-on
:绑定事件,缩写@v-bind
:绑定变量,缩写:v-model
:双向绑定v-slot
:插槽v-once
:只渲染一次v-pre
:跳过元素编译v-cloak
:隐藏双括号,有值再显示
11、组件之间的传值方式有哪些?
父传子,子组件通过
props
接收子传父,子组件使用
$emit
对父组件进行传值父子之间通过
$parent
和$chidren
获取实例进而通信通过
vuex
进行状态管理通过
eventBus
进行跨组件值传递provide
和inject
,官方不建议使用$ref
获取实例,进而传值路由传值
localStorage、sessionStorage
12、如何设置动态class,动态style?
动态class对象:
<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组:
<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象:
<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组:`
13、v-if和v-show有何区别?
v-if
:通过操作DOM来控制显隐,适用于偶尔显隐的情况v-show
:通过改变样式display属性控制显隐,适用于频繁显隐的情况
14、computed和watch有何区别?
computed
:依赖多个变量计算出一个变量,且具有缓存机制,依赖值不变的情况下,会复用计算值。computed
中不能进行异步操作watch
:通常监听一个变量的变化,而去做一些事,可异步操作简单记就是:一般情况下
computed
的多对一,watch
一对多
15、Vue的生命周期?
beforeCreate
:实例Vue,未初始化和响应式数据created
:已初始化和响应式数据,可访问数据beforeMount
:render调用,虚拟DOM生成,未转真实DOMmounted
:真实DOM挂载完成beforeUpdate
:数据更新,新虚拟DOM生成updated
:新旧虚拟DOM进行对比,打补丁,然后进行真实DOM更新beforeDestroy
:实例销毁前,仍可访问数据destroy
:实例销毁,子实例销毁,指令解绑,解绑本实例的事件activated
:keep-alive所缓存组件激活时调用deactivated
:keep-alive所缓存组件停用时调用errorCaptured
:子孙组件的错误捕获,此函数可返回false阻止继续向上传播
16、为什么v-if和v-for不建议用在同一标签?
v-for
优先级高于v-if
,每项都通过v-for
渲染出来后再去通过v-if
判断显隐
17、 vuex的有哪些属性?用处是什么?
state
:定义初始状态getter
:从store从取数据mutation
:更改store中状态,只能同步操作action
:用于提交mutation,而不直接更改状态,可异步操作module
:store的模块拆分
18、不需要响应式的数据应该怎么处理?
定义在data的return之外
使用Object.freeze进行数据冻结
19、watch有哪些属性,分别有什么用?
immediate:初次加载时立即执行
deep:是否进行深度监听
handler:监听的回调函数
20、父子组件生命周期顺序?
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
21、对象新属性无法更新视图,删除属性无法更新视图,为什么?怎么办?
原因:Object.defineProperty没有对对象的新属性进行劫持
解决:
新增属性:
Vue.set(target, key, value)
删除属性:
Vue.delete(target, key)
22、直接arr[index] = xxx无法更新视图怎么办?为什么?怎么办?
原因:Vue出于性能考虑没有对数组下标进行劫持,而是通过改写数组原型方法
解决:
splice:arr.splice(index, 1, value)
Vue.set(target, index, value)
23、插槽的使用以及原理?
普通插槽 普通插槽slot
会被当做子元素进行解析,最终会被解析成一个_t
函数,他接收的第一个参数为插槽的名称,默认是default
,也就是_t('default')
,执行此函数进行最终元素的渲染,如果是具名插槽,则传对应的插槽名 作用域插槽 插槽会被封装成一个函数放置在scopeSlotes
对象中,解析时_t
第二个参数接收子组件的数据,并进行渲染
24、为什么不建议用index做key,为什么不建议用随机数做key?
list: [
{ name: ‘阿敏’, id: ‘123’ },
{ name: ‘阿红’, id: ‘124’ },
{ name: ‘阿花’, id: ‘125’ }
]
渲染为
现在我执行 list.unshift({ name: ‘阿林’, 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 id: ‘122’ })
渲染为
新旧对比
可以看出,如果用index做key的话,其实是更新了原有的三项,并新增了阿花,虽然达到了渲染目的,但是损耗性能
现在我们使用id来做key,渲染为
现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ }),渲染为
新旧对比
可以看出,原有的三项都不变,只是新增了阿林这个人,这才是最理想的结果
用index
和用随机数
都是同理,随机数
每次都在变;
25、自定义指令的钩子函数?
这里只说Vue2的
bind
:指令绑定到指定元素时调用,只调用一次inserted
:指定元素插入父节点时调用update
:所在组件的 VNode 更新时调用componnetUpdated
:所在组件以及其子组件 VNode 全部更新后调用unbind
:只调用一次,指令与元素解绑时调用
26、说说nextTick的用处?
修改数据时不能马上得到最新的DOM信息,所以需要使用nextTick,在nectTick回调中可以获取最新DOM信息
27、为什么nextTick优先是微任务?
优先是Promise.then
方法,是个微任务,这样可以避免多一次队列,进而少一次UI渲染,节省性能
28、Vue的SSR是什么?有什么好处?
SSR全称Server Side Render
有利于SEO:由于是在服务端,将数据填充进HTML之后再推送到浏览器,所以有利于SEO的爬取
首屏渲染快
29、Vue响应式是怎么实现的?
1、劫持:通过
Object.defineProperty
对对象进行递归劫持属性的get、set
2、观察者模式:使用
watcher
进行观察数据使用的地方3、发布订阅模式:使用
dep
收集watcher
,数据更改时,通过notify
方法通知dep
里的watcher
去进行相应的更新4、数组:数组没有使用劫持的模式,而是通过重写数组原型上的方法,来实现数组的响应式
30、为什么只对对象劫持,而要对数组进行方法重写?
数组的元素大概率是成百上千的,所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写,实现数组的响应式
31、Vue.set方法的原理?
Vue.set(target, key, value)
第一步:判断target是数组的话,则调用target.splice(key, 1, value)
第二步:判断target是对象的话,再判断传入的key是否已存在target中
是:直接target[key] = value
否:调用defineReactive(target, key, val)进行响应式处理
export default function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.ob
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}
32、Vue.delete方法的原理?
Vue2 必备的50个知识点相关推荐
- Vue的50个知识点
Vue的50个知识点 文章目录 Vue的50个知识点 1. Vue的优点?Vue的缺点? 2.为什么说Vue是一个渐进式框架? 3.Vue和Rect的异同点? 4.MVVM是什么?和MVC有什么区别呢 ...
- 数据结构与算法必备的 50 个代码实现
点击上方"AI有道",选择"置顶"公众号 重磅干货,第一时间送达 数据结构和算法是程序员的内功心法和基本功.无论是人工智能还是其它计算机科学领域,掌握扎实的数据 ...
- 20170328_C++程序员必备的20个知识点——部分2
20170328_C++程序员必备的20个知识点 11.解释下类的三大特性:封装.继承.多态? PS:参考博客:20170326_请说出C与C++的区别. (1)C++ 的三大特性是指封装.继承.多态 ...
- 学习必备的50条非常有趣且实用的Python一行代码,值得收藏
前言 学习必备的50条非常有趣且实用的Python一行代码,值得收藏! 让我们愉快地开始吧~编程学习资料免费点击 开发工具 Python版本: 3.6.4 相关模块: 环境搭建 安装Python并添加 ...
- 重点| 系统集成项目管理工程师考前50个知识点(5)
本文章总结了系统集成项目管理工程师考试背记50个知识点!!! 帮助大家更好的复习,希望能对大家有所帮助 比较长,放了部分,需要可私信!! 30.活动之间的四种依赖关系: 强制性依赖关系:是法律或合同要 ...
- 字节跳动内部资料泄露?音视频开发教程(附面试题+视频教程),全文共301页,包含50个知识点
前言 男怕入错行,女怕嫁错郎,程序员技术贬值快,只有紧紧跟上行业人才需求的风口才能不断让自己保值增值.唯有不断学习更新迭代自身技能的程序员才能一直在这个行业站稳脚跟. 为什么音视频如此重要? 伴随着短 ...
- 学网络必备50个知识点
学习网络必备50个必备知识点,从六个方面展开: 文章目录 一.设备通用类: 二.内网部署类: 三.外网路由类: 四.无线类: 五.出口类: 六.云服务器类: 一.设备通用类: 1.设备名称(hostn ...
- vue由浅入深的50个知识点
荣耀黄金 1. Vue的优点?Vue的缺点? 优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开 缺点:单页面不利于seo,不支持IE8以下,首屏加载时间长 2. 为什么说V ...
- 计算机知识必备,小结||计算机基础知识点十(必备)
原标题:小结||计算机基础知识点十(必备) 451.数据库管理系统主要功能: (1)数据定义功能 (2)数据操纵功能 (3)数据库的运行管理 (4)数据库的建立和维护功能 452.数据库不仅要反映数据 ...
最新文章
- [LeetCode] 102. Binary Tree Level Order Traversal_Medium tag: BFS
- Java 三大框架集成项目结构
- myeclipse背景设置
- 云小课 | 到底什么是区块链?
- java里的进制转换函数_基于Java中进制的转换函数详解
- java 高并发im_java高并发(四)并发编程与线程安全
- DevExpress 之 GridControl 自定义列
- mybaits 学习
- yum的更多用法和源码编译安装apache
- 计算机操作系统知识整理-计算机操作系统概述(计算机操作系统入门指南)
- 使用canvas标签绘制圆形、三角形
- 苹果留给 iOS 开发者的时间不多了:30 天内必须更新旧版本!
- 动手实现简易端口扫描器——PortScanner
- Android 课设之个人音乐播放器
- 我们国家都有哪些信息安全标准
- 使用Python对Dicom文件进行读取与写入的实现(pydicom 和 SimpleITK)
- Windows 11 系统下载,正式版尚未发布
- 公告:请访问我Blog新站——酷壳 CoolShell.me
- Java实用工具类五:URL转码、解码类
- EPLAN2022——简单PLC项目