Vue.extend创建的组件propsData上接收的值改变了但是视图没有更新!

Question

parent.vue

import videoView from "../videoView"


const comp_videoView = Vue.extend(videoView);
        console.log("instance===index===",index);
        const instance_videoView = (new comp_videoView({
          propsData:{
            // index:index,
            uid:id,
            userType:userType,
            userName:userName,
            userRole:userRole
          },
          data(){
            return $.dataObj
          }
        })).$mount();
        instance_videoView.index = index;
        // $.$set(instance_videoView,"index",index);
        console.log("nodetype:",instance_videoView,typeof index)
        document.getElementById("ag-canvas").appendChild(instance_videoView.$el);
        
        

videoView.vue

<template>
  <figure :id="`ag-item-${uid}`" class="ag-item" :ref="`ag_item_${uid}`">
    <div>component:uid:{{uid}}</div>
    <!-- <div
      :id="`player_${uid}`"
      style="width: 100%; height: 100%; position: relative; background-color: black; overflow: hidden;"
    >
      <video
        :id="`video${uid}`"
        style="width: 100%; height: 100%; position: absolute; object-fit: cover;"
        autoplay
        playsinline
      ></video>
      <audio :id="`audio${uid}`" autoplay playsinline></audio>
    </div>-->
    <div class="tool_panel_box" v-if="userType !== 1 && num === -1">
      <div class="top_bar">
        <div class="icofont_live ico_horn fr stop">
          <div class="box run" style="display:none;">
            <div class="wifi-symbol">
              <div class="wifi-circle first"></div>
              <div class="wifi-circle second"></div>
              <div class="wifi-circle third"></div>
            </div>
          </div>
          <i class="icofont_live zcwicoicon--"></i>
        </div>
        <i class="icofont_live zcwicoquanping fr" @click="handleSwitchWin"></i>
      </div>
      <div class="bottom_bar">
        <span>{{userRole}}：</span>
        <span>{{userName}}</span>
      </div>
    </div>
  </figure>
</template>

<script type='text/ecmascript-6'>
export default {
  props: {
    // index: {
    //   type: Number,
    //   required: true,
    //   default: -1
    // },
    uid: {
      type: Number,
      required: true
    },
    userRole:{
      type:String,
      required:true
    },
    userName:{
      type:String,
      required:true
    },
    userType:{
      type:Number,
      required:true,
      default:1
    },
    items: {
      type: Array,
      default: Array
    }
  },
  watch: {
    index(val){
      console.log("child--watch==index",val);
    }
    // items: {
    //   handler(newV, oldV) {
    //     if (newV.length !== 0) {
    //       // this.student = {...newV[this.index]}
    //       console.log("watch==items==newV", newV);
    //     }
    //   },
    //   deep: true
    // }
  },
  data() {
    return {
      // uid:undefined,
    };
  },
  methods: {
    initParams() {
      this.uid = this.items[this.index].getId();
    },
    videoWinPlay() {
      let $ = this;
      $.items[$.index].play(`ag-item-${$.items[$.index].getId()}`);
    },
    handleSwitchWin(){
      // 切换主屏
      console.log("切换主屏:",this.$refs[`ag_item_${this.uid}`]);
      console.log("样式====",this.$refs[`ag_item_${this.uid}`].getAttribute("style"))
      console.info("fq==",this.$parent,this.$root.$parent,this.userType);
      console.log("num==",this.num);
      this.$bus.$emit("ebs_test",{
        style:this.$refs[`ag_item_${this.uid}`].getAttribute("style"),
        uid:this.uid,

      });
      // this.userType = -1;

      // console.log("this.userType--xighai=",this.userType);
      console.log("change==num==",this.num);


    }
  },
  beforeUpdate() {
    console.log("子组件beforeUpdate", this.index);
    // let $ = this;
    // $.videoWinPlay();
  },
  created() {
    console.log("子组件created", this.index);
    // this.initParams();
  },
  mounted() {
    console.log("子组件mounted");
    // let $ = this;
    // $.videoWinPlay();
  }
};
</script>

实际场景：

parent.vue 组件里去修改extend创建组件里的userType值，这个值是发生改变了，但是videoView视图没有同步更新？

Answer 1

propsData不是响应式的，可以去官网查看下，在模板里，绑定 props 是响应式的，这两者有所区别，详情可以去官网查询下。propsData 仅仅是为了方便单测。