计算属性

怼烎@ 2022-06-02 11:26 190阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<p>{
       {msg}}</p>
    		<ul>
    			<li v-for="tmp in list">
    				<h2>{
       {myFunc()}}</h2>
    				<h2>{
       {myFunc1}}</h2>
    			</li>
    		</ul>
    	</div>
    
    	<script type="text/javascript">
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome',
    				list:[100,200,300],
    				count:0
    			},
    			methods:{
    				myFunc:function(){
    					console.log("in myFunc");
    					return this.count;
    				}
    			},
    			computed:{
    				myFunc1:function(){
    					console.log("in myFunc1");
    					return this.count;
    				}
    			}
    		});
    	</script>
    </body>
    </html>

![SouthEast][]

可以看到in myFunc执行了三次，in myFunc1只执行了一次，是因为计算属性是基于缓存的，当数据没有更新时，就不会调用，直接使用上次计算出来的值，这样就会提高效率。

[SouthEast]: /images/20220602/13d670032a5a41babe2448eb74e45155.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue 计算属性

简介构造器的 computed 选项，用于定义 Vue 实例的计算属性。虽然模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻...

红太狼/ 2024年04月18日 15:24/ 0 赞/ 33 阅读

相关 Vue-计算属性、监视属性、深度监视、计算属性与监视属性对比

目录一、计算属性--姓名案例 1.函数和插值语法实现 2.计算属性实现计算属性的简写二、监视属性---天气案例 1.使用监视属性编写天气案例方法一：

女爷i/ 2024年04月08日 13:17/ 0 赞/ 49 阅读

相关 CSS属性计算

1. 确定声明值浏览器默认样式作者样式没有冲突的直接作为属性行 2. 层叠冲突 1. 比

忘是亡心i/ 2023年08月17日 15:16/ 0 赞/ 70 阅读

相关计算属性calc

calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：`width: calc(100% - 10px)`；空格！！空格！

╰半夏微凉°/ 2022年12月29日 00:20/ 0 赞/ 106 阅读

相关计算属性——computed

vuex的state与vue的data都是用户存放数据的地方，如果我们将vuex的数据直接赋值给data然后再页面使用数据，那么vuex的数据发生变化视图不会更新，那么这个时候

r囧r小猫/ 2022年12月21日 03:17/ 0 赞/ 97 阅读

相关计算属性computed

[vue官方文档：计算属性][vue] 计算属性和方法的区别第 1 章：计算属性的基本用法 <template> <div class="com

旧城等待，/ 2022年11月02日 00:57/ 0 赞/ 160 阅读

相关【Vue】—计算属性

【Vue】—计算属性 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

港控/mmm°/ 2022年09月03日 14:18/ 0 赞/ 170 阅读

相关计算属性

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

怼烎@/ 2022年06月02日 11:26/ 0 赞/ 191 阅读

相关 Vue计算属性

计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多

本是古典何须时尚/ 2022年05月20日 08:34/ 0 赞/ 289 阅读

相关 Vue计算属性

计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example

￡神魔★判官ぃ/ 2021年10月20日 00:24/ 0 赞/ 375 阅读