VueJS - 響應式介面

上一頁
下一頁

VueJS 提供了向動態新增的屬性新增響應性的選項。假設我們已經建立了 Vue 例項，並且需要新增 watch 屬性。可以按如下方式操作：

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

在 data 物件中定義了一個名為 counter 的屬性，其值為 1。單擊按鈕時，計數器會遞增。

Vue 例項已建立。要向其新增 watch，需要執行以下操作：

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

我們需要使用 `$watch` 在 Vue 例項外部新增 watch。添加了一個警報，顯示計數器屬性的值變化。還添加了一個計時器函式，即 `setTimeout`，它將計數器值設定為 20。

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

每當計數器發生更改時，watch 方法中的警報都會觸發，如下面的螢幕截圖所示。

Counter

VueJS 無法檢測屬性的新增和刪除。最好的方法是在 Vue 例項中預先宣告所有需要響應性的屬性。如果需要在執行時新增屬性，可以使用 Vue 全域性方法 `Vue.set` 和 `Vue.delete`。

Vue.set

此方法用於在物件上設定屬性。它用於解決 Vue 無法檢測屬性新增的限制。

語法

Vue.set( target, key, value )

其中：

target：可以是物件或陣列

key：可以是字串或數字

value：可以是任何型別

讓我們來看一個例子。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

在上面的例子中，使用以下程式碼段在開始時建立了一個名為 myproduct 的變數。

var myproduct = {"id":1, name:"book", "price":"20.00"};

它在 Vue 例項中作為 data 物件的一部分：

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

假設我們想要在建立 Vue 例項後向 myproduct 陣列新增另一個屬性。可以按如下方式操作：

vm.products.qty = "1";

讓我們看看控制檯中的輸出。

MyProduct Array

如上所示，在 products 中添加了數量。基本新增響應性的 get/set 方法適用於 id、name 和 price，而不適用於 qty。

我們不能僅僅透過新增 Vue 物件來實現響應性。VueJS 主要希望所有屬性都在開始時建立。但是，如果需要稍後新增，可以使用 `Vue.set`。為此，我們需要使用 Vue 全域性方法 `Vue.set`。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

我們使用 `Vue.set` 使用以下程式碼段將 qty 新增到陣列中：

Vue.set(myproduct, 'qty', 1);

我們在控制檯中輸出了 Vue 物件，以下是輸出結果：

Products

現在，我們可以看到使用 `Vue.set` 新增的 qty 的 get/set 方法。

Vue.delete

此函式用於動態刪除屬性。

示例

Vue.delete( target, key )

其中：

target：可以是物件或陣列

key：可以是字串或數字

要刪除任何屬性，可以使用 `Vue.delete`，如下面的程式碼所示。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

在上面的例子中，我們使用 `Vue.delete` 使用以下程式碼段從陣列中刪除 price：

Vue.delete(myproduct, 'price');

以下是我們在控制檯中看到的輸出。

Delete

刪除後，我們只能看到 id 和 name，因為 price 已被刪除。我們還可以注意到 get/set 方法也被刪除了。

列印頁面
上一頁
下一頁
廣告