watch和computed的区别

该文摘自Vue中的watch与computed，看了之后对computed更加了解。

watch

• 主要用于监控vue实例的变化，它监控的变量必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，也可以监控对象里面的属性。
• 当你想要在数据变化响应时，执行异步操作或开销较大的操作，就可以使用watch。

data() {
	className: "三年级五班",
	studentInfo: {
		name: "王富贵",
		sex: "女",
		age: 21,
	}
},
watch: {
	// 监控单个变量
	className(newVal, oldVal) {
		console.log("新值：" + newVal, "旧值：" + oldVal)
	},
	// 监控对象
	studentInfo(newVal, oldVal) {
		console.log("新值：" + newVal, "旧值：" + oldVal)
	},
	// 监控对象的属性
	"studentInfo.age"(newVal, oldVal) {
		console.log("新值：" + newVal, "旧值：" + oldVal)
	}
}

watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据。

computed

• 计算属性可用于对指定的视图（View），进行复杂的值计算，这些值将绑定到依赖项值。这些计算将被缓存，并且只在需要时更新。
• 该变量不能在data中声明。

举个🌰

data() {
	results: [
		{
			name: "English",
			marks: 70
		},{
			name: "Math",
			marks: 80
		},{
			name: "History",
			marks: 90
		}
	]
},

假设我们想要查看所有主题的总数。我们不能使用filters或expressions来完成这个任务。

• filters：用于简单的数据格式，在应用程序的多个位置都需要它。
• expressions：不允许使用流操作或其他复杂的逻辑。他们应该保持简单。

这个时候，就可以使用计算属性：

computed: {
	totalMarks: function() {
		let total = 0
		let that = this
		for(let i=0; i<that.results.length; i++) {
			total += parseInt(that.results[i].marks)
		}
		return total
	}
}

效果如下：

当然，computed中的totalMarks函数也可以写在methods中，最终得到的总数结果是相同的。
那为什么不在methods中使用呢？

虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。

在methods中使用totalMarks()函数，在每次页面渲染时都被执行一次（例如，使用每一个change）。
而在computed中使用totalMarks()函数，Vue会记住计算的属性所依赖的值（也就是results）。

通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着只要results还没有发生改变，多次访问totalMark计算属性会立即返回之前的计算结果，而不必再次执行函数。

如果computed依赖data里面的变量，如果data里面的变量改变了，computed就会重新计算，以此来进行实时更新

计算属性传值(不建议)：

computed: {
	total() {
		return (count) => {
			// 进行一些计算
			return count++
		}
	}
}

使用{{ total(2) }}，2就是count