zoukankan      html  css  js  c++  java
  • 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;即当前路由改变,但是该组件被复用时调用

     

  • 相关阅读:
    APIO2015雅加达的摩天楼
    索引(填坑进度:0.1‰)
    树形 DP 笔记 · 一
    「已弃坑」DP 优化的各种姿势 (From CF)
    C++ 的位运算:__builtin, bitset
    LA 7158. ACM-ICPC World Finals 2015 I. Ship Traffic
    LA 7155. ACM-ICPC World Finals 2015 F. Keyboarding
    LA 7150. ACM-ICPC World Finals 2015 A. Amalgamated Artichokes
    LA 7587. ACM-ICPC World Finals 2016 L. Swap Space
    LA 7578. ACM-ICPC World Finals 2016 C. Ceiling Function
  • 原文地址:https://www.cnblogs.com/goloving/p/10680359.html
Copyright © 2011-2022 走看看