1.vue计算属性-computed

一个数据, 依赖另外一些数据计算而来的结果

场景: 一个变量的值, 需要用另外变量计算而得来

语法:

computed: {"计算属性名" () {return "值"}
}

注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同

注意2: 函数内变量变化, 会自动重新计算结果返回

例子:

• 需求:

  • 需求1: 求2个数的和显示到页面上
  • 需求2: 字符串翻转

<template><div><p>和为: {{ num }}</p><p>{{ reverseMessage }}</p></div>
</template><script>
export default {data() {return {a: 10,b: 20,message: "我是个字符串",};},computed: {num() {return this.a + this.b;},reverseMessage() {return this.message.split("").reverse().join("");},},
};
</script>

结果:

2.vue计算属性-缓存

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

<template><div><p>{{ reverseMessage }}</p><p>{{ reverseMessage }}</p><p>{{ reverseMessage }}</p><p>{{ getMessage() }}</p><p>{{ getMessage() }}</p><p>{{ getMessage() }}</p></div>
</template><script>
export default {data(){return {msg: "Hello, Vue"}},// 计算属性优势:// 带缓存// 计算属性对应函数执行后, 会把return值缓存起来// 依赖项不变, 多次调用都是从缓存取值// 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值computed: {reverseMessage(){console.log("计算属性执行了");return this.msg.split("").reverse().join("")}},methods: {getMessage(){console.log("函数执行了");return this.msg.split("").reverse().join("")}}
}
</script><style></style>

总结一下:
计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

3.vue计算属性-完整写法

计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

语法:

完整语法:computed: {// "计算属性名" (){},"计算属性名": {set(值){},get(){return 值}}}

需求:

• 计算属性给v-model使用

页面准备输入框

<template><div><div><span>姓名:</span><input type="text" v-model="full"></div></div>
</template><script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*完整语法:computed: {"计算属性名" (){},"计算属性名": {set(值){},get(){return 值}}}
*/
export default {computed: {full: {// 给full赋值触发set方法set(val){console.log(val)},// 使用full的值触发get方法get(){return "无名氏"}}}
}
</script><style></style>

想要给计算属性赋值, 需要使用set方法