一、OptionsAPI中的计算属性
1、计算属性：computed
在 Vue 的 OptionsAPI 中，计算属性类似 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。
2、声明和使用
① 计算属性需要以 function 函数形式声明到组件的 computed 选项中，它侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值
计算属性必须当做普通属性使用，不能当做方法使用，如下案例：
<div>{{ string }}</div>
<script>
new Vue({
data: {
name: "小明",
age: 18
},
//计算属性
computed: {
string(){
return "姓名：" + this.name + "，年龄：" + this.age;
}
}
});
</script>
② 同时渲染多个变量，可以通过 mustache 使用加号“+”拼接变量，也可以使用 Vue 还提供的计算属性 computed
<template>
<!-- 方法一：通过“+”拼接 -->
<p>{{ user1 + user2 + user3 }}</p>
<!-- 方法二：计算属性渲染-->
<p>{{ user }}</p>
</template>
<script>
export default {
data() {
return {
user1: 'Tom',
user2: 'Lucy',
user3: 'Jack'
}
},
//计算属性
computed: {
user() {
return this.user1 + this.user2 + this.user3;
}
}
}
</script>
③ 注意：计算属性看上去像方法，但用的时候要当做属性用，和普通属性一样，并且计算属性也可以提取到 Vue 实例中，修改基础属性后，计算属性会跟着变化。如下通过 set 对计算属性赋值：
<div id="app">
<h1>{{name}}</h1>
<input type="text" v-model="name">
</div>
<script>
new Vue({
el: "#app",
data: {
xing: "李",
ming: "强"
},
computed: {
name: {
//get为输出方法
get(){
return this.xing + this.ming;
},
//set为输入方法，其中参数m表示输入的值
set(m){
//重新赋值
this.xing = m.substr(0,1); //截取第一个
this.ming = m.substr(1); //截取剩余字符串
}
}
}
});
</script>
二、CompositionAPI中的计算属性
首先从 vue 中引入 computed，然后再通过 const variable = computed = (()=>{ ... }) 完善计算属性，注意计算属性必须有返回值
1、使用箭头函数方式定义只读不写的计算属性，下面举几个例子：
⑴ 组合输入的姓和名：
⑵ 组合 style 样式
上面的计算属性内部，computed(()=>{ ... }) 变成 computed(()=>({ ... })) ，也就是在大括号外面再加个括号，即可将 return 关键字省略，如下：
const titleStyle = computed(()=>({ //此处由一个大括号，变成括号+大括号
width: props.width + 'px',
marginBottom: props.mgbt + 'px',
backgroundImage: `url(${getImage(props.background, 'djjx2027')})`
}))
2、可读可写的计算属性使用方法
三、计算属性 computed 和 methods 的区别：
1、计算属性可以赋值，而方法不行；
2、计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算，如果依赖的变量值不发生变化，则直接使用计算结果，不会重新计算，因此计算属性的性能比方法更好；
3、调用 methods 时，只要任意变量发生变化，都会运行函数，重新计算
computed: {
//计算属性的计算结果会被缓存，性能更好
number() {
console.log('computed test'); //多次调用 number 计算属性，不会重复打印，只有 this.num 值发生变化时，才会再次打印
return this.num * 6;
}
},
methods: {
//方法的计算结果无法被缓存，性能低
number() {
return this.num * 6; //number 方法调用第三次，就会重复打印对应的次数
}
}
下一篇：Vue使用.$mount()挂载
15601023311
