深入理解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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
js读取注册表的键值示例
Sep 25 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
详解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
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
Javascript模块模式分析
2008/05/16 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
如何解决安装python3.6.1失败
2020/07/01 Python
用Python进行websocket接口测试
2020/10/16 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
计算机毕业生求职信
2014/06/10 职场文书
郭明义电影观后感
2015/06/08 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript