Vue中Vue.set()和this.$forceUpdate()的使用

1.給對象添加一個key值 成功的

<template>
    <div>
        <p>{{userInfo.name}}</p>
        <p>{{userInfo.sex ?  userInfo.sex : ''}}</p>
        <button @click="updateName">修改userInfo</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                userInfo:{name:'小明'}
            }
        },
        methods:{
            updateName(){
                this.userInfo.name='小紅';
                this.userInfo['sex']='男';//ok
            }
        }
    }
</script>

2.給對象添加一個key值 失敗的

<template>
    <div>
        <p>{{userInfo.name}}</p>
        <p>{{userInfo.sex ?  userInfo.sex : ''}}</p>
        <button @click="updateName">修改userInfo</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                userInfo:{name:'小明'}
            }
        },
        methods:{
            updateName(){
                this.userInfo['sex']='男';//失敗的
            }
        } 
    }
</script>

3.好奇怪,為啥一個成功一個失敗？

在什么情況下，直接給對象添加一個key值會失敗？？？？？
是在你直接給原來的對象上新增一個key值而且沒有修改原來對象上的值如下
this.userInfo['sex']='男';
這樣的修改肯定會失敗的哈

你新增key值的時候；並且改變了原來已經有的key的內容；這樣你新增的key值就可以更改成功
this.userInfo.name=this.userInfo.name+"213";
this.userInfo['sex']='男';//ok

為啥會這樣是因為：
因為受現代JS的限制，vue不能檢測到對象屬性的添加或刪除。(重要！！！)
vue不允許在已經創建的實例上動態添加新的根級響應式屬性，（注意！！！）
不過可以使用Vue.set()方法將響應式屬性添加到嵌套的對象上。

3.給對象添加key值的兩種方式

<template>
    <div>
        <p>{{userInfo.name}}</p>
        <p>{{userInfo.sex ?  userInfo.sex : ''}}</p>
        <button @click="updateName">修改userInfo</button>
    </div>
</template>
<script>
import Vue from "vue" //Vue.set()的時候需要使用
    export default {
        data(){
            return{
                userInfo:{name:'小明'}
            }
        },
        methods:{
            updateName(){
                // this.userInfo['sex']='男'; //失敗的

                // 解決方法一：注意要引入Vue
                // Vue.set(this.userInfo, 'sex' ,'男')

                //解決辦法二;不推薦因為消耗性能
                 this.userInfo['sex']='男';
                 this.$forceUpdate()
            }
        }
       
    }
</script>

4.forceUpdate的講解

this.$forceUpdate()
它可以迫使Vue的實例重新渲染；
注意它僅僅影響實例本身以及插入插槽內的子組件；並不是所有的子組件