阅读 27

Vue基础

****Vue生命周期

1.什么是vue的生命周期?

vue从实例创建到销毁的过程。

2.vue生命周期的作用是什么?

vue所有的功能都是围绕生命周期来进行的,在生命周期的各个阶段调用对应的钩子函数来实现dom的渲染和组件的数据管理。

3.第一次页面加载会触发哪些钩子?

beforeCreated  created  beforeMounted  mounted

4.简述每个周期具体适合哪些场景?

beforeCreated

实例已经初始化,但是数据观察和事件机制尚未形成,不能拿到dom(没有el和data)

场景:实例以外使用

created

实例已经创建,但不能拿到dom(有data,无el)

场景:模板渲染成HTML前调用,可以获取data和method,实现页面渲染前的逻辑操作

beforeMounted

过渡阶段,无法拿到dom(有data,有el),但vue挂载的根节点已经创建

mounted

dom和数据已经渲染出来

场景:模板渲染成html后使用,这里可以对dom进行操作

beforeUpdata

检测到数据更新时,但dom尚未更新前执行

updata

更新结束后执行

场景:可以对更新后的数据做统一处理,如果需要区分不同的数据更新操作可以使用$nextTick

beforeDestroy

当要销毁vue实例时,在销毁前执行

destroyed

vue实例销毁时执行

5.created和mounted的区别?

created实例已经创建但不能拿到dom,mounted阶段dom已经挂载可以拿到dom进行操作。

6.vue获取数据在那个周期函数?

created、beforeMounted、mounted 都可以

vue路由

1.MVVM框架是什么?

M:Model 数据模型,负责数据和业务逻辑的定义

 V:View 视图模型,负责数据的展示

VM:ViewModel  监听model数据的变化来控制视图的更新

M和V是没有直接关联的,而是通过VM进行联系,VM和M有着双重绑定的关系,当M发生变化时VM会触发V进行视图更新,用户交互视图改变时VM也会同步数据到M。

2.vue-router是什么? 它有哪些组件

它是vue.js官方的路由管理器,它和vue核心深度集成,使构建单页面应用变得易如反掌。

组件:router-link  router-view  keep-alive

3.active-class是哪个组件的属性?

 router-link 用于路由切换时激活类名,实现样式切换效果

4.怎么定义vue-router的动态路由? 怎么获取传过来的值

在路由实例对象router = new VueRouter 中的path添加/:id

通过<router-link  :to="{name:"xx",params :{id:"aa"}}">动态来传递

可在组件中route路由信息对象中拿到id=this.route路由信息对象中拿到id = this.route.params.id

5.vue-router有哪几种导航钩子?

三种:

(1)全局路由钩子,router.beforeEach(to,from,next)

(2)组件内部钩子,beforeRouterEnter(to,form,next)  beforeRouterUpdata(to,form,next)    beforeRouterLeave(to,form,next)

(3)路由独享钩子,beforeEnter(to,from,next)

6.routeroute和router的区别

$router是路由实例对象,包括路由跳转方法,路由钩子

$route是路由信息对象,包括params,query,path,hash,name,fullPath,matched

7.vue-router响应路由参数的变化

8.vue-router传参

(1)路由规则:path:/:id       传递方式:params:{id:xx}    浏览器地址:/xx

(2)路由规则:path常规无变化     传递方式:query:{key:value}      浏览器地址:?key=value

9.vue-router的两种模式

(1)hash模式:原理是通过onhashchange事件在window对象上监听,判断location.hash "#/xx" 来切换页面

(2)history模式:通过history api,我们可以去掉hash模式下的 # ,缺点:刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,所以会报404,所以使用history模式需要后端的配合。

10.vue-router实现路由懒加载(动态加载路由)

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

const Foo = () => import('./Foo.vue')  

使用上述方式引用组件Foo

文章分类
前端
文章标签