Vue.js学习笔记:计算属性与依赖关系解析
150 浏览量
更新于2024-08-31
收藏 72KB PDF 举报
"Vue.js学习笔记,探讨了computed计算属性和组件使用中的问题及思考,适合对Vue.js感兴趣的开发者参考。"
在Vue.js框架中,`computed`属性是一个非常重要的特性,它允许开发者定义基于数据模型的计算逻辑,并在这些数据发生变化时自动更新。这篇学习笔记主要关注了两个关键知识点:在`computed`计算属性中使用`vm`变量的限制以及计算属性之间的依赖关系。
首先,关于`vm`变量的使用,Vue实例在构造过程中,`vm`(通常是`this`的别名)尚未完全创建,因此在计算属性的函数内部直接使用`vm`是不安全的。开发者应使用`this`来访问当前Vue实例的属性和方法。如果希望在使用TypeScript时得到代码提示和类型检查,可以通过以下方式设置`vm`:
```javascript
let vm = vm || this;
```
这样,在需要使用`vm`的地方,可以用`vm`替代`this`,同时TypeScript能够识别并提供语法检查。但请注意,这种方法在模板中无法应用,因为模板直接由Vue编译,而TypeScript对此无能为力,除非Vue支持jsx语法,TypeScript才能提供更好的支持。
其次,笔记中讨论了计算属性的依赖规则。Vue的计算属性是基于它们的依赖关系(即其他数据属性)动态计算的。根据笔记中的示例,计算属性可以有以下规则:
1. 计算属性必须直接或间接地依赖于非计算属性或固定值。这意味着计算属性的计算逻辑中,可以直接引用`data`对象内的属性。
```javascript
var vm = new Vue({
el: "#app",
data: {
dataVal: "xxcanghai"
},
computed: {
computedVal1: function() {
return this.dataVal + "_1"; // 合法,计算属性引用非计算属性
}
}
});
```
2. 计算属性之间可以形成链式依赖,但是链的最上游计算属性必须直接依赖非计算属性或固定值。这确保了计算逻辑的基础是原始数据,而不是其他中间计算结果。
```javascript
var vm = new Vue({
el: "#app",
data: {
dataVal: "xxcanghai"
},
computed: {
computedVal1: function() {
return this.dataVal + "_1";
},
computedVal2: function() {
return this.computedVal1 + "_2"; // 合法,计算属性computedVal2引用了非计算属性或固定值的计算属性
}
}
});
```
3. 虽然可以循环依赖计算属性,但这种依赖链的最终源头仍需指向非计算属性或固定值,以保证数据流的正确性。
这些规则保证了Vue.js能够有效地跟踪和更新依赖,从而实现响应式系统。理解并遵循这些规则对于编写高效且无误的Vue应用至关重要。在实际开发中,熟练掌握计算属性的使用,可以避免不必要的性能开销,优化应用程序的响应速度。
2020-10-20 上传
2024-04-01 上传
2024-01-25 上传
2021-03-30 上传
2020-12-17 上传
2022-05-18 上传
2024-03-16 上传
2021-02-03 上传
2021-05-19 上传
weixin_38557980
- 粉丝: 7
- 资源: 925
最新资源
- 新代数控API接口实现CNC数据采集技术解析
- Java版Window任务管理器的设计与实现
- 响应式网页模板及前端源码合集:HTML、CSS、JS与H5
- 可爱贪吃蛇动画特效的Canvas实现教程
- 微信小程序婚礼邀请函教程
- SOCR UCLA WebGis修改:整合世界银行数据
- BUPT计网课程设计:实现具有中继转发功能的DNS服务器
- C# Winform记事本工具开发教程与功能介绍
- 移动端自适应H5网页模板与前端源码包
- Logadm日志管理工具:创建与删除日志条目的详细指南
- 双日记微信小程序开源项目-百度地图集成
- ThreeJS天空盒素材集锦 35+ 优质效果
- 百度地图Java源码深度解析:GoogleDapper中文翻译与应用
- Linux系统调查工具:BashScripts脚本集合
- Kubernetes v1.20 完整二进制安装指南与脚本
- 百度地图开发java源码-KSYMediaPlayerKit_Android库更新与使用说明