上手Vue：深度理解computed、watch及其区别

},

})

只考虑读取，没有修改时，计算属性可以简写

结果如下：

2. watch（侦听器）简介

2.1 使用场景：

侦听属性是观察和响应 Vue 实例上的数据变动

2.2 使用方式：

通过 Vue实例对象的$watch()或 watch 配置来监视指定的属性，当属性变化时, 回调函数自动调用, 在函数内部进行计算

2.3 小案例：

点击按钮，切换天气，页面展示：今天天气很炎热或凉爽

案例代码如下所示：当isHot发生变化时，就打印到控制台

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

实现监视的另一种实现方法：vm为Vue的一个实例对象

// 监视的另一种实现方法

vm.$watch(‘isHot’, {

immediate: true,

//当isHot发生改变时，回调函数handler被调用

handler(newValue, oldValue) {

console.log(‘isHot被修改了’, newValue, oldValue)

}

})

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-REKM6mFn-1714517793681)]