vue中computer和watch的区别和使用

vue中computer和watch的区别和使用

众所周知computer和watch都是用作监听某些变量使用的
也就是说当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
他们两个的左右除了监听数据以外还可以让代码变得简洁,没有过多地赘余混乱
有什么区别呢:
1.computed是计算属性，实际上和data对象里的数据属性是差不多的（使用上）。
2.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响

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);

使用场景:

1. 购物车(常用)
2. 等待大佬们的补充

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 的时候，进入组件会立即执行。并且可以监测到组件传递数据。回调将会在侦听开始之后被立即调用。
    }
}

使用场景:

1. 搜索
2. 清空相关联的数据(当某个字段和某些字段有关联时,当第一个字段变化时让其他字段清空)
3. 等待大佬们的补充

点个关注支持一下我吧