一、基础计算模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{firstName + " " + lastName}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"}});
</script>
</body>
</html>

升级一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{firstName+" "+lastName}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},//计算属性computed: {fallName: function () {return this.firstName + this.lastName;}}});
</script>
</body>
</html>

二、计算属性computed

有缓存机制，会用以前计算的结果
当计算的属性发生变化时会执行一次，当修改的数据不属于计算属性时，会从缓存中查询，不会执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{fullName}}{{age}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",age: 22},//计算属性computed: {fullName: function () {console.log("计算了一次")return this.firstName + this.lastName;}}});
</script>
</body>
</html>

在这里插入图片描述

三、方法methods

无缓存机制，不管修改什么输入都会执行一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{fullName()}}{{age}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",age: 22},methods: {fullName: function () {console.log("计算了一次")return this.firstName + this.lastName;}}});
</script>
</body>
</html>

在这里插入图片描述

四、侦听器watch

和计算属性一样有缓存机制，只要我侦听的数据不发生改变，我就不会执行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算属性、方法、侦听器</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root">{{fullName()}}{{age}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",fullName: "gb lfy",age: 22},watch: {firstName: function () {console.log("计算了一次");this.firstName + this.lastName;},lastName: function () {console.log("计算了一次");this.firstName + this.lastName;},}});
</script>
</body>
</html>