倾世~茹薇

不会做饭的程序员不是好的搬运工~~~~~~

Vue学习—选项(三)watch

  1. watch:{ [key: string]: string | Function | Object | Array } ,一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
    <body>
    <h1>watch</h1>
    <div id="app">
    <p>苹果</p>
    <p>购买数量:{{n}}</p>
    <p>
    <button @click="del">-</button>
    <button @click="add">+</button>
    </p>

    </div>
    <script>
    var app = new Vue({
    el: "#app",
    data: {
    n: 1
    },
    methods: {
    add: function () {
    this.n++;
    },
    del: function () {
    this.n--;
    }
    },
    watch: {
    n: function (newVal, oldVal) {
    if (newVal < 1) {
    this.n = 1;
    }
    console.log(newVal);
    console.log(oldVal);
    }
    }
    })
    </script>
    </body>
  2. 注意,不应该使用箭头函数来定义 watcher 函数 (如searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
  3. vm.$watch:观察 Vue 实例变化的一个表达式或计算属性函数,也就是将watch方法外置成为Vue的实例属性。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
    <body>
    <h1>watch</h1>
    <div id="app">
    <p>苹果</p>
    <p>购买数量:{{n}}</p>
    <p>
    <button @click="del">-</button>
    <button @click="add">+</button>
    </p>

    </div>
    <script>
    var app = new Vue({
    el: "#app",
    data: {
    n: 1
    },
    methods: {
    add: function () {
    this.n++;
    },
    del: function () {
    this.n--;
    }
    }
    })
    //将watch方法外置成为Vue的实例属性
    app.$watch('n', function (newVal, oldVal) {
    if (newVal < 1) {
    app.n = 1;
    }
    })
    </script>
    </body>

  4. vm.$watch的选项:deep为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。immediate在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
    vm.$watch('someObject', callback, {
    deep: true,
    immediate: true
    })
    vm.someObject.nestedValue = 123;
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41581499/article/details/79959587
文章标签: watch
个人分类: Vue学习—基础篇
上一篇Vue学习—选项(二)methods
下一篇Vue学习—选项(三) mixins混入
想对作者说点什么? 我来说一句

VUE整理(三)

2017年12月05日 21KB 下载

没有更多推荐了,返回首页

关闭
关闭