<p><code></p> <p>在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新。<br /> 在<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>操作的年代,想要实现这样的功能可能会稍微麻烦一些,然而当我们使用数据驱动的mv*框架的时候,这个想要实现这个需求就容易了许多。<br /> 当我们理解数据驱动时,我们很容易想到将需要刷新的状态也设置成为某个数据,在需要刷新的地方watch这个数据,当刷新状态发生变动的时候,watch生效并执行刷新的方法,这就实现了延时刷新。而且我们不再需要关注延时的过程,只需要更改刷新状态就可以了。<br /> 现在我们用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>来实现一个状态驱动的延时刷新。<br /> 首先我们利用vue的混合来实现一个统一的刷新接口,你可以把混合理解成一种特殊的继承来使用。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//刷新mixin var refreshMixin = { props: ['refresh'], watch: { //状态监视 'refresh': function (val) { //console.log(val) //刷新列表 val &amp;&amp; this.refreshData() }, }, created: function () { this.refresh &amp;&amp; this.refreshData() }, }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-comment">//刷新mixin</span> <span class="hljs-keyword">var</span> refreshMixin = { props: [<span class="hljs-string">'refresh'</span>], watch: { <span class="hljs-comment">//状态监视</span> <span class="hljs-string">'refresh'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(val)</span> </span>{ <span class="hljs-comment">//console.log(val)</span> <span class="hljs-comment">//刷新列表</span> val &amp;&amp; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.refreshData() }, }, created: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">this</span>.refresh &amp;&amp; <span class="hljs-keyword">this</span>.refreshData() }, }</code></pre> <p>在这个refreshMixin中,当组件创建或者refresh状态发生变更时,判断状态是否是true,如果是true,则调用组件的refreshData方法。<br /> 我们在组件当中混合这个refreshMixin,并且实现refreshData方法,就可以实现状态驱动刷新。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="注意,refresh状态使用双向绑定,并且在调用refreshData方法时立刻将refresh状态置为false,以便下次调用。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>注意,refresh状态使用<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="浏览关于“双向绑定”的文章" target="_blank" class="tag_link">双向绑定</a>,并且在调用refreshData方法时立刻将refresh状态置为<span class="hljs-literal">false</span>,以便下次调用。 </code></pre> <hr> <p>下面给予一个简单的demo<br /><a href="https://jsfiddle.net/damaida/o6zp7z3k/1/" rel="nofollow noreferrer" target="_blank">https://jsfiddle.net/damaida/...</a><button class="btn btn-xs btn-default ml10 preview" data-url="damaida/o6zp7z3k/1/" data-typeid="0">点击预览</button></p> <p>在实际项目中,组件可以被延时到某个事件被触发时再实例化,或者列表详情数据被展示时被调用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<html><br /> <head><br /> <meta charset=&quot;utf-8&quot; /><br /> <title></title><br /> <script src=&quot;http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js&quot;></script><br /> </head><br /> <body></p> <div id=&quot;root&quot; style=&quot;padding-left:10%;padding-top:5%;&quot;> <delay-test v-bind:refresh.sync=&quot;testRefresh&quot; v-bind:num.sync=&quot;num&quot;></delay-test><br /> <button type=&quot;button&quot; v-on:click=&quot;refreshTest&quot;>刷新组件数据</button> </div> <p> <template id=&quot;delayTempl&quot;></p> <div> 延时加载数据: {{num}} </div> <p> </template></p> <p> <script type=&quot;text/javascript&quot;> //刷新mixin var refreshMixin = { props: ['refresh'], watch: { //状态监视 'refresh': function (val) { //console.log(val) //刷新列表 val &amp;&amp; <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.refreshData() }, }, created: function () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.refresh &amp;&amp; this.refreshData() }, } //延时加载数据组件 var delayComp = <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend({ template: '#delayTempl', mixins: [refreshMixin], props: ['num'], methods: { refreshData: function () { var self = this //注意,refresh状态使用<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>,并且在调用refreshData方法时立刻将refresh状态置为false,以便下次调用 self.refresh = false setTimeout(function () { self.num++ }, 5000) }, }, }) //根实例 var vm = new <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: '#root', data: { testRefresh: false, num: 0, }, methods: { refreshTest: function () { this.testRefresh = true } }, components: { delayTest: delayComp, } }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"root"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding-left:10%;padding-top:5%;"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">delay-test</span> <span class="hljs-attr">v-bind:refresh.sync</span>=<span class="hljs-string">"testRefresh"</span> <span class="hljs-attr">v-bind:num.sync</span>=<span class="hljs-string">"num"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">delay-test</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"refreshTest"</span>&gt;</span>刷新组件数据<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"delayTempl"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> 延时加载数据: {{num}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">//刷新mixin</span> <span class="hljs-keyword">var</span> refreshMixin = { props: [<span class="hljs-string">'refresh'</span>], watch: { <span class="hljs-comment">//状态监视</span> <span class="hljs-string">'refresh'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(val)</span> </span>{ <span class="hljs-comment">//console.log(val)</span> <span class="hljs-comment">//刷新列表</span> val &amp;&amp; <span class="hljs-keyword">this</span>.refreshData() }, }, created: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">this</span>.refresh &amp;&amp; <span class="hljs-keyword">this</span>.refreshData() }, } <span class="hljs-comment">//延时加载数据组件</span> <span class="hljs-keyword">var</span> delayComp = Vue.extend({ template: <span class="hljs-string">'#delayTempl'</span>, mixins: [refreshMixin], props: [<span class="hljs-string">'num'</span>], methods: { refreshData: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span> <span class="hljs-comment">//注意,refresh状态使用双向绑定,并且在调用refreshData方法时立刻将refresh状态置为false,以便下次调用</span> self.refresh = <span class="hljs-literal">false</span> setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ self.num++ }, <span class="hljs-number">5000</span>) }, }, }) <span class="hljs-comment">//根实例</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#root'</span>, data: { testRefresh: <span class="hljs-literal">false</span>, num: <span class="hljs-number">0</span>, }, methods: { refreshTest: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">this</span>.testRefresh = <span class="hljs-literal">true</span> } }, components: { delayTest: delayComp, } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26887.html