技術標籤：vue前端vuejshtml前端

vue官方文件中的深入響應式原理中有提到過，對於檢測變化的一些注意事項。

由於 JavaScript 的限制，Vue 不能檢測陣列和物件的變化。儘管如此我們還是有一些辦法來回避這些限制並保證它們的響應性。

這句話是啥意思呢？
我們先看一個小例子。

<div id="app">
    <h3>{{user.name}},{{user.age}}</h3>
    <button @click='handlerAdd'>新增屬性</button>
</div>
 

<script>
    new Vue({
        el:'#app',
        data:{
            user:{}
        },
        created () {
            this.user.name = 'Ray'
        },
        methods: {
            handlerAdd(){
                console.log('觸發點選事件');
                this.user.age = 20;            }
        }
 

    });
</script>

首先我們在data中寫了一個空的user物件，created鉤子函式中，我們在user物件中添加了一個name屬性，賦值為Ray。
然後我們寫了一個按鈕，重點的就是這個按鈕的操作，我們想在這個按鈕裡繼續新增一個age屬性，賦值為20。
按照正常的邏輯來說，這應該是沒問題的。
下面我們看看頁面的渲染情況。

在控制檯輸出了語句，說明我們觸發了點選事件，但是age的值並沒有被渲染到頁面上。

這是咋回事呢，這就是vue官方提示的注意事項。

由於 JavaScript 的限制，Vue 不能檢測陣列和物件的變化。儘管如此我們還是有一些辦法來回避這些限制並保證它們的響應性。

下面我們看一下如何解決這個問題？
vue提供了一個API，Vue.$set(object,key,value)，用於避免這種問題的發生。

<div id="app">
    <h3>{{user.name}},{{user.age}}</h3>
    <button @click='handlerAdd'>新增屬性</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{}
        },
        created () {
            this.user.name = 'Ray'
        },
        methods: {
            handlerAdd(){
                console.log('觸發點選事件');
                this.$set(this.user,'age',20);       }
        }
    });
</script>

我們使用vue提供的這個API之後，再看頁面的渲染結果。

果然，可以正常地顯示age屬性的內容。

但是上面這種API，Vue.$set(object,key,value)，一次只能新增一個屬性。如果我們想一下新增多組屬性呢？

vue也為我們提供了對策。

<div id="app">
    <h3>{{user.name}},{{user.age}}</h3>
    <button @click='handlerAdd'>新增屬性</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{}
        },
        created () {
            this.user.name = 'Ray'
        },
        methods: {
            handlerAdd(){
                console.log('觸發點選事件');
                 this.user = Object.assign({},this.user,{
                      age:20,
                      phone:18331092918
                 })   
            }
        }
    });
</script>

Object.assign({}, this.someObject, { key1: value1, key2: value2 })

下面我們看一下頁面的展示效果：

果然，非常的nice。

今天這個知識點還是比較重要的，無論是面試還是我們日常的開發，都可能會踩這個坑。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝！