watch 侦听器
? ? ? ? 监视数据源的变化
const vm = new Vue({
el: '#app',
data: {
username: '',
person : {
age : ''
}
},
watch: {
// 侦听器本质上是一个函数，要监听哪个数据的变化，就把数据名作为方法名
// newval 表示新值 ， oldval 表示旧值
username(newval, oldval) {
console.log(newval, oldval)
}
// 对象格式的侦听器
person: {
// 侦听器的处理函数，只会监听到新值
handler(newval) {
console.log(newval)
},
// immediate 选项默认值是: false ，作用是控制侦听器是否自动触发
immediate: true,
// 开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听
deep: true,
},
// 对象格式侦听对象的某一子属性的变化
'person.age' (newval, oldval) {
console.log(newval, oldval)
}
}
})
? ? ? ? 侦听器格式
? ? ? ? ? ? ? ? 1.方法格式的侦听器
? ? ? ? ? ? ? ? ? ? ? ? 缺点：无法在刚进入页面的时候自动触发；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?不能监听对象中的属性。
? ? ? ? ? ? ? ? 2.对象格式的侦听器
? ? ? ? ? ? ? ? ? ? ? ? 好处：可以通过 immediate 选项，让侦听器自动触发
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可以通过 deep选项，让监听器能够监听到对象的每一个属性的变化
计算属性
????????通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
const vm = new Vue({
computed : {
函数名 () {
return 值
}
}
})
? ? ? ? 【注】在 computed 中，定义时，要被定义成方法，在属于计算属性时，当成普通的属性使用。只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！
|