Vue中的计算属性与一个非常容易看懂的示例

最新推荐文章于 2024-07-19 10:52:30 发布

会举重的薯片

最新推荐文章于 2024-07-19 10:52:30 发布

阅读量79

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_55930097/article/details/132350154

版权

一、什么是计算属性？

计算属性是vue实例中的一个配置选项：computed。
所有计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

二、为什么使用计算属性?

在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，因此可以用计算属性进行改写。例如:

  computed: {
                  ReversedText: function ()
                  {
                      return this.text.split(',').reverse().join(',')
                  }

计算属性的本质就是辅助插值表达式来进行复杂逻辑运算的。

三、计算属性与methods的区别？

计算属性把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，极大的提高程序的性能。
如果写在methods里，页面每渲染一次就重新执行,所以每次都会重新计算。
计算属性是具有缓存性质的，而methods中的方法，则不具备缓存的能力。

四、计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，通常里面都是一个个计算相关的函数 , 一般就是用来通过其他的数据算出一个新数据 , 只要最终返回一个计算出来的结果即可。其完整语法如下：

	computed: {
       // "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }

使用计算属性的默认方法 getter 来读取,里面可以执行一些逻辑或者直接return返回的值。
也可以提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作。

以下示例实现了对输入框的实时响应和全名的动态更新。

	<body>
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false 

		const vm = new Vue({
			el:'#root',
			//data对象定义了firstName和lastName的初始值为"张"和"三"。
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			//computed属性中定义了一个fullName计算属性
			computed:{
				fullName:{
			    	//通过get方法将firstName和lastName拼接成完整的全名
					get(){
						console.log('get被调用了')//每次访问fullName时打印一条日志
						return this.firstName + '-' + this.lastName
					},
					//set方法在对fullName进行赋值时被调用
					set(value){
						console.log('set',value)
						//它将新的全名字符串拆分成姓和名，并分别更新firstName和lastName的值
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>