Vue中$watch的監聽變化

時間 2019-11-10

標籤 vue watch 監聽變化简体版

原文原文鏈接

Vue提供了watch來監聽雙向綁定過程當中data的變化
可是平時的開發過程當中你可能會遇到watch並無被觸發
下面對數組、對象和字符串作了簡單的測試總結javascript

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js" charset="utf-8"></script>
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <button type="button" @click="reset">重置</button>
      <div>
        <h3>watch狀態改變</h3>
        <p>arrchange：{{watch.arr}}</p>
        <p>objchange：{{watch.obj}}</p>
        <p>objnamechange:{{watch.objname}}</p>
        <p>stringchange：{{watch.string}}</p>
        <p>numchange：{{watch.num}}</p>
      </div>

      <div>
        <h3>數據展現</h3>
        <p>arr:{{arr}}</p>
        <p>obj:{{obj}}</p>
        <p>string:{{string}}</p>
        <p>num:{{num}}</p>
      </div>

      <div>
        <h3>arr操做</h3>
        <button type="button" @click="changeArr(0)">改變arr[0]的name</button>
        <button type="button" @click="changeArr(1)">改變arr[0]的name($set)</button>
        <button type="button" @click="changeArr(2)">刪除arr[0]</button>
        <button type="button" @click="changeArr(3)">刪除arr[0].name</button>
        <button type="button" @click="changeArr(4)">刪除arr[0].name($delete)</button>
        <button type="button" @click="changeArr(5)">unshift一個對象到arr</button>
        <button type="button" @click="changeArr(6)">arr[0]從新賦值</button>
        <button type="button" @click="changeArr(7)">arr[0]從新賦值($set)</button>
        <button type="button" @click="changeArr(8)">arr從新賦值</button>
        <button type="button" @click="changeArr(9)">arr從新賦值($set)</button>
      </div>
      <div>
        <h3>object操做</h3>
        <button type="button" @click="changeObj(0)">修改obj的name字段</button>
        <button type="button" @click="changeObj(1)">修改obj的name字段($set)</button>
        <button type="button" @click="changeObj(2)">添加age屬性</button>
        <button type="button" @click="changeObj(3)">添加age屬性($set)</button>
        <button type="button" @click="changeObj(4)">刪除obj的name字段</button>
        <button type="button" @click="changeObj(5)">刪除obj的name字段($delete)</button>
        <button type="button" @click="changeObj(6)">對obj從新賦值</button>
      </div>
      <div>
        <h3>String操做</h3>
        <button type="button" @click="changeStr">修改str字段</button>
      </div>
      <div>
        <h3>Num操做</h3>
        <button type="button" @click="changeNum">修改num字段</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: {
        watch: {
          arr: 0,
          obj: 0,
          string: 0,
          num: 0,
          objname: 0
        },
        arr: [{
          name: '笨笨',
          address: '上海'
        }, {
          name: '笨笨熊',
          address: '北京'
        }],
        obj: {
          name: '呆呆',
          address: '蘇州'
        },
        string: "JavaScript",
        num: 0
      },
      watch: {
        arr: function() {
          this.watch.arr++
        },
        'obj.name': function() {
          this.watch.objname++
        },
        obj: function() {
          this.watch.obj++
        },
        string: function() {
          this.watch.string++
        },
        num: function() {
          this.watch.num++
        }
      },
      methods: {
        reset: function() {
          this.watch = {
            arr: 0,
            obj: 0,
            string: 0,
            num: 0
          };
          this.arr = [{
            name: '笨笨',
            address: '上海'
          }, {
            name: '笨笨熊',
            address: '北京'
          }];
          this.obj = {
            name: '呆呆',
            address: '蘇州'
          };
          this.string = "JavaScript";
          this.num = 0;
        },
        changeArr: function(type) {
          switch (type) {
            case 0:
              this.arr[0].name = "俄羅斯"
              break;
            case 1:
              this.$set(this.arr[0], 'name', '俄羅斯2')
              break;
            case 2:
              this.arr.splice(0, 1)
              break;
            case 3:
              delete this.arr[0].name
              console.log(this.arr)
              break;
            case 4:
              this.$delete(this.arr[0], 'name')
              console.log(this.arr)
              break;
            case 5:
              this.arr.unshift({
                name: '呆呆',
                address: '蘇州'
              })
              break;
            case 6:
              this.arr[0] = {
                name: '美麗',
                address: '意大利'
              }
              console.log(this.arr)
              break;
            case 7:
              this.$set(this.arr, 0, {
                name: '美麗',
                address: '意大利'
              })
              break;
            case 8:
              this.arr = [{
                name: '泡泡',
                address: 'llll'
              }]
              break;
            case 9:
              this.$set(this, 'arr', [{
                name: '美麗',
                address: '意大利'
              }])
              break;
            default:
          }
        },
        changeObj: function(type) {
          switch (type) {
            case 0:
              this.obj.name = "帥呆呆"
              break;
            case 1:
              this.$set(this.obj, 'name', '帥帥帥呆呆')
              break;
            case 2:
              this.obj.age = 20
              break;
            case 3:
              this.$set(this.obj, 'age', 22)
              break;
            case 4:
              delete this.obj.name
              break;
            case 5:
              this.$delete(this.obj, 'name')
              break;
            case 6:
              this.$set(this, 'obj', {
                name: '小貝',
                address: '哈哈哈'
              })
              break;
            default:

          }
        },
        changeStr: function() {
          this.string += '6'
        },
        changeNum: function() {
          this.num++
        }
      }
    })

  </script>

</html>

測試結果html