深入理解vue中的$set
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.jb51.net/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在控制台打印出来会发现：
在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?');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue中keep-alive组件的深入理解，包括了Vue中keep-alive组件的深入理解的使用技巧和注意事项，需要的朋友参考一下 前言 最近在写Vue项目的时候，遇到了一个问题，我从A路由使用parmas方式传参跳转到B路由，然后从B路由跳转到C路由，再从C路由返回B路由的时候，发现从A路由传到B路由的参数已经不存在了。 正文 我们都知道，vue组件进行路由跳转时，会销毁当前组件
-
本文向大家介绍深入理解vue中的slot与slot-scope，包括了深入理解vue中的slot与slot-scope的使用技巧和注意事项，需要的朋友参考一下 写在前面 vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，
-
本文向大家介绍深入理解vue Render函数，包括了深入理解vue Render函数的使用技巧和注意事项，需要的朋友参考一下 最近在学习vue，正好今日留个笔记，我自己还在摸索学习中，现整理出来以作记录。 会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶 首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例
-
本文向大家介绍深入理解Vue nextTick 机制，包括了深入理解Vue nextTick 机制的使用技巧和注意事项，需要的朋友参考一下 我们先来看一段Vue的执行代码： 这段脚本执行我们猜测1000m后会依次打印：1、2、3。但是实际效果中，只会输出一次：3。为什么会出现这样的情况？我们来一探究竟。 queueWatcher 我们定义 watch 监听 msg ，实际上会被Vue这样调用 vm
-
本文向大家介绍深入理解Vue 单向数据流的原理，包括了深入理解Vue 单向数据流的原理的使用技巧和注意事项，需要的朋友参考一下 单向数据流是什么 单向数据流指只能从一个方向来修改状态。下图是单向数据流的极简示意： 单向数据流的极简示意 与单向数据流对对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合） 中可以修改自己或其他Model的状态， 用户的操作（如在输入框
-
本文向大家介绍深入理解Vue transition源码分析，包括了深入理解Vue transition源码分析的使用技巧和注意事项，需要的朋友参考一下 这两天学习了Vue transition感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 本来打算自己造一个transition的轮子，所以决定先看看源码，理清思路。Vue的transition组件提供了一系列钩子函数，并且具有良好