我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…
👨🎓作者：Java学术趴
💌公众号：Java学术趴
🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。
🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。
☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！
👋大家好！我是你们的老朋友Java学术趴，好久没有时间写文章，最近忙着找工作。没有太多的时间给大家分享文章，从今天开始给大家持续发布新的技术文章，还希望大家多多支持支持。新的一年就要到来了，还记着在前几年，从SSM到SpringBoot，在到SpringBoot+vue2.0的时代。今年估计又会发生巨大的编程语言变革。俗话说：时代的几步必然会带动科技的发展，科技的发展必将带来新一波编程语言的到来。在今年，个人认为Vue3.0的时代就会到来，现在我们正处于Vue2.0+Vue3.0的时代，今年Vue3.0必将会替代Vue2.0的存在。
我们这篇文章也是会从Vue2.0到Vue3.0来一个过度，让大家先巩固一下Vue2.0，之后Vue3.0进发。大家如果感觉有帮助的话，可以点赞多支持支持。感谢感谢~~💓💓💓
2.1 Vue中的计算属性
2.1.1 计算属性的定义
1. 定义：要用的属性不存在，是通过已有的属性计算而来的。
2. 原理：底层借助了Object.defineproperty方法提供getter和setter。
3. get函数什么时候调用：
**(1) 初次读取时会执行一次。**
**(2) 当依赖数据(data中的数据)发生变化时会被再次调用。**
4. 优势：与methods实现相比，内部有缓存机制(复用),效率更高，调式方便。
5. 备注：
(1) 计算属性最终会出现在vm上，直接读取使用即可。
(2) 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>姓名案例-计算属性</title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="../../../../../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
<!--
要注意计算属性存在于vm中，就像调用data中的数据写法一样，直接调用即可。
千万不要写成：
全名：<span>{{fullName.get()}}</span>
-->
全名：<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false;
let a = 1;
<!--声明一个Vue实列-->
const vm = new Vue({
el: "#root",
/* Vue中认为data中的数据就是属性 */
data: {
firstName: '张',
lastName: '三',
},
/* 计算属性就是根据原来的属性重新计算出来的一个属性 */
/* 计算属性要放在一个全新的对象(computed)中 */
/* computed对象中的属性不会存储到vm的 _data中 */
/* computed对象中的属性会通过 _data中的属性计算完之后直接丢到vm中,在vm中存在 fullName*/
computed: {
/* 我们还需要将每一个计算过程放到一个对象中，因为计算的方法可能是很复杂的。*/
fullName:{
/* get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 */
/*
get什么时候调用? 1.初次读取fullName时。 2.所依赖的数据发生变化时。
在计算属性的这个地方存在一个缓存的机制。当初次调用fullName的时候，
他会把这个fullName这个值存储到缓存中。当Vue第二次调用这个fullName的时候，
发现其中依赖的数据没有发生变化，那么此时Vue就会从缓存中来读取这个fullName的值。
不会再次调用get()方法。
只有当Vue再次使用fullName的时候，发现此时fullName的依赖数据发生了变化，
此时就会从新调用get()方法，并且将这次调用产生的fullName值存储到缓存中替换掉原来的缓存中的值。
*/
get(){
/*
此时的this指向的是Vue实列对象，也就是vm。Vue已经帮我们维护好了
既然我们已经获取到了vm，那么vm中的所有数据我们都可以获取带到了。
*/
console.log(this); //此处的this是 vm
/* 此时就是代表：funName = '小猪佩奇' */
/* 注意：这个a是属于windows的，不被Vue对象所管理。
* 所以不论在vue中怎么改变这个a的值，最终a的值永远是1。
*
* */
return this.firstName + '-' + this.lastName + a;
},
/* set什么时候调用？当fullName被修改时，这个方法不是非要写的。
* 如果你确定要修改数据再写，不修改数据的时候可以不写。
* 这个set方法中也存在 this，此时的this指向的也是Vue实例对象vm。
* */
/* 这个value值接收的就是我们改变的值 */
set(value){ // '李-四'
/*
这个地方我们只是修改了之后简单的打印一下，并没有将修改后的计算属性的值赋值给data中的数据
此时的value就是计算属性。我们需要将这个计算属性格式的数据拆分为data格式的数据并从新赋值。
一定要引起计算属性依赖的data属性发生变化。
*/
console.log('set',value);
let array = value.split('-');
this.firstName = array[0];
this.lastName = array[1];
/* 当我们修改了data中的数据，他会从新调用计算属性中的get()方法来修改全名 */
}
}
}
});
</script>
</body>
</html>
2.1.2 计算属性的简写形式
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>姓名案例-计算属性的简写方法</title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="../../../../../js/vue.js"></script>
</head>
<body>
<!--
简写的形式只能应用于：
只考虑计算属性的读取而不考虑计算属性的修改的时候。
-->
<!--
调用methods中的函数的两种情况：
(1)：绑定事件调用的函数，括号可加可不加。
(2)：插值语法调用函数的时候，必须加括号
computed中调用的不是函数，就是一个属性，不能加括号。
-->
<div id="root">
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
<!-- 注意：简化写法调用的也是vm中的fullName这个属性，而不是fullName方法，
在vm中根本就不存在这个 fullName()函数。
-->
全名：<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false;
<!--声明一个Vue实列-->
const vm = new Vue({
el: "#root",
/* Vue中认为data中的数据就是属性 */
data: {
firstName: '张',
lastName: '三',
},
computed: {
// 完整版
/* fullName:{
get(){
console.log(this);
return this.firstName + '-' + this.lastName;
},
set(value){
console.log('set',value);
let array = value.split('-');
this.firstName = array[0];
this.lastName = array[1];
}
}*/
// 简化版 (对象中函数的简化写法，这个函数代表的就是以前的get()方法，
// fullName:function (){
// 实际开发中一般不需要计算属性的值，不写set()方法。)
fullName(){
console.log(this);
return this.firstName + '-' + this.lastName;
}
}
});
</script>
</body>
</html>
