计算属性

怼烎@ 2022-06-02 11:26 220阅读 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 条评论，220人围观）

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

相关阅读

相关 Vue 计算属性

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

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

相关计算属性calc

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

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

相关计算属性——computed

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

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

相关 Vue--计算属性和监听属性

computed:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要属性值还没有发生改变，多次访问属性计算属性会立即返回之

灰太狼/ 2022年12月07日 04:27/ 0 赞/ 186 阅读

相关计算属性computed

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

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

相关【Vue】—计算属性

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

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

相关计算属性

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

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

相关 Vue计算属性

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

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

相关 Vue的计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子： <div id="app"> <p>原

墨蓝/ 2021年10月20日 01:20/ 0 赞/ 389 阅读

相关 Vue计算属性

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

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