- 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> -
※注意, 不应该使用箭头函数来定义 watcher 函数 (如searchQuery: newValue => this.updateAutocomplete(newValue) )。理由是箭头函数绑定了父级作用域的上下文,所以
this
将不会按照期望指向 Vue 实例,this.updateAutocomplete
将是 undefined。
- 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>
- vm.$watch的选项:deep—为了发现对象内部值的变化,可以在选项参数中指定
deep: true
。注意监听数组的变动不需要这么做。immediate—在选项参数中指定immediate: true
将立即以表达式的当前值触发回调vm. $watch( 'someObject', callback, {deep: true,immediate: true})vm.someObject.nestedValue = 123;
Vue学习—选项(三)watch
最新推荐文章于 2023-05-11 09:18:42 发布