持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
今天我们可以复习到Vue的监视属性和条件渲染
监视属性watch
- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视
- 监视的两种写法：
- new Vue时传入watch配置
- 通过vm.$watch监视
const vm = new Vue({
el:'#root',
data:{
isHot:true,
}
computed:{}
methods:{}
watch:{
isHot:{
immedate:true,//作用：初始化时让handler调用 默认为false
//handler 当isHot发生改变时会被调用
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}}}
})
深度监视
- Vue中的watch默认不检测对象内部值的改变（一层）
- 配置deep：true 可以检测对象内部值的改变（多层）
备注：
-
Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！
-
使用watch时根据数据的具体结构，决定是否采用深度监视
computed 和 watch 之间的区别：
- computed能完成的功能，watch都能完成
- watch能完成的功能，computed不一定能完成 例如watch可以进行异步操作
两个原则：
- 所有Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promice的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象
条件渲染
-
使用v-show 做条件渲染
<h2 v-show="false">欢迎来到{{name}}</h2> <h2 v-show="1===1">欢迎来到{{name}}</h2> -
使用v-if做条件渲染
<h2 v-if="false">欢迎来到{{name}}</h2> <h2 v-if="1===1">欢迎来到{{name}}</h2> -
v-else 和 v-else-if
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>11111</div>
条件渲染小结
- v-if
写法： v-if= "表达式" 、v-else-if="表达式" 、v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if 可以和：v-else-if 、v-else一起使用，但要求结构不能被打断
2.v-show
写法：v-show=”表达式“
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
-
备注：
使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
