Vue的监视属性和条件渲染,你还了解他们的区别吗?

发布网友发布时间：2024-09-17 05:35

我来回答

共1个回答

热心网友时间：2024-09-29 06:36

今天我们可以复习到Vue的监视属性和条件渲染

监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作

监视的属性必须存在，才能进行监视

监视的两种写法：

newVue时传入watch配置

通过vm.$watch监视

constvm=newVue({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做条件渲染

<h2v-show="false">欢迎来到{{name}}</h2><h2v-show="1===1">欢迎来到{{name}}</h2>

使用v-if做条件渲染

<h2v-if="false">欢迎来到{{name}}</h2><h2v-if="1===1">欢迎来到{{name}}</h2>

v-else和v-else-if

<divv-if="n===1">Angular</div><divv-else-if="n===2">React</div><divv-else-if="n===3">Vue</div><divv-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一定可以获取到

原文：https://juejin.cn/post/7101878796080381989