vue中数据不响应的问题及解决
目录
- vue数据不响应问题
- vue数据响应不及时问题
vue数据不响应问题
将本来要新增的属性提前在data中定义好
我可以提前在userInfo里面定义好,这样就不是新增属性了,就像下面这样
data() { return { userInfo: { name: '子君', sex: '男', // 我先提前定义好 officialAccount: '' } } }
直接替换掉userInfo
虽然无法给userInfo里面添加新的属性,但是因为userInfo已经定义好了,所以我直接修改userInfo的值不就可以了么,所以也可以像下面这样写
this.userInfo = { // 将原来的userInfo 通过扩展运算法复制到新的对象里面 ...this.userInfo, // 添加新属性 officialAccount: '前端有的玩' }
使用Vue.set
其实上面两种方法都有点取巧的嫌疑,其实对于新增属性,Vue官方专门提供了一个新的方法Vue.set用来解决新增属性无法触发数据响应。
this.$set(this.userInfo,'officialAccount', '哈哈哈哈哈')
出现不响应的原因可能是,后期在data中为一个数组中某个变量增加属性…
解决的一种方法是,提前把这个属性在data中声明好,并赋初识默认值,就交给vue管理了
vue数据响应不及时问题
1.vue由于javascript的限制,对象属性的增加和删除,不能及时更新视图view
因为若一个对象的属性没有在data中声明,则他就不是响应式的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,这样的话这个对象属性就是响应式的。而执行这个过程必须在data中声明才会有。
var vm = new Vue({ data:{ a:1// vm.a 是响应的 } }) vm.b = 2;// vm.b 是非响应的
可以用set来解决这个问题
Vue.set(vm.someObject, 'b', 2); //或者 this.$set(this.someObject,'b',2);
2.由于 JavaScript 的限制, Vue 不能检测以下变动的数组
vm.items[indexOfItem] = newValue; 解决----> Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)
vm.items.length = newLength; 解决----> vm.items.splice(newLength)
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue3结构赋值失去响应式引发的问题思考
目录 前言 原始值的响应式系统的实现 为什么ES6 解构,不能随意使用会破坏他的响应式特性 proxy背景 实现原理 解构 props 对象,因为它会失去响应式 直接赋值reactive响应式对象 vuex中组合API赋值 结语 前言 vue3发布以来经历两年风头正盛,现在大有和react 平分天下的势头,我们知道他是基于proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于proxy的特性,也提高了运行时的性能 凡事有利有弊, proxy虽然无敌,但是他也有本身的局限
-
Vue数据更新视图不更新的几种解决方案小结
目录 Vue数据更新视图不更新的几种解决 知识拓展 对象属性的添加或删除 异步更新队列 Object.assign方法 vue多层循环 Vue更改了数据但是视图却没有更新 Vue数据更新视图不更新的几种解决 知识拓展 在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的. Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上. 数组数据变动,使用某些方法操作数组,
-
解决vue接口数据赋值给data没有反应的问题
问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re
-
Vue不能检测到数据变化的几种情况说明
目录 Vue不能检测到数据变化的情况 第一类:对于数组 第二类:对于对象 Vue检测数据的原理 总结一下 Vue不能检测到数据变化的情况 Vue 实现了数据的双向绑定,所以我们在更改数据时,页面就会实时的反映出修改的变化 但是由于javascript 的限制,有几种情况,vue是不能检测到数据变化的 第一类:对于数组 1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 当你修改数组的长度时,例如: vm.items.length =
-
vue中数据不响应的问题及解决
目录 vue数据不响应问题 vue数据响应不及时问题 vue数据不响应问题 将本来要新增的属性提前在data中定义好 我可以提前在userInfo里面定义好,这样就不是新增属性了,就像下面这样 data() { return { userInfo: { name: '子君', sex: '男', // 我先提前定义好 officialAccount: '' } } } 直接替换掉userI
-
vue中v-model和响应式的实现原理解析
目录 v-model 响应式实现 v-model 首先要了解v-model就是vue帮我们封装的语法糖,真正实现靠的还是: v-bind:绑定响应式数据 触发 input 事件 并传递数据 例如下面示例: <template> // 这两种写法等价 <input v-bind:name="name" v-on:input="name=$event.target.value"/> <input v-model="name&quo
-
vue中数据请求axios的封装和使用
目录 一.什么是axios 二.下载方式 三.拦截器 四.请求的封装 五.使用 一.什么是axios 简单的来说,Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,我们在项目中会经常用axios请求接口来获取数据. 二.下载方式 直接在当前使用的项目中打开终端: npm install axios --save 或者yarn add axios 三.拦截器 拦截器就是在数据请求的过程中,拦截请求或者拦截响应的技术 请求拦截器:就是在发送请求的时
-
vue中element组件样式修改无效的解决方法
如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st
-
Vue中android4.4不兼容问题的解决方法
1.npm安装 npm install babel-polyfill npm install es6-promise package.json中会出现 "babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1", 2.main.js引入 import 'babel-polyfill' import Vue from 'vue' import Es6Promise from 'es6
-
在vue中使用el-tab-pane v-show/v-if无效的解决
我就废话不多说了,大家还是直接看代码吧~ 解决方法如下: <template> <el-tabs v-model="settype" @tab-click="tabClick" ref="tabs"> <el-tab-pane label="广告位设置" name="bannerset">广告位设置</el-tab-pane> <el-tab-pane
-
关于Centos7中Vscode无响应的问题及解决方法
版本信息 虚拟机版本:VMware® Workstation 16 Pro 16.1.2 build-17966106 Linux系统:CentOS7 问题描述 在CentOS7中使用命令行直接安装Vscode时,打开Vscode出现界面卡死.无响应情况 问题原因 在安装Vscode时,系统默认安装和官网下载的Vscode版本,都是最新版本的Vscode,图为笔者安装时的最新版本:1.58,由于CentOS7与Vscode的新版本不兼容,导致Vscode无法使用. 解决方案 步骤一:卸载新版本的
-
浅谈vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =
-
关于vue中使用three.js报错的解决方法
目录 前言 1.vue的问题? 2.Proxy的异常情况 3.Three.js的问题 4.defineProperty异常情况 5.解决 总结 前言 最近在学习three.js,同时也学习一下vue3,然后就出现问题了,报错直接用不了,错误信息如下: Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the prox
-
vue更新数据却不渲染页面的解决
目录 vue更新数据却不渲染页面 1.Vue不能检测通过数组索引直接修改一个数组项 2.选择功能选中时赋值了,但没渲染页面 3.路由参数变化时 4.在异步更新执行之前操作DOM数据不会变化 5.获取后台返回的数组进行排序处理了,页面内容却不排序 vue页面的渲染过程 vue加载时文件的执行顺序 vue内部页面的执行顺序 vue中各选项及钩子函数执行顺序 vue更新数据却不渲染页面 1.Vue不能检测通过数组索引直接修改一个数组项 原因:由于JavaScript的限制,Vue不能检测数组和对象的变
随机推荐
- Ext.Net学习笔记之button小结
- RSS的语言编码大全
- Ubuntu配置Mysql主从数据库
- PowerDesigner中如何导入SQL Server数据库
- jQuery四种选择器使用及示例
- PHP防范SQL注入的具体方法详解(测试通过)
- Windows下JSP开发环境的配置
- windows环境下mysql的解压安装及备份和还原
- destoon官方标签大全
- nginx 解决首页跳转问题详解
- php文件上传类完整实例
- js实现的很酷的连接提示效果
- jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
- java获取Date时间的各种方式汇总
- Spring集成Quartz的简单配置的方法
- javascript管中窥豹 形参与实参浅析
- js格式化时间的方法
- 23种设计模式(9) java桥接模式
- eclipse创建python项目步骤详解
- Python开发之Nginx+uWSGI+virtualenv多项目部署教程