计算属性：
1.定义：要用的属性不存在，需要用已有的属性计算得来。【这里的属性指：vm._data内的属性】
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
（1）初次读取时会执行一次；
（2）当依赖的数据发生变化时会被再次调用
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
（1）计算属性最终会出现在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
浏览器console输出，如下图：
代码实现
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
计算属性：
1.定义：要用的属性不存在，需要用已有的属性计算得来。【这里的属性指：vm._data内的属性】
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
（1）初次读取时会执行一次；
（2）当依赖的数据发生变化时会被再次调用
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
（1）计算属性最终会出现在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
-->
<div id="root">
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
测试：<input type="text"><br/><br/>
<!-- 全名：<span>{{fullName()}}</span> -->
全名：<span>{{fullName}}</span><br/><br/>
<!-- 全名：<span>{{fullName}}</span><br/><br/>
全名：<span>{{fullName}}</span><br/><br/>
全名：<span>{{fullName}}</span><br/><br/> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue 在启动时生成生产提示
const vm =new Vue({
el:root,
data:{
firstName:'张',
lastName:'三'
},
// methods:{
// // fullName(){
// // console.log('@---fullName')
// // return this.firstName+'-'+this.lastName
// // }
// }
computed:{
fullName:{
//get作用:当有人读取fullName，get就会被调用，且返回值作为fullName的值
//get什么时候调用：1.初次读取fullName时；2、所依赖的数据发生变化时
get(){
console.log('get被调用了')
// console.log(this)
return this.firstName+'-'+this.lastName
},
//set作用：
//set什么时候调用：当fullName被修改时。
//示例：console端调用方式为：vm.fullName='黄-小敏'
set(value){
console.log('set被调用了')
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</html>
原文地址：http://www.cnblogs.com/quliangshyang/p/16913639.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
