12.计算属性缓存 vs 方法---(vue入门文档学习记录)

末蓝、 2021-12-20 04:43 275阅读 0赞

**计算属性缓存 vs 方法**

方法:

<div id="app12">
    			<p>方法结果:{
       {revmessage()}}</p>
    		</div>
    		<script>
    			var vm = new Vue({
    				el:'#app12',
    				data:{
    					message:'hello'
    				},
    				methods:{
    					revmessage:function(){
    						return this.message.split('').reverse().join('');
    					}
    				}
    			});
    		</script>

计算属性的例子已经在上一节写过,那么我们对比一下这两种写法,当然这两种方法的效果是一样的,但是运行的原理是完全不一样的.

计算属性是通过响应系统通过绑定message的值,如果message的值改变则响应系统就会改变页面的值,如果值不改变,则不重新渲染页面.展示的仍然是页面之前缓存的数据,**计算属性是基于它们的响应式依赖进行缓存的.**

方法则是每次都会执行一次,每次都会重新渲染页面.

明显两种写法中计算属性的效率要高的多.

注:

计算属性是基于它们的响应式依赖进行缓存的—这句话怎样理解呢?

下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
      now: function () {
        return Date.now()
      }
    }

也就是说计算属性只有依赖于vue实例中具有响应能力的属性时才能达到这种效果,这其实展示的是响应系统的一种可传递性,以及其可传递性的限制.

另:

computed:{
    					revmessage:function(){						
    						return this.message.split("").reverse().join("")+Date.now()
    					}
    				}

这种的也可以响应,但不是完全响应式依赖,也可以满足某种需求,例如定时改变什么东西的时候.

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关计算属性缓存 vs 方法vswatch侦听属性

故心故心故心故心小故冲啊 -------------------- 文章目录计算属性缓存 vs 方法计算属性 vs 侦听属性不同点总

水深无声/ 2022年11月02日 11:41/ 0 赞/ 221 阅读

相关【Vue】—计算属性缓存VS方法以及侦听器的区别

【Vue】—计算属性缓存VS方法以及侦听器的区别 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

r囧r小猫/ 2022年09月03日 14:21/ 0 赞/ 148 阅读

相关 6.数据与方法---(vue入门文档学习记录)

数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新

桃扇骨/ 2022年01月11日 06:09/ 0 赞/ 240 阅读

相关 10.指令---(vue入门文档学习记录)

指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职

谁借莪１个温暖的怀抱￠/ 2022年01月06日 09:29/ 0 赞/ 223 阅读

相关 11.计算属性基础例子---(vue入门文档学习记录)

基础例子 <div id="app11"> <p>message:{ {message}}</p> <p>revmessag

灰太狼/ 2021年12月21日 04:09/ 0 赞/ 376 阅读

相关 12.计算属性缓存 vs 方法---(vue入门文档学习记录)

计算属性缓存 vs 方法方法: <div id="app12"> <p>方法结果:{ {revmessage()}}</p>

末蓝、/ 2021年12月20日 04:43/ 0 赞/ 276 阅读

相关 15.计算属性Setter进阶 ---(vue入门文档学习记录)

计算属性setter 一般情况计算属性只有getter,并且默认不用显示的表明getter方法,也可以有setter方法: <div id="app15">

痛定思痛。/ 2021年12月17日 12:47/ 0 赞/ 254 阅读

相关 13.侦听属性 ---(vue入门文档学习记录)

侦听属性先看下面的例子: <div id="computed_props"> 千米 : <input type="text" v-model="ki

╰+攻爆jí腚メ/ 2021年12月16日 09:43/ 0 赞/ 294 阅读

相关 14.侦听属性进阶 ---(vue入门文档学习记录)

假设有如下代码： <div> <p>FullName: { {fullName}}</p> <p>FirstNa

谁践踏了优雅/ 2021年12月16日 09:35/ 0 赞/ 250 阅读

相关 Vue.js--计算属性缓存

计算属性缓存我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值

傷城~/ 2021年08月13日 23:48/ 0 赞/ 428 阅读