Vue中通过watch来响应数据的变化

Vue中的代码

原本是这样的

<div class="right-tip" >{{info.roomTypeCode}}</div>

但是由于是父组件赋值传给子组件。导致首次次运行页面都需要刷新才能进行数据动态渲染。

于是就有了下面的改造的代码用到了ref

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

具体可以看下这篇博客

https://www.cnblogs.com/goloving/p/9404099.html

<div class="right-tip" ref="roomTypeCode"></div>

使用watch来响应数据的变化

watch: {
    info: {
        handler(newVal, oldVal) {
            this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';
        },
        deep: true,
        immediate: true
    }
}

info是属性

export default {
  name: 'FillInfo',
  props: ['info'],
  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [Stepper.name]: Stepper,
    PhoneInput
  },
  data () {
    return {
      center: true
    }
  },
  methods: {
    plus () {
      this.$emit('plus')
    },
    change (val) {
      this.$emit('change', val)
    },
    minus () {
      this.$emit('minus')
    }
  },
    watch: {
        info: {
            handler(newVal, oldVal) {
                this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';
            },
            deep: true,
            immediate: true
        }
    }
}

immediate和handler

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler

deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

this.$refs.roomTypeCode.innerHTML是要赋值

this.$refs的赋值可以查看这篇博客

https://www.cnblogs.com/frost-yen/p/11145791.html

this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';

判断是否有值如果有的话则返回newVal.roomTypeCode新的值，没有的话就给个空。

经过这个方法，我去运行代码。一进去页面就直接渲染出动态数据了，不需要再去刷新页面