- (watch)用来观察和响应 Vue 实例上的数据变动
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 这样写不好,这样是模板逻辑变得厚重,不易维护 -->
<div>全名:{{firstName + lastName}}</div>
<h1>computed</h1>
<div>全名:{{fullName}}</div>
<h1>watch</h1>
<div>全名:{{watchFullName}}</div>
</div>
<script>
// 计算属性是根据data中已有的属性,计算得到一个新的属性
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
watchFullName: ''
},
// 创建计算属性通过computed关键字,它是一个对象
// 计算属性是基于它们的依赖进行缓存的
computed: {
// 这里fullName就是一个计算属性,它是一个函数,但这个函数可以当成属性来使用
fullName() {
return this.firstName + this.lastName
}
},
// watch监听器用来监听data中数据的值,只要监听的数据一变化,它就能执行相应的函数
// 创建监听器通过watch属性,它是一个对象
watch: {
// 这里面的函数名很特殊,它是你需要监听的data的名字,这个函数包含两个参数,一个是newVal,一个是oldVal
firstName(newVal, oldVal) {
console.log(newVal, oldVal);
this.watchFullName = newVal + this.lastName
},
lastName(newVal, oldVal) {
console.log(newVal, oldVal);
this.watchFullName = this.firstName + newVal
// }
// }
// 开发时,能用computed实现的时候,就用computed实现
// 需要执行异步操作的时候,就要用到watch
})
</script>
- 深度监听
<div id="app">
<input type="text" v-model="user.name">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
name: 'jack'
}
},
watch: {
// 监听对象不能使用下面这种写法,要使用深度监听
// user(newVal, oldVal) {
// console.log('改变了');
// }
user: {
// hanlder这个函数名字固定
handler (newval) {
console.log('改变了');
console.log(newval.name);
},
// deep:true表示深度监听
deep: true
}
}
})
</script>