(一)计算属性computed 对于任何复杂逻辑,你都应当使用计算属性。 1. 基本使用 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖数据没有发生改变,computed将从缓存中获取之前的计算结果,而不必再次执行函数。 例子: Original message: {{ message }} Computed reversed message: {{ reversedMessage }} var vm = new Vue({ el: '#example', data: { message: 'Hello' Vue.js 是一款流行的前端框架,用于构建用户界面。在Vue中,有两类特殊的属性用于处理数据的计算和响应式变化:计算属性(computed)和侦听器(watch)。这两个概念是Vue开发中不可或缺的部分,帮助开发者高效地管理复杂的业务逻辑。 ### 1. 计算属性(computed) 计算属性主要用来处理任何基于现有数据的复杂逻辑。计算属性是基于其响应式依赖进行缓存的,这意味着只要依赖的数据没有变化,计算属性就不会重新计算,而是从缓存中直接获取结果,节省了不必要的计算资源。 #### 1.1 基本使用 ```javascript var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) ``` 在这个例子中,`reversedMessage`是一个计算属性,它根据`message`数据的变化动态地返回反转后的字符串。当`message`改变时,`reversedMessage`会自动更新。 #### 1.2 计算属性的setter 计算属性默认只有getter,但可以通过提供setter来自定义设置值的行为: ```javascript computed: { fullName: { get: function () { return this.firstName + ' ' + this.lastName }, set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } ``` 在这里,`fullName`不仅有getter用于获取姓名,还有setter用于更新`firstName`和`lastName`。 ### 2. 侦听器(watch) 侦听器主要用于监听Vue实例中数据的变化,并在数据变化时执行指定的回调函数。 #### 2.1 基本使用 ```javascript var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, b: 'someMethod', c: { handler: function (val, oldVal) { /* ... */ }, deep: true // 深度监听 }, d: { handler: function (val, oldVal) { /* ... */ }, immediate: true // 默认执行一次 }, e: [function handle1(val, oldVal) { /* ... */ }, function handle2(val, oldVal) { /* ... */ }], 'e.f': function (val, oldVal) { /* ... */ } } }) ``` 这里,`watch`对象定义了对多个数据属性的监听。例如,当`a`的值改变时,会打印新旧值;`b`的变化会调用`somemethod`;`c`的深度监听会在对象内部值改变时触发;`d`会立即执行一次回调;`e`数组监听整个`e`对象,而'e.f'则监听`e.f`的值。 #### 2.2 计算属性与侦听器的对比 - **使用场景**:计算属性适合于计算一个新属性并将其挂载到Vue实例上,而侦听器则用于监听已经存在的数据变化,包括计算属性和其他数据。 - **执行时机**:计算属性在依赖变更时自动更新,而侦听器在数据变化后手动执行回调。 - **性能**:计算属性是惰性求值的,仅在依赖变化时更新,而侦听器可以设置频率限制或者执行异步操作。 总结来说,Vue的计算属性和侦听器提供了强大的数据处理和响应式能力。计算属性适用于简单的计算和自动更新,而侦听器则更适合需要更精细控制数据变化后的操作,如处理异步任务或进行复杂逻辑处理。在实际开发中,应根据需求选择合适的工具,以实现高效且灵活的代码。
- 粉丝: 3
我的内容管理
展开
我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏
我的下载
下载帮助
前往需求广场,查看用户热搜最新资源
- (源码)基于ESP32的无线控制应用.zip
- ppt模板:蓝色大气未来智慧城市发展规划年终报告模板.pptx
- plc机械手控制系统设计4组.doc
- 大数据方案介绍.docx
- 电信大数据的研究与应用.docx
- 别墅智能家居系统方案设计书要求.doc
- 通信中练习综合能力.doc
- 计算机技术在生物信息学研究中的应用分析.docx
- 计算机的认识和计算PPT.ppt
- 湖南科技计划项目管理申报指南.doc
- 应用型本科院校《数据通信与计算机网络》课程的改革与探索.docx
- Docker安装-Nginx.doc
- 电力营销系统现状与信息化系统的建设探讨.docx
- 电力调度自动化系统及计算机网络防雷措施.doc
- Vb保存幅图到Access数据库.doc
- (源码)基于Arduino的Si5351替代石英项目.zip


信息提交成功