Vue.js计算属性
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18
效果：
不用计算属性
一，插值语法实现
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="JS/vue.js">script>
head>
<body>
<div id="root">
<div>str1：<input type="text" v-model="str1">div>
<div>str2：<input type="text" v-model="str2">div>
<div>str1+str2：{{str1}} - {{str2}}div>
div>
<script>
new Vue({
el: "#root",
data: {
str1: "str1",
str2: "str2",
},
});
script>
body>
html>
二，methods实现
只要data改变，vue一定会重新解析模板，{{}}中的方法一定会重新调用。（v-if等类似）
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title>
<script src="JS/vue.js">script>
head>
<body>
<div id="root">
<div>str1：<input type="text" v-model="str1">div>
<div>str2：<input type="text" v-model="str2">div>
<div>str1+str2：{{getResult()}}div>
div>
<script>
new Vue({
el: "#root",
data: {
str1: "str1",
str2: "str2",
},
methods: {
getResult() {
return this.str1 + ' - ' + this.str2;
},
},
});
script>
body>
html>
计算属性
计算属性和methods的区别是，计算属性有缓存，methods没有。
如下，①改变str2依然会重新调用{{}}中的getResult()，且②有多个getResult()时反复调用。
new Vue({ el: "#root", data: { str1: "str1", str2: "str2", }, methods: { getResult() { console.log("调用getResult") return this.str1; }, }, });
采用计算属性可以克服上述缺点，仅当依赖数据改变时才重新调用：
缩写形式（只有get没有set的时候可以用）：
new Vue({ el: "#root", data: { str1: "str1", str2: "str2", }, computed: { result() { console.log("我被调用"); return this.str1; } } });