1、自我介绍
2、用的vue2还是vue3?
vue2
3、Vue2的生命周期方法?常用?做哪些事情? mounted做什么的,挂载是把什么挂载在什么上?虚拟dom
beforeCreate
created:实例创建完成,data已经初始化完毕但是el还没挂载上,dom节点还未生成,常用于获取刚进入页面展示的接口数据,赋给data里
beforeMount
mounted:el挂载完成,把模板中的html渲染到页面上,也能请求接口,但是因为dom结构已经生成,此时请求接口可能导致页面闪动
beforeUpdate
updated
beforeDestory:清理定时器
destoryed
如果有keep-alive还有这两个生命周期
actived
deactived
挂载:将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。(我的理解:把虚拟dom元素渲染成真实的dom)
虚拟dom:我的理解是用js把dom元素抽象成一个对象
4、computed计算属性有什么特点?computed与watch区别
对象中的某个属性改变watch能否监测到变化吗?
computed:根据一些数据计算出新的值,必须要有return返回值
有缓存,可以在页面多个地方主动调用,只有依赖的变量发生改变才重新计算
可以像data里的对象一样调用
默认第一次加载时候就监听
当一个值被多个值影响的时候使用
watch:监听data里数据的变化,如果想深度监听对象的属性变化要加deep:true
不支持缓存,监听的数据发生改变就会调用
默认第一次加载不做监听,如果需要加载就执行一次的话可以使用`immediate`属性设置为true
当一个值影响多个值的时候使用
5、filter
过滤器:处理后台返回来的数据,如:金额两位小数补零;0,1转化为男女
使用时i通过|管道符进行使用
6、组件中传值?父子传参
1、props传值
父传子:在子里用props接收参数
子传父:this.$emit传到父组件的回调函数获取传过来的值
2、ref传值
通过ref属性,父组件调用子组件的方法,this.$refs,把要传的数组作为参数传给子组件,子组件获取该参数,并使用
3、子组件用this.$parents获取父组件的属性和方法
4、bus事件总线传值
5、状态管理工具vuex
7、Vuex由什么组成?都把什么存在vuex里
state:类似于data存放数据的仓库
getter:功能类似于计算属性
mutation:修改state的值只支持同步,通过$store.commit提交到vuex
actions:异步处理,通过#store.dispatch提交到vuex,不能直接修改state最后提交到mutation里改
module:模块化拆分vuex
都把什么存在vuex里:
多个组件都要用到的数据,比如登录用户信息
8、SessionStorage与localstorage区别
同一浏览器不同域名网站的localstorage可以互相访问吗?
最大限制分别是多大?
LocalStorage------------本地存储
SessionStorage---------临时存储
相同点
存储大小都在5M左右
都存在同源策略,无法跨域进行访问
都采用键值对(key :value)的形式存储
不同点
LocalStorage的存储为永久存储,如果不手动删除的话不会清空
SessionStorage的存储为临时存储,会话结束后就会清除数据
二者均在同一浏览器的同源文档(协议、域名、端口一致)之间共享数据
但是SessionStorage更为苛刻,还需要在同一个标签页下才能共享,通过跳转的页面可以共享sessionStorage值
9、vue-router 路由守卫
路由传参:
params:浏览器不显示参数
query:浏览器显示参数
两种模式:
hash模式:默认,有#
history模式:history模式需要后台配置支持。如果后台没有正确配置,访问时会返回404
懒加载:component:()=>import()导入的方法
路由守卫:
全局路由守卫:router.beforeEach/afterEach((to,from,next)=>{})
组件内的守卫:beforeRouteEnter/beforeRouteLeave:(to,from,next)=>{}
路由独享守卫:beforeEnter:(to,from,next)=>{}
10、Fetch请求做拦截怎么做
写一个统一的请求方法,所有的请求都调用这个方法,从而实现请求与返回的拦截。
11、http状态码?400?401?
2XX 成功
200 ok(请求成功)
204 no content (请求成功,但是没有结果返回)
206 partial content (客户端请求一部分资源,服务端成功响应,返回一范围资源)
3XX 重定向
301 move permanently (永久性重定向)
302 found (临时性重定向)
303 see other (示由于请求对应的资源存在着另一个 URI,应使用 GET
方法定向获取请求的资源)
304 not modified (表示在客户端采用带条件的访问某资源时,服务端找到了资源,但是这个请求的条件不符合。跟重定向无关)
307 temporary redirect (跟302一个意思)
4XX 客户端错误
400 bad request (请求报文存在语法错误)
401 unauthorized (需要认证(第一次返回)或者认证失败(第二次返回))
403 forbidden (请求被服务器拒绝了)
404 not found (服务器上无法找到请求的资源)
5XX 服务器错误
500 internal server error (服务端执行请求时发生了错误)
503 service unavailable (服务器正在超负载或者停机维护,无法处理请求)
12、v-for?加key为什么? v-if
有利于虚拟dom的更新,如果key不同直接不对比,提高渲染效率
key选择:
最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
最好不用index,如果对数据的逆序添加、逆序删除等破坏顺序操作,用index作为key值,效率低。
13、Vue2数据双向绑定原理?
Object.defineProperty:
缺点:get和set 允许Vue观察数据的更改并触发更新。但是,如果你在Vue实例化后添加(或删除)一个属性,这个属性不会被vue处理,改变get和set。
无法监听数组变化直接使用索引(index)设置数组项时,不会被vue检测到。
可以引起数组视图更新的方法
push();
pop();
shift();
unshift();
splice();
sort();
reverse();
公用:$set增加 $delete删
vue3:Proxy
14、vue.use()做了哪些事情?
调用插件的install方法,之后会去把install中全局的方法,实例,公用的组件、和自定义指令绑定到vue实例上,注册到全局。
15、Js原型链?什么时候确定最后找不到?怎么返回的Undefind?父级的父级
1. 首先查找对象自身有没有该属性
2. 如果没有查找原型__proto__(__proto__指向prototype原型对象)
3. 还没有找到,就去查找原型对象的原型(Object的原型对象)
4. 一直找到Object为止,Object原型对象的原型会指向null
16、普通函数里this的指向?
以函数形式调用的永远指向window
以方法形式调用,this指向调用方法的对象
17、Js事件模型有哪几个阶段,事件冒泡,事件委托
Div里有个button,都绑定点击响应函数(f1 f2),点击button谁会被调用,顺序?
谷歌先f2再f1和ie8先f1再f2的行为是一样的么?
事件捕获(从外向内)、目标阶段、事件冒泡(从内向外)
ie只有目标阶段、事件冒泡(从内向外)
18、es6定义变量let count与var区别?Var的作用域?一定是全局的吗?var在函数体里定义函数外能打印出来吗?不能const定义一个对象,给对象赋值会报错吗?直接赋值会,但是采用obj.属性名=属性值不会
var、let和count的区别?
都是一个对象声明
1.var可重复声明,并且有变量提升
2.let不能进行重复声明,没有变量提升,块级作用域,只要是{ }就都是块级作用域
3.count通常用来声明一个常量,不可重复声明,值不可以修改,如果修改必须是对象,对象是引用数据类型
var声明的变量会自动被添加到最接近的环境中,如果初始化变量时没有使用var声明,该变量会自动被添加到全局环境。
19、Css sass less sass和 less怎么定义变量
sass和less都是css预处理器
1.less 基于javascript ,是在客户端处理的,sass是基于ruby,是在服务端处理的
2.关于变量在less和sass中的区别,less定义变量用@, sass定义变量用$
3.输出设置不同,less中没有输出设置,sass则有四个输出设置,分别是nested, compact, compressed 和 expanded
4.sass支持条件语句,比如 if(){}else {}、for()等语句,而 less则不支持
20、css盒模型
标准盒模型:margin border padding content
IE盒模型:margin content(border padding)
box-sizing:border-box/content-box;转换
21、Css里隐藏一个元素;display:none和visibility:hidden区别
display:none :根本不生成dom元素,不能触发
visibility:hidden:存在,占用空间,不能触发
opacity:0::存在,占用空间,可以触发
22、有Vue从0-1搭建项目经验吗?没有
23、搭建一个项目有哪些考量?
安全性、可维护性、可扩展性、性能、工作量