深入理解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+xml自动生成表格的东西
Dec 21 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
javascript常用函数(2)
Nov 05 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
营业经理岗位职责
2013/11/10 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
物控部经理职务说明书
2014/02/25 职场文书
婚前保证书范文
2015/02/28 职场文书
资料员岗位职责范本
2015/04/13 职场文书
利用python做表格数据处理
2021/04/13 Python
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Go 语言中 20 个占位符的整理
2021/10/16 Golang
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js