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

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


计算属性: computed


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


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


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


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


不同点:


1.依赖方式:


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


2.用途:


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


3.执行顺序:


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

相关文章
|
2天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
8 1
|
3天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
2天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
6 0
|
3天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
3天前
|
JavaScript
vue知识点
vue知识点
7 1
|
3天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
10 1
|
3天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
4天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
14 1
|
4天前
|
JavaScript
vue实战——404页面模板001——男女手电筒动画
vue实战——404页面模板001——男女手电筒动画
12 1
|
3天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
12 0