文章目录
- 一:js
- 1.普通事件绑定和事件流绑定有啥区别
- 2.如何阻止事件冒泡和默认事件
- 3.document load 和 document ready 的区别
- 4。undefined的三种情况
- 5·对象模型 BOM 里常用的至少 4 个对象
- 6·会造成内存泄漏的
- 7:解释什么是jsonp
- 8:生成随机数
- 9:link与import的区别
- 10:优化自己的代码
- 11:简述一下你对 web 性能优化的方案?
- 12:new 操作符具体干了什么呢?
- 13:js的垃圾回收机制
- 14:如何实现浏览器不同页面之间的通信
- 15:document.write和innerhtml的区别
- 16:浏览器对象模型有:
- 17:dom对象模型
- 18:自定义属性的读写
- 20:数组去重的两种方法:
- 21:数组排序
- 22:面向对象
- 二:node
- 三:Git
- 四·vue
- 1.**使用过 Vue SSR 吗?说说 SSR?**
- 2 :Vue的核心是什么
- 3·简述你对vue的理解
- 4:简述vue的单向数据流
- 5:vue的常见修饰符
- 6:v-text与{{}}区别
- 7:v-on可以绑定多个方法吗
- 8:l **Vue****循环的****key****作用**
- 9:什么是计算属性
- 10:Vue单页面的优缺点
- 11:Vuex是什么?怎么使用?在那种场景下使用**
- 12:Vue中路由跳转方式(声明式/编程式)
- 13:跨域的解决方式
- 14:Vue的生命周期请简述
- 15:Vue生命周期的作用
- 16: DOM渲染在那个生命周期阶段内完成
- 17: Vue路由的实现
- 18:Vue路由模式hash和history,简单讲一下
- 19:Vue路由传参的两种方式,什么是路由传参
- 20:Vue数据绑定的几种方式
- 21:Vue的路由钩子函数/路由守卫有哪些
- 22:Vue-cli中如何自定义指令
- 23: Vue中指令有哪些
- 24:Vue如何定义一个过滤器
- 25:对vue 中**keep-alive**的理解
- 26:如何让组件中的css在当前组件生效
- 27:Vue生命周期一共几个阶段
- 28:Mvvm与mvc的区别
- 29:l Vue组件中的data为什么是函数
- 30:Vue双向绑定的原理
- 31:Vue中组件怎么传值
- 32:槽口请简述
- 33:计算属性与watch区别
- 34:Vue首屏加载慢的原因,怎么解决的,白屏时间怎么检测,怎么解决白屏问题
- 35:Vue双数据绑定过程中,这边儿数据改变了怎么通知另一边改变
- 36:Route与router区别
- 37:v-for与v-if优先级
- 38:Vue路由懒加载(按需加载路由)
- 33:计算属性与watch区别
- 34:Vue首屏加载慢的原因,怎么解决的,白屏时间怎么检测,怎么解决白屏问题
- 35:Vue双数据绑定过程中,这边儿数据改变了怎么通知另一边改变
- 36:Route与router区别
- 37:v-for与v-if优先级
- 38:Vue路由懒加载(按需加载路由)
一:js
1.普通事件绑定和事件流绑定有啥区别
普通事件绑定
- 如果给同⼀个元素绑定了两次或者多次相同类型的事件,那么后⾯的绑定会覆盖前⾯的绑定
- 不支持dom事件流(捕获-目标-冒泡)
事件流绑定
- 如果说给同⼀个元素绑定了两次或者多次相同类型的事件,所以的绑定将会依次触发
- 支持dom事件流(捕获-目标-冒泡)
- 不加on事件
function addEvent(obj,type,callBack){
if(obj.addEventListener){
obj.addEventListener(type,callBack);
}else{
obj.attachEvent("on"+type,callBack);
}
}
addEvent(document,"click",function(){alert("兼容写法")});
2.如何阻止事件冒泡和默认事件
e.preventdefault?e.preventdefault():return value=false
e.stoppropagation?e.stoppropagation():e.cancelbubble=true
3.document load 和 document ready 的区别
- Document.onload 是在结构和样式加载完才执⾏ js
- window.onload:不仅仅要在结构和样式加载完,还要执⾏完所有的样式、图片这些资源文件,全部 加载完才会触发 window.onload 事件
- Document.ready 原⽣种没有这个⽅法,jquery 中有 $().ready(function)
4。undefined的三种情况
- ⼀个变量定义了却没有被赋值
- ⼀个对象上不存在的属性或者⽅法:
- ⼀个数组中没有被赋值的元素
5·对象模型 BOM 里常用的至少 4 个对象
- Window
- document
- location
- screen
- history
- navigator
6·会造成内存泄漏的
- setTimeout 的第⼀个参数使⽤字符串⽽非函数的话,会引发内存泄漏。
- 闭包
7:解释什么是jsonp
Jsonp 并不是⼀种数据格式,⽽ json 是⼀种数据格式,
jsonp 是⽤来解决跨域获取数据的⼀种解 决⽅案,
具体是通过动态创建 script 标,通过标签的 src 属性获取 js 文件中的 js 脚本,
该 脚本的内容是⼀个函数调⽤,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在⻚⾯定义好回调函数,本质上使⽤的并不是 ajax 技术
8:生成随机数
Math.round(Math.random()*差值)+最小的值
9:link与import的区别
- link不仅仅可以加载css,import只能加载css
- link同时加载,import先载入页面内容
- link无兼容问题,
- link⽀持使⽤ Javascript 控制 DOM 去改变样式;⽽@import 不⽀持。
10:优化自己的代码
- 重复使用
- 避免过多使用全局变量
- 闭包中变量的释放
- 适当的注释
11:简述一下你对 web 性能优化的方案?
1、尽量减少 HTTP 请求如何写简历 269
2、使⽤浏览器缓存
3、使⽤压缩组件
4、图片、JS 的预载入
5、将脚本放在底部
6、将样式文件放在⻚⾯顶部
7、使⽤外部的 JS 和 CSS
8、精简代码
12:new 操作符具体干了什么呢?
1、创建⼀个空对象,并且 this 变量引⽤该对象,同时还继承了该函数的原型。
2、属性和⽅法被加入到 this 引⽤的对象中。
3、新创建的对象由 this 所引⽤,并且最后隐式的返回 this 。
13:js的垃圾回收机制
-
什么是垃圾
一般来说:没有被引用的对象就叫做垃圾,还有一种可能是好几个变量之间相互引用形成闭环,没有其他的对象引用该闭环内的对象,也会被当做垃圾
-
如何回收垃圾
浏览器会对内存中的变量进行标记,从根对象开始进行标记,层层递进,将被引用的进行标记,要是没有被引用就不标记,最后将没有标记的进行回收,释放内存
14:如何实现浏览器不同页面之间的通信
- 通过本地存储的方式
- vue中通过传值的几种方式
- react中的几种传值方法
15:document.write和innerhtml的区别
document.write会重绘页面整体
innerhtml只是更新使用的那一部分
16:浏览器对象模型有:
document,location,screen,navigation,event,history
window中常用的是
一个事件onload,两个定时器,三个弹出框
17:dom对象模型
document.documentElement表示html元素
document.body返回body元素
document.head返回head元素
-
节点的添加操作1【父加子】
var h1=document.creatElement("h1") 父节点.appendchild(h1)
节点的添加操作2【将新节点插入到目标节点之前】
父节点.insertBefore(新节点, 目标节点)
-
删除操作
目标节点.remove()
18:自定义属性的读写
-
setAttribute(“属性名称”,“属性值名称”)
-
getAttribute(“属性名称”)
oDiv.setAttribute("heihei",123);//写 document.write(oDiv.getAttribute("heihei"));//读
20:数组去重的两种方法:
方法一:
let arr=[3,5,3,1,3,1]
function(arr){
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1)
}
}
}
return arr
}
方法二:
let arr=[1,4,1,6,9]
function(arr){
let newarr=[]
this.arr.forEach((v,i)=>{
if(newarr.indexof(arr[i])==-1){
newarr.push(arr[i]))
}
})
return newarr
}
方法三:
let arr=[1,4,1,6,9]
function(arr){
let newarr=[]
this.arr.forEach((v,i)=>{
if(!newarr.includes(arr[i])){
newarr.push(arr[i]))
}
})
return newarr
}
21:数组排序
方法一:
var arr=[1,5,7,9,16,2,4];
for(var j=0;j<arr.length;j++0{
if(arr[j]>arr[j+1]){
temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}}
方法二
var arr=[1,23,5,8,11,78,45];
var temp;
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;i++){
if(arr[i]>arr[j]){
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}}
方法三:
arr.sort(function(a,b){
return b-a;
})
22:面向对象
一般使用字面量的形式直接创建对象,但是这种创建方式对于创建大量相似对象的时候,会产生大量的重复代码。
为了解决该问题,在ES6之前还没有出现类的概念的时候,采用的是函数来模拟类的实现,从而产生出可复用的对象创建方式
es5之前通过构造函数实现面向对象
function Student(id,name){
this.id=id
this.name=name
this.show=function(){
console.log(this.name+"的id号是"+this.id)
}
}
let s1=new Student(1,"李")
s1.show()
ES6实现面向对象
class Student{
constructor(id,name){
this.id=id
this.name=name
}
show(){
console.log(this.name+"的id号是"+this.id)
}
}
let s1=new Student(1,"李")
s1.show()
二:node
1·什么是node
node是一种后端语言,是基于谷歌浏览器的v8引擎的服务端语言
node是基于javascript语法的一套服务器
- 单线程:高并发使得node让cpu的利用率可以达到100%
- 非阻塞式i/o 就是node在访问高io(输入输出)的应用的时候 不会等待着它的完
- 事件驱动 把高io的操作放到一个事件列队当中 完成后通过回调函数的方式在进入到线程里
- 轻量级:因为node.js本身即是代码又是服务器,前后端可以使用同一套语法
所以node一般适合开发高并发的,高i/o的
不适合开发一些对稳定性要求较高的应用【银行,医院,电力等】
2·node的全局对象有
global:定义整个runtime时期的全局变量
console:定义控制台的标准输出
module:模块化
exports:导出
process:用来描述当前Node.js进程状态的对象,提供一个与操作系统的简单接口
3·node的定时器有
settimeout,setinterval, clearinterval,
4·通过哪些方法可以防止程序的崩溃
1,try-catch-finally
5·:npm是什么
npm是基于node的管理和分发包的工具,是目前最大的开放源代码的生态系统,可用于安装、卸载、发布、查看包等。
通过npm,可以安装和管理项目的所有依赖项,同时我可以指定版本
同时你也可以将自己的代码进行上传
6:npm的作用是什么?
npm是同 Node .js一起安装的包管理工具,能解决 Node. js代码部署上的很多问题。常见的使用场景有以下几种。
(1)允许用户从npm服务器下载别人编写的第三方包到本地。
(2)允许用户从npm服务器下载并安装别人编写的命令行程序到本地。
(3)允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。
7·node的fs模块
- fs.readFile(文件名,回调函数)读文件
- fs.writeFile(路径,内容,回调函数)
- fs.appendFile(路径,内容,回调函数);
- fs.mkdir() 创建目录
- fs.rmdir() 删除目录
- fs.unlink()删除文件
8:node的http模块
let http=require("http")
// 2.创建服务
// 形参:req:请求, res:响应
http.createServer((req,res)=>{
// 返回响应头
res.writeHead(200,{"Content-type":"text/html;charset=UTF-8"})
// 设置返回内容
res.end("我是一个服务器")
}).listen(3000)
9、express项目的目录大致是什么结构的?
首先,执行安装 express的指令:npm install express-generator-g。
创建的项目目录结构如下。
- ./app.js 应用核心配置文件(入口文件)
- ./bin 存放启动项目的脚本文件
- ./ package.json 存储项目的信息及模块依赖
- ./public 静态文件(css、js、img等)
- ./routes 路由文件(MVC中的 contro1ler)
- ./views 页面文件(jade模板)\
10:express常用函数有哪些?
常用函数有以下几个
- express .Router—路由组件
- app.get—路由定向。
- app. configure——配置。
- app.set一设定参数。
- app.use——使用中间件。
11:express获取参数
12:模块化:
commonjs模块化
暴露:exports或者module.exports,引入:require
es6模块化:
暴露export,引入import {属性或函数…} from 路径;引入这个模块
三:Git
1·什么是git
Git是目前最流行的分布式版本控制管理工具
Git主要分为四部分:1。工作区,2,缓存区,3本地仓库,4远程仓库
2:Git的常用命令
1. Git init:初始化仓库
2. Git add:将文件添加至缓冲区
3. Git commit -m:将缓冲区的内容添加到本地仓库
4. Git status:查看本地仓库当前的状态
5. Git diff:比较工作区和缓冲区的区别
6. Git reset :回退版本号
7. Git push:上传远程代码并合并
8. Git pull:下载远程代码并合并
3·Git的分支管理
9. Git branch分支名字:创建分支
10. Git checkout(分支名字):切换分支
11. Git merge 分支名字:合并某分支到当前的分支
12. Git branch:查看分支
13. Git branch –d 分支名字:删除分支
14. Git checkout –d 分支名字:创建并切换分支
四·vue
1.使用过 Vue SSR 吗?说说 SSR?
Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
即:SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成,服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。
服务端渲染 SSR 的优缺点如下:
(1)服务端渲染的优点:
- 更好的 SEO:因为 SPA 页面的内容是通过 Ajax 获取,而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容,所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容;而 SSR 是直接由服务端返回已经渲染好的页面(数据已经包含在页面中),所以搜索引擎爬取工具可以抓取渲染好的页面;
- 更快的内容到达时间(首屏加载更快):SPA 会等待所有 Vue 编译后的 js 文件都下载完成后,才开始进行页面的渲染,文件下载等需要一定的时间等,所以首屏渲染需要一定的时间;SSR 直接由服务端渲染好页面直接返回显示,无需等待下载 js 文件及再去渲染等,所以 SSR 有更快的内容到达时间;
(2) 服务端渲染的缺点:
- 更多的开发条件限制
- 更多的服务器负载
2 :Vue的核心是什么
数据驱动:Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它让开发者省去了操作DOM的过程,只需要改变数据。Vue对操作进行监听,当视图发生改变时,vue监听到这些变化,从而改变数据,这样就形成了数据的双向绑定。
组件响应原理:数据(model)改变驱动视图(view)自动更新
组件化:组件化实现了扩展HTML元素,封装可用的代码。
3·简述你对vue的理解
Vue是目前最流行的一种渐进式的自底向上增量开发的一种js框架,
渐进式体现了可以在原有的基础上,将一两个功能模块进行使用vue开发
自底向上增量开发体现在先实现简单的基础页面。在去添加功能,从简单到复杂的这么一个过程
Vue主要是用来解决:数据绑定的问题,开发大型单页面应用的
Vue主要使用的是mvvm框架
M:模型层,负责业务数据相关
V(View,视图层):负责视图相关,细分下来就是html+css层,
VM(ViewModel):M与V的桥梁,负责监听M或者修改V,是双向绑定的要点,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步
复杂的数据状态维护完全由 MVVM 来统一管理。
4:简述vue的单向数据流
所谓单行数据流是指vue将数据从父元素传递给子元素,其子元素里的数据进行改变以后,父元素里的数据并不会随着子元素的变化进行变化
5:vue的常见修饰符
Vue的修饰符分为,键盘修饰符和事件修饰符
-
键盘修饰符
On:表示方向键上键被触发
Ctrl:表示ctrl建被按下
Enter:表示回车键被按下
Space:表示空格键被按下
-
事件修饰符
Prevent:表示阻止事件的默认行为
Stop:表示阻止事件的冒泡行为
Capture:表示事件的捕获行为
Self:表示只触发自己范围内的事件
Once:表示只会触发一次该事件
6:v-text与{{}}区别
v-text与{{}}等价
{{}}叫做插值模板,v-text叫做指令
{{}}会造成屏幕闪动:在渲染数据量比较大的数据的时候,可能会把大括号给显示出来
解决屏幕闪动的办法就是使用v-cloak,或者是使用v-text
v-clock的使用是:
第一步:在el挂载的标签上添加
第二步:设置css,[v-clock]{display:none}
7:v-on可以绑定多个方法吗
v-on可以绑定多个方法,多个方法之间通过逗号隔开
也可以绑定给一个事件绑定多个修饰符
8:l Vue循环的key****作用
Key的作用是用来高效的更新虚拟dom,
在新旧节点进行对比的时候,key值就相当于一个唯一的标识符,
因为有了这个key值,所以在渲染元素的时候,通常会复用已有的元素,而并不是重新进行渲染,提高了渲染的效率
9:什么是计算属性
计算属性的本质上是vue实例下的一个属性,不过该属性具有计算的功能,在进行一些逻辑运算的时候就可以使用计算属性,减少了插值模板的逻辑运算,
计算属性在计算值变化的时候,会自动进行重新计算,并将结果渲染到视图层,并将结果放到缓存中,下次要是展示就直接拿出来使用,不需要重新调用,只有在值进行变化的时候会重新调用
10:Vue单页面的优缺点
Vue单页面是指:只有一个主页面的应用,在页面进行加载的时候,就加载出该页面所需的所有的东西
- 单页面的优点:
用户体验好,快,内容的改变并不会引起整个页面的重新加载
比较好的前后端分离,分工明确
采用组件化的思想,代码结构更加清晰明了
- 单页面的缺点:
就是不利于搜引擎的抓取,
首次渲染比较慢
11:Vuex是什么?怎么使用?在那种场景下使用**
Vuex是状态管理工具
使用的话:首先要进行vuex的下载,
下载完成以后将其引入到main.js中,将其绑定到vue实例中
Vuex的一般作用是:组件之间数据或者方法的一种共享
Vuex里面主要有五个比较重要的属性
1.State:存放数据的,一般使用this.$store.state调用
2.mutations:用来对state的数据进行修改的,一般采用commit进行调用
mutatons:{
名字(state,payload){
State.num= State.num+1
}
}
调用的时候:
Payload就是传过来的参数
This.$store.commit(“名字”,payload)
3.Actions:用来进行异步操作的数据请求,一般采用dispatch进行调用
Content表示this.$store
actions: {
vuexget(content, payload) {
getlink("/data/list/recom").then((ok) => {
content.commit("xiu", ok.data)
})
}
},
调用的时候:
This. $store.dispatch(“名字”, payload)
4.Getters:功能类似于computed的,是对state里的数据进行逻辑运算的
5.Modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
12:Vue中路由跳转方式(声明式/编程式)
Vue的路由跳转分为两种一种是声明式的:
<router-link to=” 你要去的路径”>
一种是编程式的:编程式的一般是通过this.$router.push(“你要去的路径”)
13:跨域的解决方式
跨域主要是由于浏览器的同源策略引起的,浏览器为了安全期间,不允许不同源的数据进行展示,同源策略一般是指同端口,同协议,同主机的
解决跨域主要有三种方式
-
jsonp【通过jsonp:script标签的src属性,可以访问js脚本得内容】
var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.....:8080/login? user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); }
-
2:通过代理跨域proxy
devServer:{ proxy: { '/api': { target: 'http://localhost:3000/', //对应后端的端口 changeOrigin: true, ws: true, pathRewrite: { '^/api': '' }} } }
-
通过cors
14:Vue的生命周期请简述
Vue的生命周期就是vue实例从创建到销毁的过程
其中包括开始创建,初始化数据,编译模板,挂载dom,渲染,更新,卸载等一系列的过程,称为vue的生命周期
15:Vue生命周期的作用
Vue的生命周期函数的作用是,是开发者在不同的阶段添加自己代码的机会,可以更加便利的控制vue整个过程中的逻辑
16: DOM渲染在那个生命周期阶段内完成
在mounted:模板编译完成以后得周期进行
17: Vue路由的实现
Vue里的路由主要是通过vue-router实现的,
主要是通过url的改变,在不重新请求页面的情况下,快速的渲染出不同的页面
主要有两种模式,包括history模式和hash模式
18:Vue路由模式hash和history,简单讲一下
Hash:在url的显示上有#,比较丑,在回车刷新的时候不会丢失页面,依旧在hash对应的页面,支持一些低版本的浏览器
History:在url的显示上没有#,比较好看,在回车刷新的时候会发生页面的丢失,一般就是404错误,并且是html5新出的api,不太兼容低版本的浏览器
19:Vue路由传参的两种方式,什么是路由传参
动态路由就是把匹配某种模式下的路由映射到同个组件中,其实本质就是通过url进行传参
-
Pramas传参一般分为三个步骤:
1. 在路由规则里配置要去的页面【给谁传参数就将参数绑定到谁的路径上】 Path:”/all/:xm” 2. 开始发送: this.$router.push({name:" 你要去的路由的名字",params:{xm:id}}) 3. 接受参数: this.$route.params. xm
-
Query传参一般的为两步:
1.开始发送: this.$router.push({name:" 你要去的路由的名字",query:{xm:id}}) 2.接受参数 this.$route. query. xm
20:Vue数据绑定的几种方式
a) 将数据绑定到{{}}或者v-text上
b) 将数据绑定到v-html标签上
c) 将数据绑定到v-bind上,以属性的样式进行解析
d) 通过一次性绑定v-once
e) 通过双向绑定v-model
21:Vue的路由钩子函数/路由守卫有哪些
路由守卫是指在路由进行跳转的时候被自动调用的函数
- 全局前置守卫:router.beforeEach((to,from,next)=>{}
- 全局后置守卫: router.afterEach((to,from)=>{}
- 路由独享守卫:beforeEnter(to,from,next){ }
- 前置组件内的守卫:beforeRouterEnter(to,from,next){ }
- 后置组件内守卫:beforeRouterleave(to,from,next){ }
22:Vue-cli中如何自定义指令
Directives:{
自定义指令名字:{
自定义钩子函数(val){
//形参就是把自定义指令放在那个dom上他就是谁
}
}
}
自定义指令的钩子函数是:
Bind:绑定指令到相关元素上,只执行一次
Unbind:接触指令和元素之间的绑定,只执行一次
Update:指令所在的组件节点更新时调用
Componentupdate:指令所在的组件节点更新完后调用
Inserted:绑定指令的元素在页面中展示时调用
23: Vue中指令有哪些
v-for:循环数组,对象,字符串,数字
v-on:绑定事件监听
v-bind:动态绑定一个或者多个属性
v-model:表单控件或者组件上创建双向绑定
v-if v-else v-else-if 条件渲染
v-show 根据表达式真假,切换元素的display
v-html 更新元素的innerhtml
v-text 更新元素的textcontent
v-pre 跳过这个元素和子元素的编译过程
v-clock 这个指令保持在元素上知道关联实例结束编译
v-once 只渲染一次
24:Vue如何定义一个过滤器
Vue中有两种过滤器,一种全局过滤器,一种局部过滤器
使用方法:
{{表达式 | 过滤器}}
-
其中全局过滤器的书写时:
vue.filter{ 过滤器名字(val){ Return 结果 } }
-
其中局部过滤器的书写时:
filters{ 过滤器名字(val){ Return 结果 } }
25:对vue 中keep-alive的理解
概念:keep-alive是vue的内置组件,当它动态包裹组件时,会缓存不活动的组件实例,它自身不会渲染成一个DOM元素也不会出现在父组件链中
作用:在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间以及性能消耗,提高用户体验。
使用:
<keep-alive include="Comb,Comc">
<component :is="com"></component>
</keep-alive>
生命周期函数:
Activated在keep-alive组件激活时调用,
deactivated在keep-alive组件停用时调用
26:如何让组件中的css在当前组件生效
添加一个scoped,表示组件仅在当前组件中起作用
27:Vue生命周期一共几个阶段
Beforecreate:在vue实例创建之前
Created:vue实例已经创建完成,但是dom还没有挂载上
Beforemount:在dom准备渲染之前
Mounted:dom已经挂载好了,此时可以操作dom
Beforeupdate:在所有的组件更新之前
Updated:在所有的组件更新之后
Beforedestory:在vue实例销毁之前
destored:在vue实例销毁之后
28:Mvvm与mvc的区别
Mvc模型视图控制器,视图是可以直接访问模型,所以,视图里面会包含模型信息,mvc关注的是模型不变,所以,在mvc中,模型不依赖视图,但是视图依赖模型
Mvvm 模型 视图 和vm vm是作为模型和视图的桥梁,当模型层数据改变,vm会检测到并通知视图层进行相应的修改
29:l Vue组件中的data为什么是函数
Data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响
如果是引用类型(对象),当多个组件共用一个数据源时,一处数据改变,所有的组件数据都会改变,所以要利用函数通过return返回对象的拷贝,(返回一个新数据),让每个实例都有自己的作用域,相互不影响。
30:Vue双向绑定的原理
Vue双向绑定就是:数据变化更新视图,视图变化更新数据
Vue数据双向绑定是通过数据劫持结合发布订阅者模式来实现的,
数据劫持:object.defineproperty可以感知到数据变化,在通过setter进行获得,getter设置
观察者模式 当属性发生改变的时候,使用该数据的地方也发生改变
31:Vue中组件怎么传值
正向:父传子 父组件把要传递的数据绑定在属性上,发送,子组件通过props接收
子:
:src =” imgurl”
Props:[“imgurl”]
父
: imgurl=”http://www.baidu.com”
逆向:子传父 子组件通过this.$emit(自定义事件名,要发送的数据),父组件设置一个监听事件来接收,然后拿到数据
**兄弟:**eventbus 中央事件总线
第一步:创建一个eventbus的文件夹以及index.js的文件
第二步:在a组件中引入中央事件总线,设置一个抛出事件
eventBus.$emit("pao","我是数据")
第三步:在b组件同样引入中央事件总线,用来接收抛出事件
eventBus.$on("pao",(msg)=>{
his.text=msg;
})
通过:Vuex
优点:解决了非父子组件的通信,减少了ajax请求次数,有些可以直接从state中获取
缺点:刷新浏览器,vuex中的state会重新变为初始状态,解决办法是vuex-along,得配合计算属性和sessionstorage来实现
32:槽口请简述
大概分这几点,首先槽口(插槽)可以放什么内容?放在哪?什么作用?可以放任意内容,在子组件中使用,是为了将父组件中的子组件模板数据正常显示。
具名插槽和匿名插槽,作用域插槽,说白了就是在组件上的属性,可以在组件元素内使用,
可以在父组件中使用slot-scope从子组件获取数据
33:计算属性与watch区别
Computed watch 区别就是computed的缓存功能,当无关数据数据改变时,不会重新计算,直接使用缓存中的值。
计算属性是用来声明式的描述一个值依赖了其他的值,当所依赖的值后者变量发生变化时,计算属性也跟着改变,
Watch监听的是在data中定义的变量,当该变量变化时,会触发watch中的方法
34:Vue首屏加载慢的原因,怎么解决的,白屏时间怎么检测,怎么解决白屏问题
-
路由懒加载
-
使用webpack的externals属性把不需要打包的库文件分离出去,减少打包后文件的大小
module.exports = { externals: { jquery: 'jQuery' }};
-
Ui框架按需引入加载
-
使用v-if和v-else添加加载的动态效果
-
使用vue的ssr技术
35:Vue双数据绑定过程中,这边儿数据改变了怎么通知另一边改变
通过数据劫持和发布订阅者模式
36:Route与router区别
-
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
-
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
37:v-for与v-if优先级
首先不要把v-if与用在同一个元素上,原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。
v-for 比 v-if 具有更高的优先级
38:Vue路由懒加载(按需加载路由)
component: () => import('../views/About.vue')
?放在哪?什么作用?可以放任意内容,在子组件中使用,是为了将父组件中的子组件模板数据正常显示。
具名插槽和匿名插槽,作用域插槽,说白了就是在组件上的属性,可以在组件元素内使用,
可以在父组件中使用slot-scope从子组件获取数据
33:计算属性与watch区别
Computed watch 区别就是computed的缓存功能,当无关数据数据改变时,不会重新计算,直接使用缓存中的值。
计算属性是用来声明式的描述一个值依赖了其他的值,当所依赖的值后者变量发生变化时,计算属性也跟着改变,
Watch监听的是在data中定义的变量,当该变量变化时,会触发watch中的方法
34:Vue首屏加载慢的原因,怎么解决的,白屏时间怎么检测,怎么解决白屏问题
-
路由懒加载
-
使用webpack的externals属性把不需要打包的库文件分离出去,减少打包后文件的大小
module.exports = { externals: { jquery: 'jQuery' }};
-
Ui框架按需引入加载
-
使用v-if和v-else添加加载的动态效果
-
使用vue的ssr技术
35:Vue双数据绑定过程中,这边儿数据改变了怎么通知另一边改变
通过数据劫持和发布订阅者模式
36:Route与router区别
-
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
-
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
37:v-for与v-if优先级
首先不要把v-if与用在同一个元素上,原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。
v-for 比 v-if 具有更高的优先级
38:Vue路由懒加载(按需加载路由)
component: () => import('../views/About.vue')