移动端Vue界面缓存处理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端Vue界面缓存处理相关的知识，希望对你有一定的参考价值。
参考技术A 大家可以看到当重新进入列表页数据进行了刷新这明显不符合需求查百度问同事知道了一个东西叫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.js学习
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。MVVM框架
Vue.js的目的：1、解决数据绑定的问题 2、开发Single Page Application(SPA)大型单页面应用。主要支持移动端，也支持PC端。 3、支持组件化，这样复用度高
MVVM模式：
M：model 业务模型，用处：处理数据，提供数据
V： view 用户界面、用户界面
M->V V->M
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
使用Vue.js步驟：1、引入Vue.js 2、创建一个Vue对象，其中el代表Vue管理对象的界限。data是一个对象，用于存放显示在页面上的数据。
<!DOCTYPE html> <html> <head> <title>test01.html</title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> var appT=new Vue({ el: \'#app\', data: { message: \'Hello Vue.js123!\' } }) </script> </body> </html>
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。
如果后台改动message时，相应的页面也会随之变化。使用appT.message=“XXX”更改。每个 Vue 实例都会代理其 data 对象里所有的属性
Vue指令，其实就是vue当中以v-开头的自定义属性。
1、使用 v-html 指令用于输出 html 代码：
<body> <div id="app" v-html="message"></div> <script> new Vue({ el: \'#app\', data: { message: \'<h1>使用V-html</h1>\' } }) </script> </body>
2、HTML 属性中的值应使用 v-bind 指令
<body> <div> <a id="app" v-bind:href="url">{{text}}</a> </div> <script> new Vue({ el: \'#app\', data: { url:\'http://www.baidu.com\', text:\'点击\' } }) </script> </body>
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
3、v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
<body> <div> <P id="app" v-if="seen">你看见我了！</P> </div> <script> var appT=new Vue({ el: \'#app\', data: { seen:true } }) </script> </body>
该元素模块不存在了
4、v-show指令用来决定是否显示元素
<body> <div id="app"> <p v-show="seen">你看见我了</p> </div> <script> var appT=new Vue({ el: \'#app\', data: { seen:true } }) </script> </body>
该元素模块被设置为display：none。
v-if跟v-show的区别：
v-if有更高的切换消耗，安全性更高。而v-show有更多的初始化渲染消耗。因此频繁切换而对安全性无要求可用v-show。如果在运行，条件不可改变，则用v-if比较好。
5、v-else必须跟在v-if后面，否则不能被识别。
<body> <div id="app"> <p v-if="seen">你看见我了</p> <p v-else>你看不见我了</p> </div> <script> var appT=new Vue({ el: \'#app\', data: { seen:true } }) </script>
6、v-else-if
<body> <div id="app"> <p v-if="type===\'A\'">A</p> <p v-else-if="type===\'B\'">B</p> <P v-else>C</P> </div> <script> var appT=new Vue({ el: \'#app\', data: { type:\'A\' } }) </script> </body>
7、在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
<body> <div id="app"> <p>{{message}}</p> <input v-model="message"> </div> <script> var appT=new Vue({ el: \'#app\', data: { message:\'hello world\' } }) </script> </body>
也就是说页面输入改动，对应的data数据也跟着改动
8、循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<body> <div id="app"> <ui> <li v-for="person in persons"> {{person.name}}, {{person.old}}, {{person.sex}} </li> </ui> </div> <script> var appT=new Vue({ el: \'#app\', data: { persons:[ {name:\'wang1\',old:\'20\',sex:\'male\'}, {name:\'wang2\',old:\'21\',sex:\'female\'} ] } }) </script> </body>
9、v-for 可以通过一个对象的属性来迭代数据：
<body> <div id="app"> <ui> <li v-for="value in person1"> {{value}} </li> </ui> --------------------------------------- <oi> <li v-for="(value,key) in person2"> {{key}} --- {{value}} </li> </oi> --------------------------------------- <ui> <li v-for="(value,key,index) in person3"> {{index}}---{{key}}---{{value}} </li> </ui> </div> <script> var appT=new Vue({ el: \'#app\', data: { person1:{name1:\'wang1\',old1:\'20\',sex1:\'male\'}, person2:{name2:\'wang2\',old2:\'30\',sex2:\'female\'}, person3:{name3:\'wang3\',old3:\'40\',sex3:\'male\'} } }) </script> </body>
10、v-for 也可以循环整数
<body> <div id="app"> <ui> <li v-for="n in 10"> {{n}} </li> </ui> </div> <script> var appT=new Vue({ el: \'#app\', data: {} }) </script> </body>
11、Vue.js 计算属性
<body> <div id="app"> 直接逻辑：{{ message.split(\'\').reverse().join(\'\') }}<br> 计算属性关键字computed：{{reverseMessage1}} <br> method：{{reverseMessage2()}} </div> <script> var appT=new Vue({ el: \'#app\', data: { message:\'HelloWorld!\' }, computed:{ reverseMessage1:function(){ return this.message.split(\'\').reverse().join(\'\') } }, methods:{ reverseMessage2:function(){ return this.message.split(\'\').reverse().join(\'\') } } }) </script> </body>
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
12、Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
<script type="text/javascript" src="vue.min.js"></script> <style type="text/css"> .active{ width:100px; height:100px; background:green; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:isActive}"></div> </div> <script> var appT=new Vue({ el: \'#app\', data: { isActive:true } }) </script>
我们也可以在对象中传入更多属性用来动态切换多个 class 。
<script type="text/javascript" src="vue.min.js"></script> <style type="text/css"> .active{ width:100px; height:100px; background:green; } .err{ width:20px; height:20px; background:red; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:isActive,\'err\':isErr}"></div> </div> <script> var appT=Weex/Vue项目中静态资源缓存处理.md