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 相关文章推荐
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
我的论坛源代码(四)
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
JS动画效果代码3
2008/04/03 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
Django中间件实现拦截器的方法
2018/06/01 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
flask框架中的cookie和session使用
2021/01/31 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
安全施工标语
2014/06/07 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
门面房租房协议书
2014/12/01 职场文书
督导岗位职责
2015/02/04 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Python创建SQL数据库流程逐步讲解
2022/09/23 Python