vue如何修改data中的obj数据的属性

目录
  • 修改data中的obj数据的属性
  • 修改data以实现数据响应式
    • 怎么保证你的变化我Vue能监听到？
    • 如果初始值没给这个变量Vue还能监听吗？

修改data中的obj数据的属性

//方法一
var obj = this.obj;
obj.name = 'long';
this.obj = obj;
//方法二
Vue.set(this.obj, "password", "num");
//part1,要修改的obj对象;
//part2,要添加或者修改的属性;
//part3,修改值；

修改data以实现数据响应式

Vue为了实现在数据变化时对页面重新渲染。所以在初始化时对传进来来的数据对象进行监听。

怎么保证你的变化我Vue能监听到？

监听的操作就是：对数据对象的每一个数据，内部内部声明一个变量，存储这个传进来的初始值，然后开始了代理模式。后续对这个数据的读取和修改，实际都是对这个内部变量的getter和setter。由此所有的修改都会经过setter，那么只需要setter的时候触发监听函数，渲染页面即可。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

那么返回给外部的，实际是一个经过篡改的，经过了代理的数据对象。

如果初始值没给这个变量Vue还能监听吗？

这里面有个新手易犯的问题是：一开始传进数据对象时忘记传这个变量或无法传这个变量。

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

如果后面使用了这个变量，那么后面对这个变量进行更新时页面不会变化的，因为vue根本没监听这个对象。

解决办法：

（1）一开始就传入这个变量；

（2）对于对象：使用Vue.set或vm.$ set在使用之前监听变量；

（3）对于数组，除了使用对象的Vue.set或和vm.$set 方法。尤雨溪其实对数组的如下方法进行了封装，使用这些方法的时候已经进行了set监听。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

有一个神奇的测试题：

<div id="app">
    <span class=span-a>
      {{obj.a}} 
    </span>
    <span class=span-b>
      {{obj.b}}
    </span>
  </div>
var app = new Vue({
  el: '#app',
  data: {
    obj: {
      a: 'a',
    }
  },
})
app.obj.a = 'a2'
app.obj.b = 'b'

最终 span-a 和 span-b 中分别展示什么字符串？答案是：a2和b

原因是视图在显示 span-a 的 a2 时，顺便更新了 span-b

视图更新其实是异步的。

1、当我们让 a 从 ‘a1’ 变成 ‘a2’ 时，Vue 会监听到这个变化，但是 Vue 并不能马上更新视图，因为 Vue 是使用 Object.defineProperty 这样的方式来监听变化的，监听到变化后会创建一个视图更新任务到任务队列里。（文档有写）

2、所以在视图更新之前，要先把余下的代码运行完才行，也就是会运行 b = ‘b’。

3、等到视图更新的时候，由于 Vue 会去做 diff（文档有写），于是 Vue 就会发现 a 和 b 都变了，自然会去更新 span-a 和 span-b。

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

赞 (0)

相关推荐

  • vue中向data添加新属性的三种方式小结

    vue中向data添加新属性的三种方式小结

    目录 向data添加新属性的三种方式 原理分析 三种方式 vue组件 data等属性介绍 向data添加新属性的三种方式 原理分析 首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式:     const obj = {};         let val = 'kk'         Object.defineProperty(obj,'na

  • Vue.js数据绑定之data属性

    Vue.js数据绑定之data属性

    Vue.js是JavaScript的一个MVVM库,M是指模型数据,V是指视图容器,VM是指视图模型,模型数据通过视图模型监听视图容器的变化,而视图容器通过视图模型获取模型数据的变化进行渲染,实现了数据的双向绑定. data属性 data属性是Vue实例的数据对象,可以绑定的是对象或者是函数. 当数据对象一旦被data绑定就会发生变化,数据对象中的属性会拥有get和set属性,用来监听数据变化,实时响应. Vue实例会代理data绑定对象上的所有属性,即所有属性直接添加到Vue实例化对象中. V

  • vue 修改 data 数据问题并实时显示操作

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 补充知识:vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测 的机制又很明确的说明: 变异方法:Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新. 这些方法如下: push() pop() shift() unshift() splice() sort() rever

  • vue如何修改data中的obj数据的属性

    目录 修改data中的obj数据的属性 修改data以实现数据响应式 怎么保证你的变化我Vue能监听到? 如果初始值没给这个变量Vue还能监听吗? 修改data中的obj数据的属性 //方法一 var obj = this.obj; obj.name = 'long'; this.obj = obj; //方法二 Vue.set(this.obj, "password", "num"); //part1,要修改的obj对象; //part2,要添加或者修改的属性;

  • vue如何修改data中数据问题

    vue如何修改data中数据问题

    目录 vue修改data中数据 vue中修改简单类型数据 vue中修改数组的方法 vue中修改对象的方法 关于删除 vue修改数据不生效,页面不刷新 vue中数据类型 vue数据侦听简易理解 数据更新后,页面不刷新的可能原因 vue修改data中数据 vue的data中保存一些数据,用于页面的渲染.有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新. 注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改.强

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

  • vue在table表中悬浮显示数据及右键菜单

    vue在table表中悬浮显示数据及右键菜单

    本文实例为大家分享了vue在table表中悬浮显示数据及右键菜单的具体代码,供大家参考,具体内容如下 悬浮显示 这个文档里是存在的,但很容易被忽略,先看看效果图 鼠标放在哪行,就会弹出相对应的描述. 直接看代码 //列名及属性名 <el-table-column prop="member"  label="构件名称"> //从json数据调取     <template slot-scope="scope">     //

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • 如何使用jquery修改css中带有!important的样式属性

    <div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px");和 $("div.test").css("width&

  • vue如何在data中引入图片的正确路径

    目录 在data中引入图片正确路径 1.通过import引入路径才行 2.通过require更方便 3.在ui上直接动态也要通过require vue引入图片路径问题 方法一 方法二 在data中引入图片正确路径 今天踩的坑给分享出来. 本来想要在横版遍历图片出来在vue中自己做轮播,结果发现在data中直接引入路径是渲染不出来的. 原因是webpack打包无法解析 1.通过import引入路径才行 如果直接在模板上通过src="../../assets/images/top5.png"

  • vue实现修改标签中的内容:id class style

    vue实现修改标签中的内容:id class style

    目录 vue修改标签的内容:id class style v-bind,v-model注意 动态改变class和style的一些方法 使用$event 下面的函数处理 vue修改标签的内容:id class style v-bind,v-model注意 v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值=“表达式” v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id v

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

  • Vue中避免滥用this去读取data中数据

    前言 在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据.但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本专栏将会一一揭晓. 一.用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成响应式的.getter函数代码如下所示: function reactiveGetter() { var value = getter ?

随机推荐