vue 计算属性和方法的区别

最新推荐文章于 2024-03-03 08:35:09 发布

＊且听风吟

最新推荐文章于 2024-03-03 08:35:09 发布

阅读量483

点赞数

分类专栏： # Vue 2.x

本文链接：https://blog.csdn.net/HH18700418030/article/details/102562221

版权

Vue 2.x 专栏收录该内容

174 篇文章 32 订阅

订阅专栏

计算属性 vs 方法：
（1）计算属性基于它所依赖的数据进行更新，依赖的数据发生了变化才会进行更新；方法是每次调用都会执行。
（2）计算属性是基于它们的响应式依赖进行缓存。如果它所依赖的数据没有发生变化，那么，后面每一次访问计算属性中的值，都是访问的之前缓存的结果，不会重复执行。

缓存的必要性：
如果有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。可能有其他计算属性依赖于 A，如果没有缓存，将多次执行 A 的 getter！

小例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>computed VS method</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style>
     .num-input{
        width: 300px;
     }   
    </style>
</head>
<body>
<div id="app">    
	<el-button type="success" @click="add">add</el-button>
    <el-input v-model="num1" class="num-input"></el-input>
    <div>{{ plus }}</div>
</div>
</body>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
    	var app = new Vue({
    		el: '#app',
    		data:{
                num1:10
    		},
            computed:{                
                plus(){
                    console.log('num1：', this.num1)
                }
            },
    		methods: {
    			add(){
    				this.num1 = this.num1+1
                    console.log('点击add：', this.num1)
    			}
    		}
    	})
    </script>
</html>

例子如下所示：
在这里插入图片描述
点击按钮 “add” 之后，触发 methods 中的 add 方法，输入框中的数字加1，此时，由于 num1 的数据发生了变化，所以，触发了 computed 中的 plus ，因此，add 和 plus 方法都执行了：

接下来，在输入框中输入1之后，改变了输入框绑定的值 num1，所以，触发了 computed 中的 plus，如下所示：
在这里插入图片描述

＊且听风吟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 计算属性和方法的区别

计算属性 vs 方法：（1）计算属性基于它所依赖的数据进行更新，当依赖的数据发生了变化才会进行更新；方法则是，每次调用都会执行。（2）计算属性是基于它们的响应式依赖进行缓存。如果它所依赖的数据没有发生变化，name，后面每一次访问计算属性中的值，都是访问的之前缓存的结果，不会重复执行。缓存的必要性：如果有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。可能有其他计...
复制链接

扫一扫