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)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3结构赋值失去响应式引发的问题思考

    vue3结构赋值失去响应式引发的问题思考

    目录 前言 原始值的响应式系统的实现 为什么ES6 解构,不能随意使用会破坏他的响应式特性 proxy背景 实现原理 解构 props 对象,因为它会失去响应式 直接赋值reactive响应式对象 vuex中组合API赋值 结语 前言 vue3发布以来经历两年风头正盛,现在大有和react 平分天下的势头,我们知道他是基于proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于proxy的特性,也提高了运行时的性能 凡事有利有弊, proxy虽然无敌,但是他也有本身的局限

  • 解决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数据更新视图不更新的几种解决 知识拓展 对象属性的添加或删除 异步更新队列 Object.assign方法 vue多层循环 Vue更改了数据但是视图却没有更新 Vue数据更新视图不更新的几种解决 知识拓展 在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的. Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上. 数组数据变动,使用某些方法操作数组,

  • Vue不能检测到数据变化的几种情况说明

    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和响应式的实现原理解析

    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无响应的问题及解决方法

    关于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中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =

  • 关于vue中使用three.js报错的解决方法

    关于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不能检测数组和对象的变

随机推荐