Vue+ts 关于绑定属性不刷新

背景

• 之前一直很奇怪，vue 的绑定机制有时候不起作用，需要手动调用函数去刷新。所以做了一波实验，终于发现了是哪种情况不能刷新。

同级组件绑定

• 在不涉及子组件的绑定中，绝对是没有问题的，除了 Vue 官网上明确指出的数组需要特殊处理，其他的绑定都会即使更新，没有问题。

子组件的 bug

• 问题就出现在子组件上，假设有一个父组件 A 和一个子组件 B。B 中用到了 A 组件传进来的参数，这个时候就有可能不刷新了。
• 如果传入的属性，在 A 中没有一个是 @Prop() 属性，那么 A 中这个属性变了，在 B 中这个属性也会变，但是前端显示并不会变，这就是我们看到的 bug 的根源。
• 如果传入的属性有一个在 A 中是 @Prop() 属性，那么当这个属性变了以后，整个 B 的前端显示都会刷新一下，这就和用 v-if 刷新的效果一样。

简单的实验

• 要做一个实验非常简单，我们先加一个附件 A：

<Test :test1="test1" :test2="test2"></Test>

@Prop() private test1!: number;
private test2!: number;

private created() {
	this.test1 = 1;
	this.test2 = 1;
}
private button1() {
	this.test1 += 1;
}
private button2() {
	this.test2 += 1;
}

• 子组件 Test 就接受这两个组件就好

<p> {{test1}} </p>
<p> {{test2}} </p>

@Prop private test1!: number;
@Prop private test2!: number;

• 首先点一下 button1 ，会发现 test1 = 2，界面刷新了，然后点 button2 ，test2 仍然为 1，并没有刷新，再点一下 button1，这个时候，test1 变成 3，test2 变成了2，说明整个界面都刷新了。