VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

一、$nextTick

1、vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。

2、vue.$nextTick(cb),数据发生变化,更新dom后执行回调

二、$refs用法

1、ref作用于普通元素——得到dom节点

2、ref作用于子组件——得到组件实例,可使用组件所有方法

3、当v-for用于元素或组件的时候,refs将是包含dom节点或组件实例的数组(想得到单个的ref,只需循环即可)

三、vue组件hover事件模拟

1、mouseover/mouseout,mouseenter/mouseleave

2、第三方组件加事件不生效问题——添加native修饰符

四、嵌套路由

1、一个被路由过来的页面下可以继续使用路由。比如我们需要路由过来的页面头部一些信息不变,下面点击不同信息展示不同内容时就可以用到嵌套路由

2、嵌套路由声明,利用children: [] 去声明嵌套路由

3、嵌套路由声明的注意事项:

(1)以“/”开头的路由会被当做根路径,所以子路由的path是不能加“/”的

(2)注意匹配一个path为空的情况,然后匹配一个default组件,避免出现空白页的问题

五、keep-alive

1、vue的内置组件,能在组件切换过程中将状态保存在内存中,防止dom重复渲染。keep-alive包裹动态组件时,能缓存不活动的组件实例,而不是销毁他们。

2、keep-alive与transition相似,只是一个抽象组件,真实或虚拟都不会渲染,也不存在与父组件链中

3、include、exclude:匹配的组件缓存/不缓存

注意:(1)exclude的优先级大于include;(2)注意匹配的是组件名称,而不是路由名称,也就是说要给组件设置name值。

4、keep-alive生命周期钩子函数:

(1)activated:组件被激活时调用,组件第一次渲染也会调用,之后每次进入keep-alive均调用

(2)deactivated:组件被停用时调用

5、什么时候获取数据?

当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。keep-alive 之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即只有当数据变化时,才使用VirtualDOM进行diff更新。故页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。所以,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。

六、is特性:

1、限制元素:vue编译器为组件提供特殊功能,在有些情况下,组件也可以是原生html元素的形式,以is特性扩展

原因在于有些html元素本身的限制比如select等,如果想在<select></select>中使用组件模板,这时候就需要使用is特性扩展,从而达到在受限的html元素中使用

2、动态组件:vue中提供一个动态模板,可以再任意模板中切换,就是用is特性来挂载:<component :is="currentView"></component>,比如当currentView为comA时就显示comA模板,为comB时就显示comB模板

七:vue路由属性及用法

1、to:路由链接

2、replace:设置replace属性不留下history记录,即不能回退

3、append:设置append属性在当前路径前添加基路径:比如a to b,加append为/a/b,不加append就为/b

4、tag:渲染标签

5、active-class:设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置,默认值为 ‘router-link-active‘

6、exact:激活的路径匹配规则

7、events:触发导航的事件(默认click),可以是一个字符串或包含字符串的数组

8、scrollBehavior(to, from, savedPosition)控制滚动

八、路由钩子函数:主要用来拦截导航

1、全局的:

router.beforeEach()

router.afterEach():没有next(),不能改变导航

2、某个路由独享的钩子:

在定义路由路径时,beforeEnter(to, from, next)

3、组件内钩子:

beforeRouteEnter():不能访问this,可以通过传一个回调next(vm => {})来访问组件实例

beforeRouteLeave():可以访问this,可通过next(false)取消导航;同时必须得有next()

beforeRouteUpdate():二级导航更新时触发,可访问this;即当前路由改变,但是该组件被复用时调用

原文地址:https://www.cnblogs.com/goloving/p/10680359.html

时间: 2024-08-27 00:02:20

VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数的相关文章

VUE生命周期中的钩子函数及父子组件的执行顺序

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 详细 beforeCreate 在实例初始化之后,数

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... 前端进阶积累.公众号.GitHub Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法

Vue.js之组件嵌套小demo

Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件 Header.vue文件: 1 <!--1模板:html结构 --> 2 <template> 3 <header> 4 <h1>{{title}}</h1> 5 </header> 6 </template> 7

Vue.js之组件嵌套

Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 1 //注册全局组件 2 Vue.component("users",Users); //前面的users是我们起的名字,后面的Users是我们对应的组件,想要识别这个组件,必须在上面通过import引入, 3 //引入组件 4 import Users from './components/Users' 有了全局组件的话,就可

vue组件 $children,$refs,$parent的使用详解

1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"></firstchild> 然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数 2)$children 他返回的是一个组件集合,如果你能清楚的知道子组件的顺序,你也可以使用下标来操作: ? 1 2 3 for(let i=0;i<this.$children.length;i++){    

vue路由导航守卫及前置后置钩子函数参数详解

首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: 'HelloWorld', component: resolve => require

vue之nextTick

todo简介: vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过.我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom.因为赋值操作只完成了数据模型的改变并没有完成视图更新.在这个时候我们需要用到本章介绍的函数. 举例: new Vue({ el: '#app', data:

typescript无法识别vue中的$refs

例如:vue-fullscreen <template> <div class="Test"> <fullscreen ref="fullscreen" @change="fullscreenChange" > <el-button @click="toggle">全屏</el-button> something </fullscreen> </di

Vue路由的钩子函数

vue路由的钩子函数首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next: to:route即将进入的目标路由对象, from:route当前导航正要离开的路由 next:function一定要调用该方法resolve这个钩子.执行效果依赖next方法的调用参数.可以控制网页的跳转. 原文地址:https://www.cnblogs.com/Su-feng