vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法
文章目录vue双向绑定原理方法一 增加一个基本类型的变量方法二 使用整体对象替换方法三 使用vue文档提供的方法vue双向绑定原理vue深入式响应原理,当我们在data中声明变量对象,Vue 将遍历此对象所有的 property(如下面的person,list,school,score),并使用 Object.defineProperty 把这些 property 全部转为 getter/sett
·
vue双向绑定原理
vue深入式响应原理,当我们在data中声明变量对象,Vue 将遍历此对象所有的 property(如下面的list
),并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
<div v-for="(item,index) in list"
:key="index"
@click="changeSingle(item,index)">
{{item.name}},今年{{item.age}}岁,{{item.single}}单身</div>
data () {
return {
list: []//声明一个数组
}
},
mounted () {
this.setSingle()
},
methods: {
//设置初始值
setSingle () {
this.list = [
{ name: '小帅', age: '17' },
{ name: '大漂亮', age: '16' },
{ name: '阿伟', age: '18' },
{ name: '金姐', age: '22' }]
this.list.forEach(element => {
element.single = '是'
})
},
//点击事件 改变状态值
changeSingle (item, index) {
item.single = '不是'
console.log('月老牵线,告别单身~')
}
}
当我们修改基本类型的数据时,视图上会即时更新。但是,当我们修改引用数据类型时,由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。这个限制是由于引用数据类型(数组和对象)的数据存储层级可能包含多层,当我们没有在声明引用数据类型时就声明其属性值,它不会监听深层级的属性。
此时月老都牵线了 但是小帅的状态没变 (摊手)
救救小帅吧~
方法一 增加一个基本类型的变量
偶然发现,在触发增删改引用数据类型的属性值,同时修改一个基本数据类型的值,并且该基本类型必须渲染在视图上,才会触发引用数据类型数据在视图上的更新。
代码如下
HTML代码:
<div v-for="(item,index) in list"
:key="index"
@click="changeSingle(item,index)">{{item.name}},今年{{item.age}}岁,{{item.single}}单身</div>
<div>{{flag}}</div>
js代码:
data () {
return {
person: {},
list: [],
flag: true
}
},
mounted () {
this.setSingle()
},
methods: {
setSingle () {
this.list = [
{ name: '小帅', age: '17' },
{ name: '大漂亮', age: '16' },
{ name: '阿伟', age: '18' },
{ name: '金姐', age: '22' }]
this.list.forEach(element => {
element.single = '是'
})
},
changeSingle (item, index) {
this.flag = !this.flag
item.single = '不是'
console.log('月老牵线,' + item.name + '告别单身~')
}
}
}
方法二 使用整体对象替换
直接给list整体赋一个值
changeSingle (item, index) {
this.list = [
{ name: '小帅', age: '17', single: '不是' },
{ name: '大漂亮', age: '16' },
{ name: '阿伟', age: '18' },
{ name: '金姐', age: '22' }]
console.log('月老牵线,' + item.name + '告别单身~')
}
方法三 使用vue文档提供的方法
$forceUpdate()
,在增删改数据后实行强制更新。
changeSingle (item, index) {
item.single = '不是'
this.$forceUpdate()
console.log('月老牵线,' + item.name + '告别单身~')
}
好的,恭喜小帅告别单身~(✿✿ヽ(°▽°)ノ✿)
更多推荐
已为社区贡献2条内容
所有评论(0)