vue学习笔记（14）——计算属性

66 阅读 0 评论 44 点赞

我是靠谱客的博主发嗲黑裤，最近开发中收集的这篇文章主要介绍vue学习笔记（14）——计算属性，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

计算属性：

定义：要用的元素不存在，要通过已有属性计算得来

原理：底层借助了Object.defineproperty方法提供的getter和setter

get函数什么时候执行？

初次读取时会执行一次

当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，测试方便

备注：

如果属性最终会出现在vm上，直接读取使用即可

如果计算属性要修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>姓名案例-计算属性语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
姓:<input type="text" v-model="na"><br><br>
名:<input type="text" v-model="me"><br><br>
<!-- 虽然多次使用了name,但是只调用了一次get,那是因为首次调用就存在了缓存中,
后面直接从缓存里读取就可以,直至数据改变时 -->
全名:<span>{{name}}</span><br><br>
全名:<span>{{name}}</span><br><br>
全名:<span>{{name}}</span><br><br>
全名:<span>{{name}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip=false
Vue.config.keyCodes.huiche=13//定义了一个别名键
const vm=new Vue({
el:'#root',
data:{
na:'张',
me:'三'
},
computed:{// 存放计算属性,计算属性不能放在data里面
name:{
//get什么时候调用?1.初次读取name时.2.所依赖的数据发生改变时
get()
{
return this.na+ '-'+this.me
},
//修改时调用
set(value){
const arr=value.split('-')//按照指定字符,将数组拆分
this.na=arr[0]
this.me=arr[1]
// name=value,因为是计算属性,这里就不需要写了,以经计算完了
}
}
}
})
</script>
</body>
</html>