思路1：就是让利用v-if的重新渲染机制

1.首先考虑的就是手动刷了，给组件加个v-if=”someShow“;

2.在父组件添加如下方法;

//  这是组件上写法 ：<my-component v-if="someShow"></my-component>

// 下边写在父组件的methods里
refesh:function(){
	this.someShow=false;
	var _this=this;
	this.$nextTick(function(){
		_this.someShow = true;
	})
  
}
// $nextTick
// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM  这样重新渲染就会是最新数据了

这样就完美解决了不更新的问题。、

思路2：利用watch监听

在子组件中监听你要的数据，当然别监听对象，监听了不一定好使。亲测不好使，测过好使的，可以给我留言。

    data:function(){
		return {
			title:"",
			content:"",
			btn:""
		}
	},   
     methods:{
		changeTitle:function(){
			this.title=this.listTitle;
            // 这里的每次变化了就复制给组件上的变量，视图也就更改了			
		},
		changeList:function(){
			this.content=this.listList;
		},
		changeBtn:function(){
			this.btn=this.listBtn;

		}
	},
	watch:{
		listTitle:"changeTitle",
		listList:"changeList",
		listBtn:"changeBtn"
		// 冒号前边这个就是从父组件传过来的，后边的就是变化了的监听函数
	}

在vue中，改变某个对象的值时（如数组中的某一项或者对象的某个属性），vue并不会触发dom更新，这时就需要我们自己手动来操作。

方法一：强制刷新

// 此行为会重新渲染整个dom，除数据层次太多外，不建议使用
this.$forceUpdate();

 方法二：对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。如：

data() {
    // 数组
    array: [1, 2, 3, 4];
    // 对象
    obj: {name: "test"},
}
......

// 这种方式赋值并不会触发dom并自动更新
// this.array[0] = 5;

// 改为此种方式赋值则会触发更新,
// 参数1：要修改的数组，    参数2：要修改的数组的索引，    参数3：修改后的值
this.$set(this.array, 0, 5);




// this.obj.name = "张三";

// 参数1：要修改的对象，    参数2：要修改的对象的属性名，    参数3：修改后的值
this.$set(this.obj, "name", "张三");

以下是出现这种情况的原因：

出现这种情况的原因是由于vue2.x的基本原理决定的。vue的基本原理是通过Object.defineProperty重写变量的get和set方法来实现监听变量的改变和通知页面重新渲染的。

这里就要了解一下Object.defineProperty，以下直接拷贝的官网文档。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)

obj: 要定义属性的对象。

prop: 要定义或修改的属性的名称或 Symbol 。

descriptor: 要定义或修改的属性描述符。

假如你在vue中定义了一个对象：objTest: {name: "test"},

vue在created之前会重写objTest对象中name的get和set:

// 先把原来的obj深拷贝一份
var objCopy = JSON.parse(JSON.stringfy(this.obj));
var newObjTest = Object.defineProperty(objTest, 'name', {
        get: function () {
            // 返回objCopy的name，如果返回obj.name会死循环
            return objCopy.name;
        },
        set: function (newValue) {
            // 把objCopy的name属性重新赋值
            objCopy.name = newValue;
            // 去通知页面obj的name的值变了，该渲染页面了
            ......
        }
    })

从上面的例子可以看出，当我们给obj.name属性赋值的时候，会走我们重新定义的set方法，并让页面重新渲染，但是为什么有时候却不行呢？这就是Object.defineProperty的不足之处了，因为在vue中它只会遍历已有的对象及其属性，未定义的属性vue是不会重写get和set的方法的。

所以如果你在data中没有定义某个对象属性，而在后续的操作中添加了新的属性时，页面是不会重新渲染的。

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

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 ，需要用vue内置的方法

二、Vue.set() 响应式新增与修改数据
此时我们需要知道Vue.set()需要哪些参数，官方API：https://cn.vuejs.org/v2/api/#Vue-set

调用方法：Vue.set( target, key, value )  或者  this.$set(target, key, value);

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值，

调用：this.$set(target, key, value);

欢迎关注我的个人技术公众号！javascript艺术