一,keep-alive组件的作用
为什么用?我们经常能遇到需要保存之前状态的需求,例如搜索页(保存搜索记录),列表页(保存之前的浏览记录)等等
作用:keep-alive是一个Vue的内置组件,它能将不活动的组件保存下来,而不是直接销毁,当我们再次访问这个组件的时候,会先从keep-alive中存储的组件中寻找,如果有缓存的话,直接渲染之前缓存的
二,单页面应用和多页面应用的区别及优缺点
单页面
(SPA),其实就是指只有一个主页面的应用:
优点:前后端分离,用户体验好 ,快,内容的改变不需要重新加载整个页面,
缺点:初次加载耗时多,不利于seo,导航不可用,
多页面(MPA):
就是指一个应用中有多个页面,页面跳转时是整页刷新,每次都请求一个新的页面,
优点
首屏时间快,seo效果好
缺点
页面切换慢,每次切换页面都需要选择性的重新加载公共资源
三,什么是计算属性?什么情况下用?
computed是Vue的计算属性
当我们需要一个值或者一个数据,而这个数据需要通过一些逻辑运算才能得到的时候,我们更希望将它放在计算属性内,这样的话我们可以将整个项目对于数据的复杂运算逻辑全部集中管理在计算属性内
四,computed和methods的区别
computed计算属性是基于内部的响应式依赖来进行计算并缓存的,所谓的响应式依赖就是被我们的Vue实例所监听的数据
computed计算属性是拥有缓存的,我们每次访问同一个计算属性,只要内部依赖没有发生改变,它都不会重新计算
methods方法是调用函数,我们多次使用就等于多次调用了这个函数,函数是没有缓存的,所以每次都重新计算了,当我们的内部依赖发生改变的时候,都会重新render页面,此时页面上所有调用了这个函数的地方都会再次重新调用这个函数
五:什么是自定义指令
我们在实际项目中遇到了必须要对DOM进行操作的逻辑时,我们就用到了自定义指令:
bind:只调用一次,
inserted:被绑定元素插入父节点时调用
update:所在组件的 VNode 更新时调用,
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
六:父组件获取异步动态数据传递给子组件,报错如何解决
(比如获取详情页的数据时:明明获取到了内容,渲染完还是会报错):
这个问题一般出现在对象,或者我们直接调用数组指定下标的内容时会出现,
在父组件给子组件传值的时候,给子组件加一个判断,(v-if="list.length>0")
七: vue-router参数传递方法详述及区别
router.push(路由信息) - 编程式导航
<router-link to="路由信息"></router-link> - 声明式导航
query和params传参的区别
query传参 this.$router.push({ path:'/', query: {tab:'all'}}
query传参 this.$router.push({ path:'/', params: { id: 1 } })
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
query会直接显示在 ? 后边url?tab=all而params是显示在路由的子路由上url/name
获取方式不同,query使用this.$route.query获取,params使用this.$route.params获取
使用场景不同,query一般用来做搜索或者列表页,而params一般用来做详情页
八:什么是vueX
Vuex其实就是一个Vue的集中状态管理工具。。。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
when?项目需要使用公共数据,并且这个公共数据的访问量较大的时候,我们可以使用Vuex,用来集中管理公共的数据
工作流程:
首先通过dispatch提交一个action
在action中我们可以执行一些异步的操作,或者根据不同的情况分发不同的mutation
接着在action中调用commit,触发一个mutation
所有修改state的操作,全部应该放在mutation中来做
而state更新之后,会调用Vue的底层方法,通知视图进行更新渲染
九:详述vuex的核心属性及使用
state存储了Vuex的基本数据,
actions存放了Vuex中所有的异步操作,可以在actions中通过commit分发不同的mutation,在不同的情况下执行不同的方法
mutations存放了Vuex中所有关于state的操作,修改state只能通过mutations,否则的话数据不会响应式更新
getters就类似与Vue实例中的computed,计算属性,所有关于数据的复杂计算应该放在getters中来操作
modules类似于redux中的reducer,每一个module都拥有自己的state、mutations、actions、getters;将整个store根据功能或者数据分解成不同的模块,最后合并在一个Store中
十:vue和jquery的区别
Jquery直接操作DOM,
Vue不直接操作DOM,而是通过双向数据绑定的方式,将DOM节点在Vue内部转化对象的形式,通过修改数据直接修改视图
Jquery是一个前端类库,只是提供了很多便捷操作DOM的方法,
Vue是一个框架,有一套完整的体系
十一:vue中slot是神马
slot插槽,其实就是用来做内容分发,使得可以最大程度的复用组件,达到每次使用同一个组件的时候可以根据情况创建不同的内容的功能
十二:spa首屏加载慢,该如何解决
抽取css文件
使用CDN资源
使用路由模块化加载
按照页面或者组件分块懒加载
使用服务端渲染的方式
使用预渲染的方式
网友评论