vue数据更新后在视图上不响应
2023-09-27 14:22:17 时间
一、vue如何追踪变化
当你把一个普通的JS对象传给vue实例的data选项时,
vue将遍历此对象的所有属性,
并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。
Object.defineProperty是ES5中一个无法识别的特性,
这也就是为什么vue不支持IE8以及更低版本的浏览器。
二、为什么使用Vue.set()
因为受现代JS的限制,vue不能检测到对象属性的添加或删除。(重要!!!)
由于vue会在初始化实例时对属性执行 getter/setter 转化过程,
所以属性必须在data对象上存在才能让vue转换它,这样它才能是响应的。
vue不允许在已经创建的实例上动态添加新的根级响应式属性,(注意!!!)
不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上。
三、 更新数据(Array)失败
this.list[0] = '王五';
当我们修改数据之后, 【this.list[0] = '王五';】
视图上并没有发生变化,
实际上这个修改并不能生效,因为Vue不能检测到以下变动的数组:
1==> 当你利用索引直接设置一个项时,例如: this.list[index] = newValue
2==> 修改数组的length属性,例如: this.list.length = 0
所以在上例中通过this.list[0] = '王五' 是无法触发数据响应的,
<template>
<div class="about">
<template>
<div>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
<button @click="handleChangeName">修改名称</button>
</div>
</template>
</div>
</template>
<script>
//别忘记引入vue
import Vue from 'vue'
export default {
data() {
return {
list: ['张三', '李四'],
personArr: [{name:'张三',age:20},{name:'李四',age:30}],
}
},
methods: {
// 修改用户名称
handleChangeName() {
// 这样更改会失败
// this.list[0] = '王五'
// 这样更改ok的
Vue.set(this.list,0,'王五')
//如果你更改的是数数组的某一项
let obj1={name:'李四',age:30,sex:'男'}
Vue.set(this.personArr,0,obj1)
//如果你只是想添加一个key值的话;
obj2['xueli']='大专';
Vue.set(this.personArr,0,obj2)
}
}
}
</script>
相关文章
- vue中const
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- Vue创建一个路由项目(Vue Router)
- vue 响应式的数据原理
- Vue - 指令式按钮节流(Button)
- vue组件使用驼峰命名问题(导致没有找到组件)
- 基于vue单页应用的例子
- 手写一个简易vue响应式带你了解响应式原理
- Vue工程化之引入element-ui框架后图标失效
- 面试官:说说Vue响应式原理
- vue源码中的一些工具方法
- 浅析有react fiber为什么不需要vue fiber:理解Fiber是什么及react和vue各自响应式原理
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- vue实现数据驱动视图原理
- vue学习:使用v-for向select组件绑定数据
- vue for 循环例子 2
- Vue路由传递query参数的两种方式