深入理解vue中的$set


Posted in Javascript onJune 01, 2017

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。如下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.3water.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
 姓名:{{ name }}<br>
 年龄:{{age}}<br>
 性别:{{sex}}<br>
 说明:{{info.content}}
</div>
<!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) -->
<script>
var data = {
 name: "三水点靠木",
 age: '3',
 info: {
  content: 'my name is test'
 }
} 
var key = 'content';
var vm = new Vue({
 el:'#app',
 data: data,
 ready: function(){
  //Vue.set(data,'sex', '男')
  //this.$set('info.'+key, 'what is this?');
 }
});
data.sex = '男';
</script>
</body>
</html>

运行结果:

姓名:三水点靠木
年龄:3
性别:
说明:my name is test

为什么会这样呢?当去查对应文档时,你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter,如上示例,将data在控制台打印出来会发现:

深入理解vue中的$set

在age及name都有get和set方法,但是在sex里面并没有这两个方法,因此,设置了sex值后vue并不会自动更新视图;

解决方法:

<script>
var data = {
 name: "三水点靠木",
 age: '3',
 info: {
  content: 'my name is test'
 }
} 
var key = 'content';
new Vue({
 el:'#app',
 data: data,
 ready: function(){
  Vue.set(data,'sex', '男');
  this.$set('info.'+key, 'what is this?');
 }
});
</script>

1、通过Vue.set方法设置data属性,如上:

Vue.set(data,'sex', '男')

2、您还可以使用 vm.$set实例方法,这也是全局 Vue.set方法的别名:

var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set('info.'+key, 'what is this?');
//或
this.$set('info.content', 'what is this?');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
javascript屏蔽右键代码
May 15 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
Angular.JS中的this指向详解
May 17 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
Express框架之connect-flash详解
May 31 #Javascript
node.js中express-session配置项详解
May 31 #Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 #Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 #Javascript
JS简单实现自定义右键菜单实例
May 31 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
在smarty中调用php内置函数的方法
2013/02/07 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python实现自动发送邮件
2018/06/20 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
银行员工职业规划范文
2014/01/21 职场文书
个人简历中自我评价
2014/02/11 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL