vue watch

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

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

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

	<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里面的监听的，所以这里建议使用深拷贝

在线代码