vue中computer和watch的区别和使用
众所周知computer和watch都是用作监听某些变量使用的
也就是说当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
他们两个的左右除了监听数据以外还可以让代码变得简洁,没有过多地赘余混乱
有什么区别呢:
puted是计算属性，实际上和data对象里的数据属性是差不多的（使用上）。
2.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)
watch和computed各自处理的数据关系场景不同
1.watch擅长处理的场景：一个数据影响多个数据
puted擅长处理的场景：一个数据受多个数据影响
computer
一个数据被多个数据影响
computed: {count() {return (this.list[0].num + this.list[1].num) * this.c;},},
这里就相当于定义了一个名为count的变量
这个变量受 this.list[0].num this.list[1].num this.c 这三个变量的影响
只要这 三个变量其中一个变化 count这个变量也会变化
在页面中展示(和data里面定义的一样):
<p>count:{{count }}</p>
获取使用(和data里面定义的一样):
console.log(this.count);
使用场景:
购物车(常用)等待大佬们的补充
watch
一个数据将多个数据影响
data() {return {a: 1,shipStatusArr: {name: 'zhangsanlisi',age: 12}}},watch: {a: function (newValue, oldVal) {//更新后的值 更新前的值console.log( newValue, oldVal )},//数组对象型 深度监听shipStatusArr: {handler(newValue, oldValue) {console.log(newValue, oldValue)},deep: true // 深度监听immediate: true//进入组件的时候，第一次并不会执行watch，只有值发生改变才会执行 , 是因为immediate 默认 false//当 immediate = true 的时候，进入组件会立即执行。并且可以监测到组件传递数据。回调将会在侦听开始之后被立即调用。}}
使用场景:
搜索清空相关联的数据(当某个字段和某些字段有关联时,当第一个字段变化时让其他字段清空)等待大佬们的补充
点个关注支持一下我吧
如果觉得《vue中computer和watch的区别和使用》对你有帮助，请点赞、收藏，并留下你的观点哦！
