computed与watch的区别、应用场景

computed与watch的区别、应用场景

1、computed

1）当参与计算的值发生变化的时候，就会触发函数。
2）有缓存，值不变的情况下，computed里的函数不会被触发
3）例如，computed里的函数被页面调用5次，computed函数只执行一次，其他四次调用的缓存的数据。关闭缓存就把cache属性设置为false.
4）应用场景：购物车结算

watch

1）监听的数据发生改变，就会触发函数。没有缓存，支持异步。
2）例如，watch函数被页面调用五次，那么如果监听的数据没有改变，一次都不会执行，如果改变了，会执行5次。
3）watch的一个属性，content，在监听引用类型的数据时和要求组件加载就被监听的时候用，作为包含函数、immidiate、deep三属性的一个watch的属性对象

watch: {
			content: {
				handler(newData, oldData) {
					console.log('watch监听---', newData.text, '---', oldData)
				},
				immediate: true, // 注释一
				deep: true // 注释二
			}
		},

4、应用场景：1、监听父组件接收子组件窜传过来的值，因为该操作是异步的，子组渲染之后才会被传。2、监听路由变化，3，搜索栏

注

注：自己写一遍就会清晰并记住喔！！