06vue_计算属性_基础示例

柔情只为你懂 2022-05-31 10:46 166阅读 0赞

模板内的JavaScript表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：  
<div id="example">  
        \{ \{ message.split('').reverse().join('') \}\}  
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。

使用Vue构造函数的参数里的computed属性来定义计算属性。

以下为代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>		
    		<div id="app1">
    			<div>我是原始内容{
       {msg}}</div>
    			<div>我是使用计算属性得到翻转的内容:{
       {
       resevermsg}}</div>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		msg:"hello vue"
    	},
    	computed:{
    		 // 计算属性的 getter
    		resevermsg: function () {
    			//此处的this是v1，通过this.msg可以直接获取到v1里data属性的属性
    		    return this.msg.split('').reverse().join('');
    		}
    	}
    });
    </script>

以上代码使用计算属性的方式实现一个运算，其实也可以使用函数（方法）实现。

如下代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>		
    		<div id="app1">
    			<div>我是原始内容{
       {msg}}</div>
    			<div>我是使用javascript表达式的方式调用函数得到翻转的内容:{
       {
       reverseMessage()}}</div>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		msg:"hello vue"
    	},
    	methods: {
    		reverseMessage: function () {
    			return this.msg.split('').reverse().join('');
    		}
    	}
    });
    </script>

**有何区别呢？**

**     第一种：使用计算属性的方式，****计算属性是基于它们的依赖进行缓存的****。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 **`msg`** 还没有发生改变，多次访问计算属性**`reversedmsg``，`**会立即返回之前的计算结果，而不必再次执行计算属性对应的函数。**

**    第二种：使用函数（方法），因为，每次都是在调用函数reverseMessage()，所以，不管msg的值有没有发生变化，函数reverseMessage()的代码都会被执行。**

**所以：嗯哼，第一种使用计算属性的方式，当然效率高了。**