vue组件props属性监听不到值变化问题

目录

• props属性监听不到值变化问题
• props监听变化的几种方式
• 应用场景
• 1.computed 计算属性
• 2.methods 方法
• 3.watch 侦听器

props属性监听不到值变化问题

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，

遂查看vue文档，得知watch有一种深度监听的方法。

阅读vue文档如下代码。=》

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

这时就可以监听到对象内部的属性变化了。

疑惑，项目中单层的对象，没有嵌套的对象，居然也监听不到变化。

踩坑的一天。

props监听变化的几种方式

应用场景

在vue中父子组件是通过props传递数据的。通常有以下几种场景：

• 子组件展示父组件传递过来的props，一般是字符串
• 子组件通过父组件的props计算得到某个值
• 子组件修改父组件传递过来的props

1.computed 计算属性

使用场景：当pros传递过来的值不能直接使用的时候，就可以使用计算属性了。

比如：完整的地址需要将省市区3个字段拼接后展示。

计算属性是基于依赖进行缓存的，当props不变时，多次访问addrese计算属性，会立即返回结果，而不必再次执行计算。

props: {
  province: String, // 省
  city: String, // 市
  area: String // 区
},
computed: {
  address(){
    return `${this.province}${this.city}${this.area}`
  }
}

2.methods 方法

上面计算属性，通过methods也可以实现，但methods不会进行缓存，而且methods通常用来处理业务逻辑。

3.watch 侦听器

使用场景：将传递过来的props作为初始值，比如城市选择列表的默认城市，我们希望选择城市时，改变这个值。

单向数据流

父级 prop 的更新会向下流动到子组件中。

当我们需要在子组件中修改父组件传递过来的props时，如果直接更改，vue会报错的，因为如果子组件直接更改父组件的props，会使应用的数据流向难以理解。

解决方案

为了不直接修改props的值，可以在data中，用props初始化一个data属性，以后更改这个data属性即可。

但是这会导致，父组件变化时，该data属性不会更新(注意：只针对基本类型，如果是引用类型，仍旧是变化的。因为引用类型的内存地址没变)

此时为了更新这个data属性，就需要使用侦听器来监听props的变化。

深度监听

使用场景：当监听到某个值变化后，执行异步请求。

此时computed和methods都不太合适。

• 基本类型

watch: {
   msg(newV,oldV) {
     // do something
     console.log(newV,oldV)
   } 
}

• 引用类型

1.计算属性(推荐)

先通过计算属性得到引用类型的内部某个字段，再使用侦听器监听该字段的变化

  props:{
    config:Object
  },
  computed: {
      isShow() { 
          return this.config.role.isShow
      }
  },
  watch: {
      isShow(newV,oldV) {
          // do something
          console.log(newV,oldV)
      }
  }

2.deep

 props:{
    config:Object
  },
  watch: {
    isShow:{ //深度监听，可监听到对象、数组的变化
        handler (newV, oldV) {
          // do something, 可使用this
          console.log(newV,oldV)
        },
        deep:true
       }
  },

监听对象中的某个值

props:{
    option:Object
  },
  watch:{
    'option.text'(newVal,oldVal){
          console.log(newVal,oldVal);
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。