深入理解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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
js回到页面指定位置的三种方式
Dec 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
详解React 在服务端渲染的实现
2017/11/16 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
数学教学随笔感言
2014/02/17 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
村党支部书记承诺书
2014/05/29 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
2015年材料员工作总结
2015/04/30 职场文书
2015年党小组工作总结
2015/05/26 职场文书
大学校园招聘会感想
2015/08/10 职场文书