vue 中 computed、methods 和 watch 属性的使用和对比

computed、methods 和 watch 属性的使用

下面使用一个姓名拼接案例来演示用法

1.methods

<div id="app"> {{ fullname() }} </div>
<script>
		var app = new Vue({
			el: '#app',
			data: {
				firstName: 'Yudong',
                lastName: 'Gao'
			},
			methods: {
                fullname() {
                    return this.firstName + " " + this.lastName;
                }
            }
		})
<script>

2.computed

<div id="app"> {{ fullname }} </div>
<script>
		var app = new Vue({
			el: '#app',
			data: {
				firstName: 'Yudong',
                lastName: 'Gao'
			},
			computed: {
                fullname() {
                    return this.firstName + " " + this.lastName;
                }
            }
		})
<script>

3.watch

<div id="app"> {{ fullname }} </div>
<script>
		var app = new Vue({
			el: '#app',
			data: {
				firstName: 'Yudong',
                lastName: 'Gao',
                fullName: ''
			},
			 watch: {
                firstName() {
                    this.fullname = this.firstName + " " + this.lastName;
                },
                lastName() {
                    this.fullname = this.firstName + " " + this.lastName;
                }
            }
		})
<script>

---

computed、methods 和 watch 属性的对比

相同点：
都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。

不同点：

1. computed 属性的结果会被缓存，除非依赖性的响应式属性变化才会重新计算。
   主要当做属性来使用；
2. methods 方法表示一个具体的操作，只要调用它，函数就会执行，有一定的触发条件。
   主要书写业务逻辑;
3. watch 一个对象，键是需要观察的表达式，值是对应的回调函数。可以看作是 computed 和 methods 的结合体。
   用于观察和响应 Vue 实例上的数据变动，与计算属性相比，大部份情况下使用计算属性可能会更好一些，但当你想要在数据变化响应时，执行异步操作或开销较大的操作，这时使用watch将是更好的选择。
   主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。