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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.runoob.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在控制台打印出来会发现：

在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中的$set的使用的更多相关文章

  1. 浅谈Vue中计算属性（computed）和方法（methods）的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  2. 浅谈Vue中Slot以及slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...

  3. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  4. 浅谈Vue中的Prop

    Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...

  5. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  6. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  7. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  8. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  9. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

随机推荐

  1. ubuntu14.04首次安装.md

    ubuntu14.04 安装后的工作 1.换软件源 sudo cp /etc/apt/sources.list /etc/apt/sources.list_backup 网易163更新服务器(广东广州 ...

  2. 神经网络中的反向传播法--bp【转载】

    from: 作者:Charlotte77 出处:http://www.cnblogs.com/charlotte77/ 一文弄懂神经网络中的反向传播法——BackPropagation 最近在看深度学 ...

  3. [转]0day零距离

    前言: 想起这个话题,还要从早年网上的一则新闻说起--"美国联邦官员于2001年12月11日宣布,已破获一起以因特网为犯罪手段的特大软件盗版案--盗版软件的总价值至少高达10亿美元.据悉,该 ...

  4. 长沙理工大学第十二届ACM大赛L 选择困难症 （剪枝暴搜）

    链接:https://ac.nowcoder.com/acm/contest/1/L 来源:牛客网 选择困难症 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 131072K,其他语言 ...

  5. 使用glew和glad 新建窗口

    一.添加头文件 首先,将头文件加到项目的.cpp文件中 #include <glad/glad.h> 2 #include <GLFW/glfw3.h> 注: 包含glad的头 ...

  6. python json、pickle

    文章部分转自:https://www.cnblogs.com/lincappu/p/8296078.html json:用于字符串和Python数据类型间进行转换pickle: 用于python特有的 ...

  7. break、continue、return的使用

    跳转控制语句: java中的goto是保留字,目前不能使用,虽然没有了goto语句可以增强程序的安全性,但是也带来很多不便. 比如说:我们想让某个循环到某一步的时候就结束,现在就做不了这个事情了.为了 ...

  8. POJ 2104 K-th Number ( 求取区间 K 大值 || 主席树 || 离线线段树)

    题意 : 给出一个含有 N 个数的序列,然后有 M 次问询,每次问询包含 ( L, R, K ) 要求你给出 L 到 R 这个区间的第 K 大是几 分析 : 求取区间 K 大值是个经典的问题,可以使用 ...

  9. [HG]AK 题解

    前言 什么鬼畜玩意,扶我起来,我要用__int128,这辈子都不珂能用龟速乘的... 真香. 题解 我们知道这个模数是个神奇的东西 \(2305843008676823040 = 2^{29} \ti ...

  10. RedisTemplate访问Redis数据结构（三）——Hash

    HashOperations提供一系列方法操作hash.首先初始化spring工厂获得redisTemplate和opsForHash private RedisTemplate<String, ...