vue的this.$set的作用

用于手动让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')}
}

作者：Aleph_Zheng
链接：https://www.jianshu.com/p/e58f099c9133
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue的this.$set的作用相关推荐

vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
active-class属于Vue哪一个modules,有什么作用
active-class属于Vue哪一个modules,有什么作用 active-class 属于vue-router的样式方法当routerlink标签被点击时将会应用这个样式使用有两种方法 rou ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
vue中的key的作用？
一.写在前面下面总结一下,vue中的key的作用,在vue中我们可能在两种情况下使用key,第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key.下面我们来看一下key在其中起到的 ...
Vue：生命周期函数的作用
Vue:生命周期函数的作用前言 Vue实例有一个完整的生命周期,也就是说从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某 ...
vue项目中flag的作用
vue项目中flag的作用一.项目背景 1.大数据接口请求优化(5S请求一次) 2.点击页码请求flag来判断一.项目背景短信发送列表页面,由三部分组成,搜索条件,列表,页码.因为当前列表是大数 ...
vue 2.0 :key的作用
<div v-for="item in items" :key="item.id">  </div> ...
vue中：key的作用
key是为每个vnode指定唯一的id,在同级vnode的Diff过程中,可以根据key快速的进行对比,来判断是否为相同节点,利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快,指 ...
Vue中的 key 的作用是什么？
这个问题,其实也是经常问的,对于刚刚毕业的大学生来说, 面试官问:vue中循环遍历数组的时候,为什么要加 key/key的作用是什么? 看一下官网的回答 key属性主要在 vue 的虚拟 DOM算法, ...
vue中render函数的作用及解析
在vue脚手架的main.js文件中,存在这样一段代码: 意思是对vue实例的配置,其中render函数的作用是,将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeM ...

vue的this.$set的作用

vue的this.$set的作用相关推荐

最新文章

热门文章