初学者对Vue中computed计算属性的理解
2023-09-11 14:21:26 时间
computed计算属性
定义:当要使用的属性不存在时,需要通过计算已有属性得来
原理:底层逻辑是借助Object.defineproperty()方法提供的getter和setter
注:计算属性不能开启异步任务维护数据
<div id="app">
姓:<input type="text" v-model="firstName"><br/><br/>
名:<input type="text" v-model="lastName"><br/><br/>
全名:{{fullName}}
</div>
<script>
new Vue({
el: "#app",
data: {
firstName: '憨',
lastName: '瓜'
},
computed: {
fullName: {
get() {
return this.firstName +'-'+ this.lastName;
},
set(value) {
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1]
}
}
})
</script>
1、当fullName属性在页面中被读取时,get函数会被调用,且get函数的返回值作为fullName的值,另外,getter返回值会被存储到本地,页面中多次读取getter,只调用一次
2、Vue已经设置好get函数中的this指向Vue的实例对象vm
3、计算属性最终会出现在vm身上,直接读取即可
getter什么时候执行?
(1)当初次读取时会执行一次
(2)当getter所依赖的数据发生变化时,会被再次调用
优势:与methods相比,内有缓存机制,效率更高,调试方便。
setter什么时候写?
如果计算属性要被修改,那必须要写setter去响应修改,且setter要引起计算时所依赖的数据变化
注意:当计算属性只用于读取不用于修改时,可以有简写形式
computed:{
fullName() {
return this.firstName + '-' + this.lastName;
}
}
相关文章
- (尚004)Vue计算属性之基本使用和监视
- vue动态添加对象属性,视图不渲染
- axios基础学习——通过 Vue + axios 获取接口数据的小demo
- vue自定义轮播图组件 swiper
- JavaScript - 批量替换对象数组中的属性名(快速将二维数组对象中的键名进行大量替换)传入原来的属性名和要修改的属性名即可,适用于 js vue nuxt uniapp等项目,详细示例代码教程
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- 基于Vue+MySQL实现(Web)物流管理系统【100010571】
- Vue--computed计算属性监听数据变化----与watch,methods对比
- vue.js 嵌套循环渲染
- Vue知识点总结(7)——计算属性computed(超级详细)
- Vue开发规范
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue-cli3升级到vue-cli4
- vue整合adminLTE
- 前端技术:vue(计算属性+监视)
- spring boot + vue + element-ui全栈开发入门——开篇
- Vue.js系列之四计算属性和观察者
- Vue.js 监听属性