Vue中watch的簡單應用

Vue.js 有一個方法 watch，它能夠用來監測Vue實例上的數據變更。

若是對應一個對象，鍵是觀察表達式，值是對應回調，值也能夠是方法名，或者是對象，包含選項。

 

下面寫兩個demo，參考demo來了解一下

demo1

<template>
  <div>
    <el-input v-model="demo"></el-input> {{value}} </div>
</template>
<script> export default { name: 'index', data() { return { demo: '', value: '' }; }, watch: { demo(val) { this.value = this.demo; } } }; </script>

上面這個就淺顯易懂了，經過watch來直接監測demo，若是demo的值變化，value的值也會跟着一塊兒變化。

 

demo2

 

<template>
  <div>
    <el-input v-model="demo.name"></el-input> {{value}} </div>
</template>
<script> export default { name: 'index',  data() { return { demo: { name: '' }, value: '' }; }, computed: { newName() { return this.demo.name; } }, watch: { newName(val) { this.value = val; } } }; </script>

 

上面這個例子，若是watch監測的是一個對象的話，直接使用watch是不行的，此時咱們能夠藉助於computed計算屬性來完成。

 

demo3

 

<div id="app">
  <input type="text" v-model="childrens.name" />
  <input type="text" v-model="lastName" />
</div>

<script type="text/javascript">
  var vm = new Vue( { el: '#app', data: { childrens: { name: '小強', age: 20, sex: '男' }, tdArray:["1","2"], lastName:"張三" }, watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//對象內部的屬性監聽，也叫深度監聽
 }, 'childrens.name':function(val,oldval){ console.log(val+"aaa") },//鍵路徑必須加上引號
 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model綁定數據時使用的數據變化監測
 } ); vm.$watch("lastName",function(val,oldval){ console.log(val) })//主動調用$watch方法來進行數據監測
</script>
</body>

 

數組的變化，不須要深度watch。

 

嗯，就醬~