vue中data值在哪些情况下被改变页面不会正常刷新

vue框架是目前前端开发中常见的框架之一,本篇文章就来介绍在使用vue框架中遇到的那些问题。

常见遇到的问题之一便是:data数据改变,但页面展示并没有发现变化。

那么这是什么原因引起的呢?在那些情况下又会出现这种情况呢?

一、动态给对象新增属性或者删除属性是不会触发视图刷新更新。

    如案例所示:动态添加属性age及删除class属性

<template>
<view>
<view v-for="(item,index) in show" :key="index" class="">
{{item}}
</view>
<button @click="changeText">新增年龄</button>
</view>
</template>
<script>
export default {
data() {
return {
show:{
name:'张三',
class:'四年级'
},
}
},
methods: {
changeText(){
this.show.age = 14
delete this.show.class
}
}
}
</script>

二、通过数组下标修改数组中的元素或手动修改数组的长度不会触发视图刷新更新。

       如:修改t长度或数组中下标为0的数据。

<template>
<view>
<view v-for="(item,index) in t" :key="index" class="">
{{item.a}}
</view>
<button @click="changeText">修改</button>
</view>
</template>

<script>
export default {
data() {
return {
t:[{a:111},{a:222}]
}
},
methods: {
changeText(){
this.t.length = 1
this.t[0] = {a:1}
}
}
}
</script>

上述两种便是开发中常见的修改不会触发页面刷新情况,关于如何解决该问题。可以看我下篇文章“vue开发中data数据改变页面不刷新解决方法”

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!