不积跬步,无以至千里;不积小流,无以成江海。
Vuejs语言基础
watch属性(监听):
监控vue实例的变化,监控的变量或者对象必须在data里面声明才可以。
- 基本用法:
当fullName值变化时,watch监听到并且执行:
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName; } } })
- handler方法和immediate属性
上面方法中使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行;
如果我们需要在最初绑定值的时候也执行函数,则就需要用到 immediate 属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。