标签：而不是 变化 event space live size 操作 seo 钩子
一、$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；即当前路由改变，但是该组件被复用时调用
VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
标签：而不是 变化 event space live size 操作 seo 钩子
原文地址：https://www.cnblogs.com/goloving/p/10680359.html
