vue的this.$set的作用

作者: Aleph_Zheng | 来源:发表于2019-03-04 10:35 被阅读0次

用于手动让vue实现动态绑定数据

如果我们在创建实例以后，再在实例上绑定新属性，vue是无法进行双向绑定的。
比如：

var data = {
    name: "zeller",
    age: '20',
}   
var key = 'content';
var vm = new Vue({
    el:'#app',
    data: data
});
data.sex = 'male'；

sex属于data的一个新属性，而vue的原理是，在创建实例的时候，遍历data里的值，监听'getter'和'setter'方法，一旦这些值更新了，就去触发对应的视图更新。

而sex并不是vue实例化的时候拥有的属性，所以我们新增这个属性，vue并没有对他的setter和getter方法进行监听，因此无法实现双向绑定

此时如果使用this.$set的话，vue就会对它进行双向绑定了。

methods:{
    setSex: function(){
        this.$set('sex','male')
    }
}

vue的this.$set的作用
用于手动让vue实现动态绑定数据如果我们在创建实例以后，再在实例上绑定新属性，vue是无法进行双向绑定的。比如：...
vue中this.$set()的作用
在使用VUE中遇到要求实时更新视图数据，当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用th...
vue强制更新
使用update this.$forceUpdate()，强制视图更新用vue.set this.$set(th...
Vue.set和Vue数据监测
Vue.set this.$set(this.student,'添加的属性','添加的属性值') Vue数据监测 ...
深入理解Vue的数据响应式
【目录】一、Vue对data做了什么？二、数据响应式三、Vue.set和this.$set 【正文】在学习Vue的...
vue this.$set
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, pr...
vue.set/this.$set
vue项目中,几个表格分开展示,但是展示的内容都一样(不展示的内容有区别),为了省事儿,就给封装了个子组件,但是在...
Vue.set()实现数据动态响应
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。在vue里面，我们操作...
Vue.set()实现数据动态响应！！！
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。在vue里面，我们操作...
VUE学习----this.$set()
语法： target: 要更改的数据源（可以是一个对象或者数组） propertyName/index: 要更改的...

网友评论

本文标题：vue的this.$set的作用

本文链接：https://www.haomeiwen.com/subject/cosbuqtx.html

vue的this.$set的作用