VUE温习：nextTick、$refs、嵌套路由、keepalive缓存、is特性、路由属性用法、路由钩子函数...

一、$nextTick

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

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

二、$refs用法

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

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

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

三、vue组件hover事件模拟

1、mouseover/mouseout&＃xff0c;mouseenter/mouseleave

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

四、嵌套路由

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

2、嵌套路由声明&＃xff0c;利用children: [] 去声明嵌套路由

3、嵌套路由声明的注意事项&＃xff1a;

&＃xff08;1&＃xff09;以“/”开头的路由会被当做根路径&＃xff0c;所以子路由的path是不能加“/”的

&＃xff08;2&＃xff09;注意匹配一个path为空的情况&＃xff0c;然后匹配一个default组件&＃xff0c;避免出现空白页的问题

五、keep-alive

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

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

3、include、exclude&＃xff1a;匹配的组件缓存/不缓存

注意&＃xff1a;&＃xff08;1&＃xff09;exclude的优先级大于include&＃xff1b;&＃xff08;2&＃xff09;注意匹配的是组件名称&＃xff0c;而不是路由名称&＃xff0c;也就是说要给组件设置name值。

4、keep-alive生命周期钩子函数&＃xff1a;

&＃xff08;1&＃xff09;activated&＃xff1a;组件被激活时调用&＃xff0c;组件第一次渲染也会调用&＃xff0c;之后每次进入keep-alive均调用

&＃xff08;2&＃xff09;deactivated&＃xff1a;组件被停用时调用

5、什么时候获取数据&＃xff1f;

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

六、is特性&＃xff1a;

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

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

2、动态组件&＃xff1a;vue中提供一个动态模板&＃xff0c;可以再任意模板中切换&＃xff0c;就是用is特性来挂载&＃xff1a;&＃xff0c;比如当currentView为comA时就显示comA模板&＃xff0c;为comB时就显示comB模板

七&＃xff1a;vue路由属性及用法

1、to&＃xff1a;路由链接

2、replace&＃xff1a;设置replace属性不留下history记录&＃xff0c;即不能回退

3、append&＃xff1a;设置append属性在当前路径前添加基路径&＃xff1a;比如a to b&＃xff0c;加append为/a/b&＃xff0c;不加append就为/b

4、tag&＃xff1a;渲染标签

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

6、exact&＃xff1a;激活的路径匹配规则

7、events&＃xff1a;触发导航的事件&＃xff08;默认click&＃xff09;&＃xff0c;可以是一个字符串或包含字符串的数组

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

八、路由钩子函数&＃xff1a;主要用来拦截导航

1、全局的&＃xff1a;

router.beforeEach()

router.afterEach()&＃xff1a;没有next()&＃xff0c;不能改变导航

2、某个路由独享的钩子&＃xff1a;

在定义路由路径时&＃xff0c;beforeEnter(to, from, next)

3、组件内钩子&＃xff1a;

beforeRouteEnter()&＃xff1a;不能访问this&＃xff0c;可以通过传一个回调next(vm &＃61;> {})来访问组件实例

beforeRouteLeave()&＃xff1a;可以访问this&＃xff0c;可通过next(false)取消导航&＃xff1b;同时必须得有next()

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