<!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>
复制代码
