vue篇
一、vue组件 父子、子父 、兄弟通信
-
父传递子 在父组件中给子组件标签上绑定一个属性,属性上挂在需要传递的值 在子组件通过peops:[“自定义属性名”]来接收数据
-
子传递父
(1)在父组件中给子组件标签绑定一个自定义事件,给这个事件 挂载需要调用的方法
(2)在子组件的方法通过this.$emit(’自定义事件名‘)来调用这个方法
-
兄弟组件通信
(1)创建一个空的vue实例BUS
(2)通过BUS.$emit(‘事件名‘)传到空的vue实例中
(3)通过BUS.$on(‘事件名’,(参数)>{挂载从子1传来的数据})来接收
二、vue自定义指令
自定义指令分为:全局自定义指令,局部自定义指令。
- 使用
Vue.directive('focus',{bind(el,binding){},inserted(){}})
进行全局自定义指令 - 参数1 :指令的名称
- 参数2: 是一个对象,这个对象身上,有钩子函数.
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
三、vue路由导航守卫
-
请简单说一下vue路由的原理?
Vue的路由实现:hash模式 和 history模式
-
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
-
特点:
- hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
- hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
-
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
-
特点:
- history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
-
2. 路由守卫的钩子函数都有哪些?分别是什么意思?
-
vue-router全局有三个守卫:
- router.beforeEach 全局前置守卫 进入路由之前
- router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
- router.afterEach 全局后置钩子 进入路由之后
-
组件内的守卫:
- beforeRouteEnter
- beforeRouteUpdata(2.2新增)
- beforeRouteLeave
3. 路由守卫钩子函数里面的三个参数分别是什么?
- to:即将要进入目标的路由对象
- from:当前导航即将要离开的的路由对象
- next:调用该方法后,才能进入下一个钩子
**作用:**当我们路由切换到一个组件里面,如果没有权限,不让进入,有权限可以进入
四、 r o u t e r 和 router和 router和route的区别
- r o u t e r 为 v u e r o u t e r 实 例 , 想 要 导 航 不 同 u r l , 则 使 用 router为vuerouter实例,想要导航不同url,则使用 router为vuerouter实例,想要导航不同url,则使用router.push方法
- $route为当前router跳转对象里面可以获取name,puth,query,params等
五、 vue-router路由传参的方式一共有几种?他们是如何就收传递过来的参数?
-
三种:
- 分别是query,params,动态路由传参
-
接收:
- 通过query方式传递过来的参数一般是通过this.$route.query接收
- 通过params方式传递过来的参数一般是通过this.$route.params接收
- 通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
六、为何组件的data必须是一个函数
因为组件是用来复用的,且js里对象是引用关系,
如果组件中的data是一个对象,那么这样作用域没有隔离,子组件中的data属性值会互相影响,
如果组件中data选项是一个函数,那么每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的data属性值不会被互相影响;
而new Vue的实例是不会被复用的,因此不存在引用对象的问题
七、vue常用指令
- v-model 多用于表单元素实现双向数据绑定
- v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或json
- v-show 显示内容 ,通过display=block/none来控制元素隐藏出现
- v-hide 隐藏内容 同上
- v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)
- v-else-if 必须和v-if连用
- v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
- v-bind 动态绑定 作用: 及时对页面的数据进行更改
- v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
- v-text 解析文本
- v-html 解析html标签
- v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
- v-once 进入页面时 只渲染一次 不在进行渲染
- v-cloak 防止闪烁 该属性需配合 样式使用:
- v-pre 把标签内部的元素原位输出
八、v-if与v-show的区别
-
相同点:都可以动态控制着dom元素的显示隐藏
-
区别:
v-if
: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除
;**`v-show`:** 控制DOM 的显示隐藏是为DOM元素添加css的样式`display`,设置`none`或者是`block`,`DOM元素是还存在的`
-
性能对比:
v-if
有更高的切换消耗;
v-show
有更高的初始渲染消耗 -
使用场景:
v-if
适合运营条件不大可能改变的场景下;
v-show
适合频繁切换;
九、vue生命周期
-
beforeCreate( 创建前 )
此时组件的选项对象还未创建,el 和 data 并未初始化,created(创建后)
Vue里的数据在内存中已经创建完毕,但是还没有渲染到页面上。可做操作:从服务器获取一些初始化的数据,或者通过ajax向服务器发送一些数据
-
beforeMount(挂载前)
完成了 el 和 data 初始化mounted(挂在后)
数据已经渲染在了浏览器的页面上。可做操作:操作DOM节点)
-
beforeDestory(销毁前)
一般在这一步做一些重置的操作比如清除掉组件中的定时器
实例仍然完全可用,,和监听的domdestory(销毁后)
此时移除定时器或者事件绑定
(此时状态:奄奄一息。。但是销毁的时候需要手动销毁:) -
beforeupdated(更新前)
虚拟 DOM 重新渲染之前
,可以在该钩子中进一步地更改状态updated(更新后)
页面发生变化的时候才触发此声明周期函数。
十、vue 双向数据绑定原理
使用v-model来实现
vue双向数据绑定原理,又称vue响应式原理,双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,
第一步:创建一个监听者,Observer,监听属性变化,当属性变化的时候,通知订阅者。
第二步:创建一个订阅者,watcher 用来接收属于变化的通知并且执行相对应的方法,然后更新视图view。
第三部,创建一个解析器,compile ,可以扫描和解析每一个节点相关指令,还可以,初始化模板数据,和初始化相关订阅者
十一、vuex 中 state, getters, mutations, actions, modules, plugins 的用途,和用法
Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一 种可预测的方式发生变化。
- state:存储状态(变量)
- getters:对数据获取之前的再次编译,可以理解为 state 的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations : 修 改 状 态 , 并 且 是 同 步 的 。 在 组 件 中 使 用$store.commit(’’, params),这个和我们组件中的自定义事件类似。
- actions:异步操作。在组件中使用是$store.dispath(’’)
- modules:store 的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
十二、mvvm和mvc
mvvm
概念:MVVM
是 Model-View-ViewModel
的缩写,分别对应着:数据,视图,视图模型。Model是我们应用中的数据模型,View是我们的UI视图层,通过ViewModle,可以把我们Modle中的数据映射到View视图上,同时,在View层修改了一些数据,也会反应更新我们的Modle。简单理解就是双向数据绑定
,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。
以vue为例:
view
对应 template
,vm
对应 new Vue({…})
,model
对应 data
MVC模式概要(典型的框架有angular.js)
View:视图层;
Model:业务数据层;
Controller: 控制器。接收View层传递过来的指令,选取Model层对应的数据,进行相应操作。
十三、vue之prop
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
- prop 数据单项传递,父影响子,子不影响父
- 不能在组件中直接修改 prop 传递过来的值,Vue 会给出警告
- prop 验证时,会在实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
- 非 prop 特性,组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。
十四、vue2与vue3的区别
总结:
1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()
对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 Proxy
API 对数据代理。
相比于vue2.x,使用proxy的优势如下
- defineProperty只能监听某个属性,不能对全对象监听
- 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
- 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
2. 默认进行懒观察(lazy observation)
在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
3. 更精准的变更通知。
比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。
4. 3.0 新加入了 TypeScript 以及 PWA 的支持
5.vue2和vue3组件发送改变
十五、keep-alive
- keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
- router-view 也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存
应用场景?
被keep-alive包裹的动态组件会缓存不活动的实例,再次被调用这些被缓存的实例会被再次复用,对于我们的某些不是需要实时更新的页面来说减少了性能上的消耗
十六、 什么是虚拟dom,和 diff 算法
-
虚拟DOM
它是一个Object对象模型,用来模拟真实dom节点的结构
作用:用来高效的渲染页面,减少不必要的DOM操作 提高渲染效率 -
diff 算法 :
diff算法会从根节点开始,一层层的向下比较,如果在某一层的某个节点发现不同了,他就会直接替换这个节点下面的所有子树。
作用:用来做比对两次vdom结构,
十七、 sessionStorage localStorage cookie 的区别
localStorage 生命周期是永久,这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息,否则这些信息将永远存在。
sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除
Cookie就是我们所理解的缓存,本地缓存;
简单来说,为了让服务器记住客户端,服务器会给客户端一串字符串,这串字符串就是cookie。 用于登录时记住密码
十八、axios封装与api接口管理
- 安装axios
npm install axios; // 安装axios复制代码
-
目录创建
一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法 -
环境的切换
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址 -
设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s,就会告知用户当前请求超时,请刷新等。
- post请求头的设置
post请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置 - 请求拦截
我们在发送请求前可以进行一个请求的拦截,
这里说一下token,一般是在登录完成之后,将用户的token通过localStorage或者cookie存在本地,然后用户每次在进入页面的时候(即在main.js中),会首先从本地存储中读取token,如果token存在说明用户已经登陆过,则更新vuex中的token状态。然后,在每次请求接口的时候,都会在请求的header中携带token,后台人员就可以根据你携带的token来判断你的登录是否过期,如果没有携带,则说明没有登录过。
-
响应的拦截
响应拦截器很好理解,就是服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理
十九、 require与import的区别和使用(CommonJS规范和es6规范)
1,require是CommonJS规范的模块化语法,import是ECMAScript 6规范的模块化语法;
2,require是运行时加载,import是编译时加载;
3,require可以写在代码的任意位置,import只能写在文件的最顶端且不可在条件语句或函数作用域中使用;
4,require通过module.exports导出的值就不能再变化,import通过export导出的值可以改变;
5;require通过module.exports导出的是exports对象,import通过export导出是指定输出的代码;
6,require运行时才引入模块的属性所以性能相对较低,import编译时引入模块的属性所所以性能稍高。
require的使用
定义模块:module变量代表当前模块,它的exports属性是对外的接口。通过exports可以将模块从模块中导出,其他文件加载该模块实际上就是读取module.exports变量,他们可以是变量、函数、对象等。在node中如果用exports进行导出的话系统会系统帮您转成module.exports的,只是导出需要定义导出名。
import的使用
定义模块:在模块中可以使用export关键字可以将变量、对象、函数、类等从模块中导出,再通过import语句就可以使用它们。一个模块中只能有一个默认导出export defaultX,但是可以有多个export导出。
二十、 Vue 中 methods, computed, watch 的区别
-
methods 中都是封装好的函数,无论是否有变化只要触发就会执行
适用场景:组件中功能的封装,逻辑处理 -
computed: 是 vue 的计算属性,可以对 data 中的依赖项再重新计算得到一个新值应用到视图中
适用场景: 购物车商品结算的时候 -
Watch 是监听 data 和计算属性中的新旧变化
适用场景:当一条数据影响多条数据的时候就需要用watch搜索数据
Es6篇
、、、、、、
网络相关
一、常见的状态码有哪些?
① 200:请求成功,浏览器会把响应体内容(通常是html)显示在浏览器中;
② 404:(客户端问题)请求的资源没有找到 400: 语义有误,当前请求无法被服务器理解。401: 当前请求需要用户验证 403: 服务器已经理解请求,但是拒绝执行它。
③ 500:(服务端问题)请求资源找到了,但服务器内部发生了不可预期的错误;
④ 301/302/303:(网站搬家了,跳转)重定向
⑤ 304: Not Modified,代表上次的文档已经被缓存了,还可以继续使用。如果你不想使用本地缓存可以用Ctrl+F5 强制刷新页面
二、HTTP与HTTPS的区别?
1、HTTP是超文本传输协议,信息是明文传输,HTTPS是具有安全性的SSL加密传输协议。
2、HTTPS协议需要ca申请证书,一般免费证书少,因而需要一定费用。
3、HTTP和HTTPS使用的是完全不同的连接方式,用的端口也不一样。前者是80,后者是443。
4、HTTP连接是无状态的,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,安全性高于HTTP协议。