1. uniapp更改数据后不渲染页面的原因
在uniapp中，当我们修改了页面中的数据后，有时候页面并不会自动重新渲染，这可能会导致我们在页面上看到的数据与实际数据不一致的情况发生。这种情况通常出现在使用了Vue的计算属性（Computed）或者监听器（Watch）等情况下。
对于这个问题，一般有两种原因，一种是因为Vue的响应式机制没有生效，另一种是因为Vue在监听对象或者数组时，只会监听它们的直接属性或者元素的改变，而不会监听该属性或者元素中的对象或者数组的改变。下面我们将分别讨论这两个原因和对应的解决方法。
2. 原因一：Vue的响应式机制未生效
2.1 原因分析
在Vue中，当我们修改数据时，Vue会自动检测到数据的变化，并自动执行重新渲染操作。这是因为Vue采用了响应式机制，每当数据发生变化时，Vue会自动更新视图。但是有些情况下，Vue的响应式机制可能不会生效，导致数据的变化没有被Vue所感知，从而不会触发重新渲染操作。比如在以下代码中：
// template
<template>
<div>{{ message }}</div>
</template>
// script
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
},
methods: {
changeMessage() {
this.message = 'Hello, uniapp!'
}
}
}
</script>
在上面代码中，我们定义了一个message变量，并将其初始值设为'Hello, world!'。在视图中，我们使用双花括号语法将message变量绑定到页面上。在script标签中，我们还定义了一个方法changeMessage，在该方法中，我们将message的值改为'Hello, uniapp!'。根据我们学习的Vue知识，当我们调用changeMessage方法时，页面应该会自动重新渲染，但是实际上并没有。那么为什么会出现这种情况呢？
2.2 解决方法
出现上述问题的原因是我们直接对message进行赋值，并没有使用Vue提供的this.$set方法。因为我们修改message的值时，它的引用并没有发生变化，因此Vue的响应式机制没有生效，这导致了页面没有自动重新渲染。解决方法就是调用this.$set方法来修改message的值，该方法会触发Vue的响应式机制，使页面自动重新渲染。修改后的代码如下：
// template
<template>
<div>{{ message }}</div>
</template>
// script
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
},
methods: {
changeMessage() {
this.$set(this, 'message', 'Hello, uniapp!')
}
}
}
</script>
在changeMessage方法中，我们把this和'message'作为参数传递给了this.$set方法，第一个参数代表要修改的对象，第二个参数代表要修改的属性名，第三个参数代表新的属性值。这样就保证了数据的变化能够被Vue所感知，同时触发重新渲染。
3. 原因二：Vue不监听对象或数组中属性的改变
3.1 原因分析
在Vue中，当我们对一个对象或者数组进行监听时，只有它们的直接属性或元素的改变才能被Vue所监听到。比如，在以下代码中：
// template
<template>
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</template>
// script
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' }
]
}
},
methods: {
changeItem() {
this.list[0].name = 'pear'
}
}
}
</script>
在上面的代码中，我们定义了一个数组list，并使用v-for指令将其渲染到页面上。在script标签中，我们还定义了一个方法changeItem，在该方法中，我们将list中的第一个元素的name属性改为'pear'。根据Vue的监听器原理，页面应该会自动重新渲染，但是实际上并没有。那么问题出在哪里呢？
问题出在changeItem方法中，我们直接修改了list[0]对象的name属性，而这个属性直接属于该对象，而不是直接属于list数组，因此Vue的监听器并不会监听这个属性的变化，导致页面没有自动重新渲染。这种情况下，我们需要采用Vue提供的响应式方法来更新数据。
3.2 解决方法
对于Vue不监听对象或数组中属性的改变的情况，我们可以使用Vue提供的响应式方法来手动更新数据，保证页面自动重新渲染。对于对象，我们可以使用Vue.set方法或者this.$set方法；对于数组，我们可以使用Array.prototype.splice方法或者Vue.set方法或者this.$set方法。
Vue.set和this.$set方法的使用方法相同，都是把要修改的对象和要修改的属性名作为参数传递进去，然后再传递新的属性值即可。使用Vue.set或者this.$set方法修改上文代码中的list数组代码如下：
// script
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' }
]
}
},
methods: {
changeItem() {
this.$set(this.list[0], 'name', 'pear')
}
}
}
</script>
在changeItem方法中，我们首先通过this.list[0]访问到list数组中的第一个对象，然后把这个对象和'pear'作为参数传递给了this.$set方法。这样就保证了这个属性的改变能够被Vue所监听，从而触发重新渲染。
Array.prototype.splice方法是JavaScript原生提供的用于修改数组的方法，它会直接修改原数组，并返回被删除的元素。使用Array.prototype.splice方法修改上文代码中的list数组代码如下：
// script
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' }
]
}
},
methods: {
changeItem() {
this.list.splice(0, 1, { id: 1, name: 'pear' })
}
}
}
</script>
在changeItem方法中，我们首先通过this.list.splice方法删除了list数组中第一个元素，然后立即在该位置插入了一个新的对象{id: 1, name: 'pear'}。这样就保证了list数组的变化能够被Vue所监听，从而触发重新渲染。
4. 总结
在uniapp中，Vue的响应式机制可能会失效，导致页面不会自动重新渲染。此外，在Vue中，监听对象或数组时，只会监听它们的直接属性或者元素的改变，而不会监听该属性或者元素中的对象或者数组的改变。针对这两种情况，我们可以采用不同的解决方法来手动更新数据并保证页面自动重新渲染，从而让数据变化与页面同步。需要注意的是，在修改对象或者数组的元素时，应该使用Vue提供的响应式方法，而不是直接对属性进行赋值操作。