① vue计算属性定义两个属性,依赖内容一样,会走两遍吗
不会。Vue计算属性有一种缓存机制首逗郑，依赖不发生改变，就不会再次计算，当依赖发生改变时，计算属性将重新计算，以提供最新的结者颂果。Vue提供了watchAPI，可指迟以监控依赖的变化，并在依赖发生变化时执行特定的任务。
② vue 缓存组件keep-alive
kee-alive 是 Vue 内置的一个组件， 可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存
keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数
在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。
keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:
include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
配合router使用
1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4.包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated。
参考 https://juejin.cn/post/6844903918313406472
参考 https://www.imooc.com/article/302879
③ vue 不是路由跳转的页面怎么缓存
vue缓存主要四种方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中
④ 移动端Vue界面缓存处理
大家可以看到当重新进入列表页数据进行了刷新这明显不符合需求
查网络问同事知道了一个东西叫keep-alive于是决定使用这个内置组件试试.
然后吧发现问题确实能够得到结局但是出了个新问题如图:
问题1:界面虽然被缓存但是当退出到前一个页面再进入的时候界面还是被缓存状态,我觉得这是不合理的.
问题2:被缓存的界面从上个页面再次进入时动画效果不对.
基于这两个问题我也查了一些资料和博客,也总结了第二套方案
这个rank是用来判断当前组件所在的级别.
比如A组件->B组件 ->C组件,那么A的rank为1,B的rank为2,C的rank为3,
在beforeRouteLeave中
这个貌似能解决问题,但是!!!
问题1: 这个返回动画就是不对...(图片在浏览器可能看不出啥问题,在真机很明显)因为这个框架是前端给的动画我也不会弄...如果能解决跳转动画问题,我觉得这个方案基本可以符合要求..如果有大佬可以解决,方便的话指导下小弟.而且能解决这个动画问题后面也不用看了...
问题二:有的时候会出现缓存了上一次的bug(也不知道咋回事...出现的还挺频繁..).
在这里就是我自己总结的一个方案..虽然能完美解决这些问题不过对开发不友好,维护成本太高..不建议使用(如果实在没办法的话)
首先在vuex中定义需要缓存的界面的数据(先测试的滑动,所以分开写的可以只写一个data)
先说下高度的滑动吧这个滑动的高度也是需要保存的.界面中沃使用cube-ui的scroll组件
给data增加一个scrollHeight属性缓存界面高度.还有需要缓存的数据model
当界面滑动停止调用scrollend方法对scrollHeight进行赋值
每次进入界面即在created 函数中取出缓存的高度,如果有高度那么让它自动滑动.并重新给scrollHeight进行赋值.
这边是我封装的一个js..实现是这样的
这样就可以保证滑动的缓存(data与高度类似).
这是data的js
当界面进行跳转对组件的rank进行判断如下:
而在进入的时候
⑤ Vue 怎么缓存当前的组件缓存后怎么更新说说你对keep-alive的理解是什么
keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 可以设置以下 props 属性：
关于 keep-alive 的基本用法：
使用 includes 和 exclude ：
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（ activated 与 deactivated ）：
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive
举个栗子:
当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ，这时候列表页应该是需要 keep-alive
从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ，这时候可以按需来控制页面的 keep-alive
在路由中设置 keepAlive 属性判断是否需要缓存
使用 <keep-alive>
keep-alive 是 vue 中内置的一个组件
源码位置：src/core/components/keep-alive.js
可以看到该组件没有 template ，而是用了 render ，在组件渲染的时候会自动执行 render 函数
this.cache 是一个对象，用来存储需要缓存的组件，它将以如下形式存储：
在组件销毁的时候执行 pruneCacheEntry 函数
在 mounted 钩子函数中观测 include 和 exclude 的变化，如下：
如果 include 或 exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行 pruneCache 函数，函数如下：
在该函数内对 this.cache 对象进行遍历，取出每一项的 name 值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可
关于 keep-alive 的最强大缓存功能是在 render 函数中实现
首先获取组件的 key 值：
拿到 key 值后去 this.cache 对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：
直接从缓存中拿 vnode 的组件实例，此时重新调整该组件 key 的顺序，将其从原来的地方删掉并重新放在 this.keys 中最后一个
this.cache 对象中没有该 key 值的情况，如下：
表明该组件还没有被缓存过，则以该组件的 key 为键，组件 vnode 为值，将其存入 this.cache 中，并且把 key 存入 this.keys 中
此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ，如果超过了，则把第一个缓存组件删掉
解决方案可以有以下两种：
每次组件渲染的时候，都会执行 beforeRouteEnter
在 keep-alive 缓存的组件被激活的时候，都会执行 actived 钩子
注意：服务器端渲染期间 avtived 不被调用
⑥ vue 路由缓存
在写一个移动端项目时遇到了一个问题，每一个tab栏所对应的页面被封装成一个组件进行
复用，结果会导致他们共用一个滚动条。解决办法是给这个子组件加固定的高度（例如
height:100vh），同时加一个属性overflow-y:auto，这样就可以解决这个问题。之后发现每当进
入主页中任意一篇文章再退出时，页面重新加载渲染了，之前的文章消失了，所有在这里想到
了路由缓存。
先说一下keep-alive的属性和用法。
Props ：
用法 ：
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
（只有被<keep-alive>包裹的组件才具有这两个钩子函数）
其实不太建议使用include的，因为如果多个组件中都包括include中匹配到的组件，想单独
的让其中某个组件缓存是不太方便的。所以可以在分发路由时，在需要缓存的路由中把额外标
记的属性写在meta中，如图1。
使用的时候可以在根组件中通过$route.meta.keepAlive取到该值，然后进行v-if判断即可，如图
2，这样使用起来相对灵活一点。
使用keep-alive缓存路由后，已经解决了主要问题，但是有新的问题出现。缓存过的组件重
新被激活时不会记录滚动条的状态，默认置顶，所以应该监听这个被复用的组件的onscroll事
件，动态记录滚动条的位置状态，然后重新赋值给scrollTop（如果还想优化最好给滚动事件来
一个防抖处理）。那么问题来了，应该在何时重新赋值呢？上面用法中提到了当组件在<keep-
alive> 内被切换时会触发activated这个钩子函数，所以应在这里赋值。
⑦ vue中动态路由组件缓存及生命周期函数
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop :
有两个生命周期函数：
activated ：激活
deactivated ：失活
利用keep-alive实现滚动条保存：
思路 ： 在路由页面离开 beforeRouterEnter 中保存当前滚动条距离顶部的位置，再用 activated 钩子函数 当他再次被激活时，让他的滚动条等于离开时保存的那个值。
beforeCreate ：组件实例刚被创建，组件属性计算之前，如data属性等
created ：组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
beforeMount ：模板编译 / 挂载之前
mounted ：模板编译 / 挂载之后
beforeUpdate ：组件更新之前
updated ：组件更新之后
activated ：组件被激活时调用
deactivated ：组件被移除时调用
beforeDestory ：组件销毁前调用
destoryed ：组件销毁后调用
(1) 创建阶段
创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了。
(2) 挂载阶段
beforeMount和mounted两者主要区别在于模板是否编译和挂载了。
(3) 更新阶段
beforeUpdate 和 updated 就是当数据发生变化的时候出发的。
(4) 销毁阶段
beforeDestory 和 destoryed 的区别就是el的值data的数据依然在的。这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom。
⑧ vue的dom更新缓冲确保无论你进行了多少次声明更改每个组件都只需要更新1次吗
Vue 的 DOM 更新缓冲机制确保了当你进行多次声明更改时，每个组件最多只会更新一次局棚。它通过使亮让用异步队列来缓冲更新操作，等到所有的更改都被记录下来之后再一次性更新 DOM。这桐键则样做的好处是可以减少不必要的 DOM 操作，提高性能。
Vue 是通过一种叫做脏检查（dirty checking）的机制来实现这一点的。它会在每次更新时扫描所有的组件并检查它们的状态是否发生了变化，如果发现了变化就会更新对应的 DOM。这个过程被称为脏检查。
但是，如果每次更新都要扫描整个应用的所有组件，时间复杂度将会是 O(n) 级别的，这显然是不可取的。因此 Vue 会对组件进行分组，只对变化了的组件进行脏检查。
总结来说， Vue 的 DOM 更新缓冲机制确保了不管你进行了多少次声明更改，每个组件都最多只会更新一次。这样做的好处是可以减少不必要的 DOM 操作，提高性能。