vue强制刷新页面组件方法之key属性、$forceupdate、转化数据类型

一、前言

vue框架数据双向绑定，数据更新页面会自动更新，但某些情况下，我们还需要自己手动更新页面组件。

二、常见页面刷新不及时问题：

下拉选择框需要赋默认值进入页面没回显、下拉选择框已带入默认值下拉选择后未及时回显、弹出框在填写完毕后隐藏再次点击打开的时候内容确还是原来的，或者某些数据明明改变了，但是确没有刷新视图，此时需要强制触发组件的刷新以便于让整个组件的生命周期得以重新执行。

三、方法：

1、key属性：

a、通过key属性来进行刷新操作，在web中的效果是最理想的，因为页面根本感觉不到组件的销毁与创建过程，但是确实满足了组件的刷新功能。
b、操作方式：在data中定义某个变量，然后将该变量放置在组件的key属性中，要实现该组件刷新时，只需改变变量的值即可。
c、key属性在vue中见的最多的地方就是在v-for循环的时候必须加上key=xx这个唯一的标志。而这就是体现了key这个属性功能的一种比较常见的场景。
d、key的作用通俗来讲就是给这个子组件或者元素标签加上一个记号，方便vue根据记号对子组件或者元素标签做排查。一旦某个加上记号的子组件或者元素标签其上的记号进行了改变，vue就会对其做出一些刷新相关的操作。

2、this.$ forceupdate()：

a、$forceupdate()仅针对当前组件以及其插槽相关子组件。作用：例如当data中的某个内容进行了改变，但是页面没有进行实时的刷新，而我又通过打印能确定数据确实改变了，因此可以使用$ forceupdate()来迫使当前组件刷新。
b、迫使vue组件重新渲染，实际上指的是强制重启render函数。即调用该方法后 只会触发beforeUpdate、updated 这两个生命周期，而且只会影响当前组件以及其插槽内容

3、JSON.parse(JSON.stringify()):

a、JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)，解析前要保证数据是标准的JSON格式，否则会解析出错\

const user = '{"name": "Jack","gender": "男","age": 18,"major":"computer"}'
console.log(JSON.parse(user));
//user = { name:"Jack", gender:"男", age:18, major:"computer"}

b、JSON.stringify()方法用于将JavaScript对象转换为JSON字符串，也就是从一个对象中解析出来字符串。
c、JSON.parse(JSON.stringify( [数组源] ))刷新数组源