首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Vue2.0 $set()的正确使用方式

Vue2.0 $set()的正确使用方式

作者头像
用户2323866
修改2021-06-23 18:05:36
修改2021-06-23 18:05:36
1.3K0
举报
文章被收录于专栏:技术派技术派

vue2.0 给data对象新增属性,并触发视图更新

如下代码,给 student对象新增 age 属性

代码语言:javascript
复制
data () {
    return {
        student: {
            name: '',
            sex: ''
        }
    }
}

众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新

代码语言:javascript
复制
mounted () {
    this.student.age = 24
}

原因是:受ES5的限制,Vue.js不能检测到对象属性的添加或删除。因为Vue.js在初始化实例时将属性转为getter/Fsetter,所以属性必须在data对象上才能让Vue.js转换它,才能让它是响应的。

要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

但是,值得注意的是,网上一些资料写的$set()用法存在一些问题

错误写法:

代码语言:javascript
复制
mounted () {
    this.$set(this.student.age, 24)
}

正确写法:

代码语言:javascript
复制
mounted () {
    this.$set(this.student,"age", 24)
}

再补充一下Vue的生命周期都干了些什么事

代码语言:javascript
复制
beforeCreate  数据还没有挂载,只是一个空壳,无法访问数据和dom,一般不做操作 
				//console.log(this.list)  //undefind
created   	  绑定事件,挂载数据 并且在这里更新data 不会触发update函数

beforeMount   将模板编译为虚拟dom,放到render中准备渲染 在这里更新data 不会触发update函数
mounted       渲染出真实dom 可操作真实dom

//如果组件中有更新,就会触发beforeUpdate
beforeUpdate  重新生成dom树 根据diff(本质是调用patch函数)算法,对比上一次dom树
updated       数据更新完成 render完成

beforeDestroy 一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等
destroyed     组件的数据绑定、监听...去掉后只剩下dom空壳

如上因为检测不到属性的变化,自然不会触发update函数,所以视图也没有更新

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 再补充一下Vue的生命周期都干了些什么事
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档