vue中 this.$set的使用详解


Posted in Vue.js onNovember 17, 2021

vue中 this.$set的使用

背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面上了。但是由于我自己的需求,想往返回的对象里面添加一个字段,于是我用push一个字段进去,添加是添加进去了,但是页面渲染却没有变化。后来才意识到不是响应式的。如果我们要让这个新字段是响应式的,就要使用到this.$set来注入数据

当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

使用

this.$set( target, key, value)

target:表示数据源,即是你要操作的数组或者对象

key:要操作的的字段

value:更改的数据

来个小案例:

给一个对象添加一个年龄属性并且让它可以响应式的进行改变

vue中 this.$set的使用详解

<template>
  <div class="text">
      <p>{{list}}</p>
      <button @click="add">age++</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            list:{ name: "张三"}
        }
    },
    methods: {
        add(){
            if(!this.list.age){ // 如果没有age属性就给它添加一个age属性
                this.list.age=18
            }else{
                this.list.age++
            }
            console.log(this.list)
        }
    }
}
</script>

当我们没有使用this.$set去添加对象属性的时候,效果:

数据确实已经添加进去了,但是页面并没有响应式的渲染age属性。

vue中 this.$set的使用详解

当我们使用this.$set(this.list,‘age',18)去添加一个属性之后。效果:

vue中 this.$set的使用详解

我们能看见添加的数据是响应式的。

为什么能够响应式?

仔细观察一下,使用了this.$set 多了get age和set age方法,这正是能够响应式的原因

vue中 this.$set的使用详解

分析

Vue的响应式原理为 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同,下图来自官方文档。

vue中 this.$set的使用详解

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
如何用vue实现网页截图你知道吗
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
详细聊聊vue中组件的props属性
一定要知道的 25 个 Vue 技巧
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
SSM VUE Axios详解
vue使用Google Recaptcha验证的实现示例
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
PHP编译configure时常见错误的总结
2017/08/17 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript window.location对象
2014/11/14 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
大三学生英语考试作弊检讨书
2015/01/01 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
python游戏开发之pygame实现接球小游戏
2022/04/22 Python