当前位置：首页 > news >正文

Vue基础(7)_计算属性

news 2025/4/29 6:17:54

计算属性(computed)

一、使用方式：
1.定义计算属性：在Vue组件中，通过在 computed 对象中定义计算属性名称及对应的计算函数来创建计算属性。计算函数会返回计算属性的值。
2.在模板中使用计算属性：在Vue的模板中，您可以直接像访问普通属性一样使用计算属性。Vue会自动处理计算属性的依赖关系，并在相关数据变化时更新计算属性。
3.计算属性的特点：
（1）计算属性是基于它们的依赖进行缓存的，只有在依赖发生变化时才会重新求值。
（2）计算属性的值会根据相关依赖的变化而自动更新，无需手动触发。
（3）计算属性的定义类似于普通的属性，但需要使用函数来返回计算结果。

二、computed与methods的区别：
1.计算属性和方法的调用方式不同：计算属性是通过对应名称直接访问的，而方法需要在模板中使用 v-on 指令或者 @ 符号进行调用。
2.计算属性可以缓存结果，而方法不能：计算属性的值会被缓存起来，只有在它所依赖的响应式数据变化时才会重新计算。而方法每次调用都要重新计算，无法被缓存。
3.计算属性应该用于简单的计算，而方法用于复杂逻辑的处理：如果需要对数据进行一些简单的计算或过滤，可以使用计算属性，因为它们比方法更高效。而如果需要进行一些复杂的逻辑处理，应该使用方法。

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

举例：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>计算属性</title>
</head><body><div id="root01"><h3>差值语法实现</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>全名：{{firstName.slice(0,3)}} {{lastName}}</div><div id="root02"><h3>methods(方法)实现</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>性别：<input type="text" v-model:value="gender"><br>全名：<span>{{fullName()}}</span><br>全名：<span>{{fullName()}}</span></div><div id="root03"><h3>计算属性实现</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>性别：<input type="text" v-model:value="gender"><br>全名：<span>{{fullName}}</span><br>全名：<span>{{fullName}}</span></div><div id="root04"><h3>计算属性(简写)</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>性别：<input type="text" v-model:value="gender"><br>全名：<span>{{fullName}}</span><br>全名：<span>{{fullName}}</span></div>
</body>
<script>Vue.config.devtools = true;// 1、用 "插值语法" 输出姓名// vue提倡模板简单，当表达式过多时，插值语法代码代码会看起来臃肿new Vue({el: "#root01",data: {firstName: '张',lastName: '三',}})// 2、用 "methods(方法)" 输出姓名new Vue({el: "#root02",data: {firstName: '李',lastName: '四',gender: '男'},methods: {fullName() {console.log("fullName方法调用了");return this.firstName.slice(0, 3) + ' ' + this.lastName;}},})// 3、用 "计算属性" 输出姓名var vm = new Vue({el: "#root03",data: {firstName: '王',lastName: '五',gender: '女'},// 计算属性对象的优势：有缓存，省去不必要的重复调用。// 完整写法，包含读取(get)和修改(set)computed: {fullName: {// get的作用：当有人读取fullName属性时，get就会被调用，且返回值就作为属性fullName的值。// get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。get() {console.log("计算属性对象中，属性fullName内的get函数被调用了");// 此处的this为vmreturn this.firstName + ' ' + this.lastName;},// set什么时候调用：当fullName属性被修改时。set(value) {console.log('set函数被调用', value);const arr = value.split('');this.firstName = arr[0];this.lastName = arr[1];}}},})new Vue({el: "#root04",data: {firstName: '赵',lastName: '六',gender: '女'},// 计算属性简写，只包含读取(get)computed: {// 对应以上的get函数，效果一致fullName() {console.log("计算属性对象中，属性fullName内的get函数被调用了");return this.firstName + ' ' + this.lastName;}}})
</script>
</html>