v-if 与 v-show 的区别,各自的使用场景

共同点:
v-if 和 v-show 都能实现元素的显示隐藏

区别:
◆ v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁)
◆ v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多
◆ v-if 有更高的切换开销,v-show 切换开销小
◆ v-if 有配套的 v-else-if 和 v-else,而 v-show 没有
◆ v-if 可以搭配 template 使用,而 v-show 不行

使用场景:
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

为何在 v-for 中使用 key

diff 算法中会通过 tag 和 key 来判断是不是相同的节点,从而减少渲染次数,提升性能。

vue-router 常用路由模式

Hash:使用 URL 的 hash 值来作为路由,支持所有浏览器。
History:依赖 HTML5 History API 和服务器配置。
Abstract:支持所有 javascript 运行模式。如果发现没有浏览器的 API,路由会自动强制进入这个模式。

vue-router 有哪几种导航钩子

全局守卫:router.beforeEach
全局解析守卫:router.beforeResolve
全局后置钩子:router.afterEach
路由独享的守卫:beforeEnter
组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

举4种 vue 当中的指令和它的用法

v-for、v-if、v-bind、v-on、v-show、v-else、v-else-if 等

简述 vue 的生命周期

常用的有8个(生命周期不仅仅是8个),都是成对出现。

分别是:
beforeCreate 阶段、created 阶段,即创建前/后
beforeMount 阶段、mounted 阶段,即载入前/后
beforeUpdate 阶段、updated 阶段,即更新前/后
beforeDestroy 阶段、destroyed 阶段,即销毁前/后

第一次页面加载会触发哪几个钩子

beforeCreate、created、beforeMount、mounted

你的接口请求一般放在哪个生命周期中

接口请求一般放在 mounted 中,但需要注意的是服务端渲染时不支持 mounted,需要放到 created 中。

vuex 是什么

vuex 是专门为 vue.js 提供的一种状态管理模式,它采用的是集中式储存和管理所有组件的状态和数据,方便使用。

vuex 的五个核心

state、getter、mutation、action、module

页面刷新 vuex 被清空有啥解决办法

◆ localStorage 存储到本地再设置回去。
◆ 重新获取接口获取数据。

说说 sessionStorage、localStorage、cookie 的区别

◆ cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间来回传递,而 sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下。

◆ 存储大小限制也不同,cookie 数据不能超过4K,同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到5M或更大。

◆ 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的 cookie 过期时间之前有效,即使窗口关闭或浏览器关闭。

◆ 作用域不同,sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;localstorage 在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的。

keep-alive 是什么

keep-alive 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

computed 和 watch 区别

computed 本质是一个具备缓存的 watch,依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时,在模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性中处理。

watch 没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开deep:true 选项,这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听。

父组件与子组件如何传值

父组件传给子组件:子组件通过 props 接受父组件数据。

子组件传给父组件:子组件通过 $emit 给父组件传递参数。

vue 等单页面应用及其优缺点

优点:
vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点:
不支持低版本的浏览器,最低只支持到 IE9;不利于 SEO 的优化(如果要支持 SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。

vue 常用修饰符

.stop // 阻止事件冒泡
.capture // 阻止事件捕获
.prevent // 阻止默认事件
.self // 只执行当前元素,不包括子元素
.once // 只执行一次

v-for 与 v-if 的优先级

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。

不推荐在同一元素上使用 v-if 和 v-for。

vue 组件 data 为什么必须是函数

因为组件是可以复用的,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染。

vue 全家桶有些什么

vue:JS框架
vue-router:路由配置
vuex:数据共享和缓存用
vue-cli:脚手架
vue-resource:数据交互(现在改为axios,但是axios不是Vue里面的东西)

vue 中获取 dom 元素

可以通过给标签加 ref 属性,就可以在 js 中利用 $refs 去引用它,从而操作该 dom 元素。

vue 中 $set 什么时候用

强制更新视图

插槽有哪些

匿名插槽
具名插槽
带参数的插槽

ES6 中 var、let、const 三者的区别

◆ var 定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问,可以变量提升。
◆ let 定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
◆ const 用来定义常量,使用时必须赋值初始化,只能在块作用域里访问,而且不能修改。

什么是变量提升

所谓变量提升,指的是变量声明总会被解释器"提升"到函数的顶部。

简单讲一讲 MVVM

MVVM 是 Model-View-ViewModel 缩写,也就是把 MVC 中的 Controller 演变成 ViewModel。

Model 层代表数据模型,View 代表 UI 组件,ViewModel 是 View 和 Model 层的桥梁,数据会绑定到 viewModel 层并自动将数据渲染到页面中,视图变化的时候会通知 viewModel 层更新数据。

说说你对 mixins 的理解

mixins(混入)就是定义了一部分公共的方法、计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用。
◆ 混入对象的钩子将在组件自身钩子之前调用。
◆ 值为对象的选项,例如 data、methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
◆ 混入对象中可以使用和调用组件自身变量和函数,且与在组件自身中使用情况一样。

你都做过哪些 vue 的性能优化

一般从编码阶段、SEO 优化、打包优化、用户体验方面优化,具体看看如何展开。

如何让 CSS 只在当前组件中起作用

将当前组件的 <style> 修改为 <style scoped>
如果觉得我的文章对你有用,请点个赞