vue watch - 技术栈

vue 使用watch监听props的一些小建议

当在watch里面给data赋值，请使用深拷贝。

father.vue 复制代码

<template>
  <div class="container">
    <div class="left">
      <div class="button_group">
        <!--        <button @click="random_change_data">修改某一列的数据</button>-->
      </div>
    </div>
    <div class="right son">
      <son_component :table_data="table_data"></son_component>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import son_component from "@/components/son_component.vue";

export default Vue.extend({
  name: "FatherComponent",
  components: {
    son_component,
  },
  data() {
    return {
      table_data: [],
    };
  },
  mounted() {
    this.init_data();
  },
  methods: {
    init_data() {
      for (let i = 0; i < 100; i++) {
        (
          this.table_data as never as [
            { name: string; age: number; check: boolean }
          ]
        ).push({
          name: `alex${i}`,
          age: i,
          check: false,
        });
      }
      console.log(this.table_data);
    },
    generate_random_number(max: number) {
      return Math.floor(Math.random() * max) + 1;
    },
    // random_change_data() {
    //   /**
    //    * 随机修改某一列的数据
    //    */
    //   const index = this.generate_random_number(this.table_data.length);
    //   // (this.table_data[index] as { age: number }).age = 100;
    //   const item = this.table_data[index] as { age: number };
    //   item.age = 100;
    //   this.$set(this, index, item);
    // },
  },
});
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left,
.right {
  width: 50vw;
}

.left {
  margin: 0 auto;
  line-height: 100%;
  text-align: center;
}
</style>

son.vue 复制代码

	<template>
  <div>
    <div class="table_data">
      <table>
        <thead>
          <tr>
            <th>名字</th>
            <th>年龄</th>
            <th><input type="checkbox" v-model="is_all" /></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td><input type="checkbox" v-model="item.check" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { cloneDeep } from "lodash";

export default Vue.extend({
  name: "son_component",
  data() {
    return {
      is_all: true,
      selection: [], // 选择的数据
      data: [], // 表格数据
    };
  },
  props: {
    table_data: {
      type: Array,
      default: () => [],
    },
    choice_list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    choice_list: {
      handler(new_: [string], old_) {
        console.log("choice_list 发生了改变");
        /**
         * 根据名字去判断是否选择
         */
        if (new_) (this.selection as any) = this.choice_list.concat(new_);
      },
      immediate: true,
      deep: true,
    },
    table_data: {
      handler(new_) {
 					(this.data as any) = this.table_data;
      }
    },
  },
});
</script>

<style scoped></style>

这个时候如果修改data里面的值，是会触发watch里面的监听的，所以这里建议使用深拷贝
在线代码