快捷導(dǎo)航

詳解Vue.js 響應(yīng)接口

更新時間：2020年07月04日 15:37:48 作者：菜鳥教程

這篇文章主要介紹了Vue.js 響應(yīng)接口的相關(guān)資料，文中實例代碼非常詳細，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

Vue 可以添加數(shù)據(jù)動態(tài)響應(yīng)接口。

例如以下實例，我們通過使用 $watch 屬性來實現(xiàn)數(shù)據(jù)的監(jiān)聽，$watch 必須添加在 Vue 實例之外才能實現(xiàn)正確的響應(yīng)。

實例中通過點擊按鈕計數(shù)器會加 1。setTimeout 設(shè)置 10 秒后計算器的值加上 20 。

<div id = "app">
  <p style = "font-size:25px;">計數(shù)器: {{ counter }}</p>
  <button @click = "counter++" style = "font-size:25px;">點我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    counter: 1
  }
});
vm.$watch('counter', function(nval, oval) {
  alert('計數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!');
});
setTimeout(
  function(){
    vm.counter += 20;
  },10000
);
</script>

效果如下：

Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性。

Vue 不能檢測到對象屬性的添加或刪除，最好的方式就是在初始化實例前聲明根級響應(yīng)式屬性，哪怕只是一個空值。

如果我們需要在運行過程中實現(xiàn)屬性的添加或刪除，則可以使用全局 Vue，Vue.set 和 Vue.delete 方法。

Vue.set

Vue.set 方法用于設(shè)置對象的屬性，它可以解決 Vue 無法檢測添加屬性的限制，語法格式如下：

Vue.set( target, key, value )

參數(shù)說明：

target: 可以是對象或數(shù)組
key : 可以是字符串或數(shù)字
value: 可以是任何類型

<div id = "app">
  <p style = "font-size:25px;">計數(shù)器: {{ products.id }}</p>
  <button @click = "products.id++" style = "font-size:25px;">點我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
  el: '#app',
  data: {
   products: myproduct
  }
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
  alert('計數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!');
});
</script>

在以上實例中，使用以下代碼在開始時創(chuàng)建了一個變量 myproduct：

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

該變量在賦值給了 Vue 實例的 data 對象：

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

如果我們想給 myproduct 數(shù)組添加一個或多個屬性，我們可以在 Vue 實例創(chuàng)建后使用以下代碼：

vm.products.qty = "1";

查看控制臺輸出：

如上圖看到的，在產(chǎn)品中添加了數(shù)量屬性 qty，但是 get/set 方法只可用于 id，name 和 price 屬性，卻不能在 qty 屬性中使用。

我們不能通過添加 Vue 對象來實現(xiàn)響應(yīng)。 Vue 主要在開始時創(chuàng)建所有屬性。如果我們要實現(xiàn)這個功能，可以通過 Vue.set 來實現(xiàn)：

<div id = "app">
<p style = "font-size:25px;">計數(shù)器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">點我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
  el: '#app',
  data: {
   products: myproduct
  }
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
  alert('計數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!');
});
</script>

從控制臺輸出的結(jié)果可以看出 get/set 方法可用于qty 屬性。

Vue.delete

Vue.delete 用于刪除動態(tài)添加的屬性語法格式：

Vue.delete( target, key )

參數(shù)說明：

target: 可以是對象或數(shù)組
key : 可以是字符串或數(shù)字

<div id = "app">
  <p style = "font-size:25px;">計數(shù)器: {{ products.id }}</p>
  <button @click = "products.id++" style = "font-size:25px;">點我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
  el: '#app',
  data: {
   products: myproduct
  }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
  alert('計數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!');
});
</script>

以上實例中我們使用 Vue.delete 來刪除 price 屬性。以下是控制臺輸出結(jié)果：