Vue.js 监听属性
Vue提供了一个watch方法可以让使用者去监听data内的数据变动,我们可以通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
例如:
<div id="app"> <input type="text" v-model="name"> <h3>{{name}}</h3> <hr> <input type="text" v-model="tel"> <h3>{{tel}}</h3> <hr> <input type="text" v-model="user.name"> <h3>{{user.name}}</h3> </div>
var vm = new Vue({ el: '#app', data() { return { name: 'Jack', tel: 15966668888, user: { name: 'Mary', age: 10 } } }, watch: { tel: function(newVal, oldVal) { console.log('tel被修改啦,原来的值' + oldVal + '新值:' + newVal); }, user: { handler(newVal, oldVal) { debugger console.log('newVal', newVal); console.log('oldVal', oldVal); }, deep: true //深度监视,当对象中的属性发生变化的时候会监视 } }, methods: {}, created() {}, beforeMount() {}, mounted() {} });
里面的deep设为了true,是深度监听。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候。