计算属性和methods的对比

最新推荐文章于 2022-10-12 19:56:23 发布

xiaocmianju

最新推荐文章于 2022-10-12 19:56:23 发布

阅读量556

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/xiaocmianju/article/details/124933985

版权

本文通过一个简单的Vue.js应用示例，展示了计算属性（computed）与 methods 在页面渲染时的区别。计算属性在不需要额外括号且具备缓存特性，因此在多次渲染时性能更优，不会重复执行。而 methods 每次调用都会触发函数，不具有缓存效果。

摘要由CSDN通过智能技术生成

            1.计算属性是一个属性必须要有返回值 methods不一定
           2.计算属性在页面渲染时不需要加括号 methods必须要加
           3.计算属性有缓存 methods没有缓存从性能上来讲计算属性更具有优势 */

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			<h2>{{fullName}}</h2>
			--方法--
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
			<h2>{{getFullName()}}</h2>
		</div>
		<script src="../vue.js"></script>
		<script>
			const app=new Vue({
				el:'#app',
				data(){
					return{
						firstName:'li',
						lastName:'shi'
					}
				},
				methods:{
					getFullName(){
						console.log("调用了方法getFullName");
						return this.firstName+'-'+this.lastName
					}
				},
				computed:{//计算属性
					fullName(){
						console.log("调用了计算fullName");
						return this.firstName+'-'+this.lastName
					}
				}
			})
		</script>
	</body>
</html>

xiaocmianju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性和methods的对比

1.计算属性是一个属性必须要有返回值 methods不一定 2.计算属性在页面渲染时不需要加括号 methods必须要加 3.计算属性有缓存 methods没有缓存从性能上来讲计算属性更具有优势 */代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g...
复制链接

扫一扫