vue中的计算属性和侦听属性的区别

简介: vue中的计算属性和侦听属性的区别


计算属性: computed


computed是用来计算出来一个值 ,这个值调用的时候不需要加括号,会根据依赖进行缓存,依赖不变,computed的值不会重新计算


侦听属性: watch (两个属性)


1immediate:表示是否要在第一次渲染的时候执行这个函数


2deep:如果我们监听一个对象,那么我们是否要看这个对象里面属性的变化


不同点:


1.依赖方式:


计算属性依赖于定义时所依赖的数据,当依赖的数据变化时,计算属性会自动更新; 而watch则需要在数据变化时手动调用。


2.用途:


计算属性更适合做筛选操作,例如根据用户的年龄范围筛选商品列表;而watch更适合做执行异步或开销较大的操作,例如发送请求获取数据


3.执行顺序:


当计算属性和watch同时监听一个数据时,watch的回调函数会先执行,计算属性的回调函数会在所有watch的回调函数执行完毕后执行。

相关文章
|
5天前
|
缓存 JavaScript 前端开发
Vue.js计算属性:实现数据驱动的利器
Vue.js计算属性:实现数据驱动的利器
|
5天前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
6天前
|
缓存 JavaScript C++
浅谈Vue.js的计算属性computed
浅谈Vue.js的计算属性computed
9 0
|
6天前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
24 1
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
16 0
|
5天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
5天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
5天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
5天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码