Vue教程(三)：计算属性

1、姓名案例—插值语法版

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>姓名案例-插值语法版</title><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/>全名：<span>{{firstName}}-{{lastName}}</span></div><script>// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;new Vue({el: '#root',data: {firstName: '张',lastName: '三'}})
</script>
</body>
</html>

2、姓名案例—methods版

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>姓名案例-methods版</title><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/>全名：<span>{{initFullName()}}</span></div>
<script>// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;new Vue({el: '#root',data: {firstName: '张',lastName: '三',},methods:{initFullName(){return this.firstName + '-' + this.lastName;}}})
</script>
</body>
</html>

3、姓名案例—计算属性版

data中的变量称为属性

data: {// 属性firstName: '张',lastName: '三',},

computed中的叫做计算属性

get作用：当有人读取fullName时候，get就会被调用，且返回值就被作为fullName的值
什么时候调用：①初次读取fullName的时候；②所依赖的数据发生变化的时候

computed: {// 计算属性fullName: {get(){return this.firstName + '-' + this.lastName;},}}

为什么用计算属性？优势在哪

仔细看一下下面的效果，页面打印了5次，但是get只被调用了一次，这是因为当第一次调用了fullName之后，就会被存到缓存，后面用的时候就会直接从缓存里取。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KmlYPVna-1690511728305)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230728102824836.png)]$

set方法

// 什么时候调用：当fullName被修改的时候set(value){const arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}

fullName改变之后，就会调用set方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQXsSOJs-1690511728306)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230728103432581.png)]$

4、计算总结

计算属性：
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：底层借助了Object.defineProperty方法提供的getter和setter
- get函数什么时候执行：
  - 初次读取时会执行一次
  - 当依赖的数据发生改变时会被再次调用
- 优势：与methods相比，内部有缓存机制，效率更高，调试方便
- 备注：
  - 计算属性最终会出现在vm上，直接读取使用即可
  - 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

5、姓名案例—计算属性简写版

只有考虑get，不考虑set的时候才能使用简写方式。

computed: {// 完整写法// fullName: {//     get(){//         return this.firstName + '-' + this.lastName;//     },//     set(value){//         const arr = value.split('-');//         this.firstName = arr[0];//         this.lastName = arr[1];//     }// }// 简写fullName(){return this.firstName + '-' + this.lastName;}}