vue -$set
在我们使用 vue 进行开发的过程中, 可能会遇到一种情况: 当生成 vue 实例后, 当再次给数据赋值时, 有时候并不会自动更新到视图上去;
当我们去看 vue 文档的时候, 会发现有这么一句话: 如果在实例创建之后添加新的属性到实例上, 它不会触发视图更新.
如下代码, 给 student 对象新增 age 属性
- data () {
- return {
- student: {
- name: '',
- sex: ''
- }// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- }// 面向 1-3 年前端人员
- }// 帮助突破技术瓶颈, 提升思维能力
- mounted () { // -- 钩子函数, 实例挂载之后
- this.student.age = 24
- }
受 ES5 的限制, vue.js 不能检测到对象属性的添加或删除. 因为 Vue.JS 在初始化实例时将属性转为 getter/setter, 所以属性必须在 data 对象上才能让 Vue.JS 转换它, 才能让它是响应的.
要处理这种情况, 我们可以使用 $set() 方法, 既可以新增属性, 又可以触发视图更新.
错误写法: this.$set(key,value)(ps: 可能是 vue1.0 的写法)
- mounted () {
- this.$set(this.student.age, 24)
- }
正确写法: this.$set(this.data,"key",value')
- mounted () {
- this.$set(this.student,"age", 24)
- }
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/9e872bc0dc37b260e02738e99ed234ec.html