Vue.js 響應介面
Vue 可以新增資料動態響應介面。
例如以下例項，我們通過使用 $watch 屬性來實現資料的監聽，$watch 必須新增在 Vue 例項之外才能實現正確的響應。
例項中通過點選按鈕計數器會加 1。setTimeout 設定 10 秒後計算器的值加上 20 。
例項
<div id = "app">
<p style = "font-size:25px;">計數器: {{ 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('計數器值的變化 :' + oval + ' 變為 ' + nval + '!');
});
setTimeout(
function(){
vm.counter += 20;
},10000
);
</script>
嘗試一下 ?
Vue 不允許在已經建立的例項上動態新增新的根級響應式屬性。
Vue 不能檢測到物件屬性的新增或刪除，最好的方式就是在初始化例項前宣告根級響應式屬性，哪怕只是一個空值。
如果我們需要在執行過程中實現屬性的新增或刪除，則可以使用全域性 Vue，Vue.set 和 Vue.delete 方法。
Vue.set
Vue.set 方法用於設定物件的屬性，它可以解決 Vue 無法檢測新增屬性的限制，語法格式如下：
Vue.set( target, key, value )
引數說明：
-
target: 可以是物件或陣列
-
key : 可以是字串或數字
-
value: 可以是任何型別
例項
<div id = "app">
<p style = "font-size:25px;">計數器: {{ 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('計數器值的變化 :' + oval + ' 變為 ' + nval + '!');
});
</script>
嘗試一下 ?
在以上例項中，使用以下程式碼在開始時建立了一個變數 myproduct：
var myproduct = {"id":1, name:"book", "price":"20.00"};
該變數在賦值給了 Vue 例項的 data 物件：
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
如果我們想給 myproduct 陣列新增一個或多個屬性，我們可以在 Vue 例項建立後使用以下程式碼：
vm.products.qty = "1";
檢視控制檯輸出：
如上圖看到的，在產品中添加了數量屬性 qty，但是 get/set 方法只可用於 id，name 和 price 屬性，卻不能在 qty 屬性中使用。
我們不能通過新增 Vue 物件來實現響應。 Vue 主要在開始時建立所有屬性。 如果我們要實現這個功能，可以通過 Vue.set 來實現：
例項
<div id = "app">
<p style = "font-size:25px;">計數器: {{ 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('計數器值的變化 :' + oval + ' 變為 ' + nval + '!');
});
</script>
嘗試一下 ?
從控制檯輸出的結果可以看出 get/set 方法可用於qty 屬性。
Vue.delete
Vue.delete 用於刪除動態新增的屬性 語法格式：
Vue.delete( target, key )
引數說明：
-
target: 可以是物件或陣列
-
key : 可以是字串或數字
例項
<div id = "app">
<p style = "font-size:25px;">計數器: {{ 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('計數器值的變化 :' + oval + ' 變為 ' + nval + '!');
});
</script>
嘗試一下 ?
以上例項中我們使用 Vue.delete 來刪除 price 屬性。以下是控制檯輸出結果：
從上圖輸出結果中，我們可以看到 price 屬性已刪除，只剩下了 id 和 name 屬性，price 屬性的 get/set 方法也已刪除。