VUE10 计算属性
1 Vue计算属性简介
1）定义：我们需要一个属性，但是这个属性不存在，但是可以通过已有的属性计算得来，那么就可以定义一个计算属性。
2）原理：底层借助了Object.defineproperty方法提供的getter和setter
3）get什么时候调用 :
初次读取fullName时
所依赖的数据发生变化时
4）优势：与methods实现相比，内部有缓存机制（复用），效率更高，调用方便
5）其它
计算属性最终会出现在vm上，直接读取使用即可
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
计算属性和data属性都是属性-不能重名
2 场景演示
如下图，有两个输入框，一个标题，标题的值由第一个输入框和第二个输入框的值通过'-'拼接，并且每个输入框最多只取5个字符
2.1 使用v-bind实现
<body> <div id="root">
<input v-model="name" ></input> <br/><br/>
<input v-model="address" ></input> <br/> <br/>
<h1>{{name.slice(0,5)}}-{{address.slice(0,5)}}</h1> </div> <script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
}
}) </script>
</body>
2.2 使用函数实现
2.2.1 示例
<body> <div id="root">
<input v-model="name" ></input> <br/><br/>
<input v-model="address" ></input> <br/> <br/>
<h1>{{nameAndaddress()}}</h1> </div> <script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
methods: {
nameAndaddress(){
return this.name.slice(0,5) + '-' + this.address.slice(0,5)
}
},
}) </script>
</body>
2.2.2 示例2
标题变为三个
<body>
<div id="root">
<input v-model="name" ></input> <br/><br/>
<input v-model="address" ></input> <br/> <br/>
<h1>{{nameAndaddress()}}</h1>
<h1>{{nameAndaddress()}}</h1>
<h1>{{nameAndaddress()}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
methods: {
nameAndaddress(){
console.log('nameAndaddress函数被调用')
return this.name.slice(0,5) + '-' + this.address.slice(0,5)
}
},
})
</script>
</body>
发现函数被调用了三次
2.3 使用计算属性
2.3.1 示例
计算属性中我们直接返回一个字符串，实际上它默认给我们定义了getter函数
<body> <div id="root">
<input v-model="name" value="张三"></input> <br/><br/>
<input v-model="address" value="杭州"></input> <br/>
<h1>{{nameAddress}}</h1> </div> <script type="text/javascript" > const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
computed:{
nameAddress(){
return this.name.slice(0,5) + "-" + this.address.slice(0,5)
}
}
}) </script>
</body>
完整写法
<body> <div id="root">
<input v-model="name" value="张三"></input> <br/><br/>
<input v-model="address" value="杭州"></input> <br/>
<h1>{{nameAddress}}</h1> </div> <script type="text/javascript" > const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
computed:{
nameAddress:{
get(){
console.log('getter调用')
return this.name.slice(0,5) + "-" + this.address.slice(0,5)
} }
}
}) </script>
</body>
我们可以发现，getter函数在初始化的时候被调用一次，在两个输入框的值改变的时候也被调用了，因为getter函数会在所依赖的数据发生变化时被调用
2.3.2 计算属性的缓存机制
把标题变为三个
<body> <div id="root">
<input v-model="name" value="张三"></input> <br/><br/>
<input v-model="address" value="杭州"></input> <br/>
<h1>{{nameAddress}}</h1>
<h1>{{nameAddress}}</h1>
<h1>{{nameAddress}}</h1> </div> <script type="text/javascript" > const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
computed:{
nameAddress:{
get(){
console.log('getter调用')
return this.name.slice(0,5) + "-" + this.address.slice(0,5)
} }
}
}) </script>
</body>
发现getter函数值调用了一次。因为计算属性采用了缓存机制
计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果
2.4 比较三种方法的优劣
第一种：直接使用数据绑定
看起来比较方便。但是，我们对于模板的要求是尽量清晰简洁。在{{}}进行处理，如果更复杂一点，就会放入过多的代码，有悖于这个原则。
代码复用性低。
第二种：函数
没有缓存机制
第三章：计算属性
有缓存机制
3 vue计算属性语法
3.1 完整语法
computed: {
计算属性名: {
set(值){
},
get(){
return 值
}
}
}
3.2 简写语法
只有getter函数的时候
computed: {
计算属性名(){
return xxx
}
}
4 完整写法的示例
<body> <div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<input v-model="nameAddress"></input> </div> <script type="text/javascript" > const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
computed:{
nameAddress:{
get(){
console.log('getter调用')
return this.name.slice(0,5) + "-" + this.address.slice(0,5)
},
set(value){
console.log(value)
this.name='heiheihei'
this.address='xixixi'
} }
}
}) </script>
</body>
VUE10 计算属性的更多相关文章
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
- 关于vue.js的计算属性练习代码
参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- 第三节：Vue计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...
- Vue#计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...
- Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- Swift面向对象基础（中）——Swift中的存储属性和计算属性
学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
随机推荐
- Docker | 专栏文章整理🎉🎉
Docker Docker系列文章基本已经更新完毕,这是我从去年的学习笔记中整理出来的. 笔记稍微有点杂乱.随意,把它们整理成文章花费了不少力气.整理的过程也是我的一个再次学习的过程,同时也是为了方便 ...
- 【ELK解决方案】ELK集群+RabbitMQ部署方案以及快速开发RabbitMQ生产者与消费者基础服务
前言: 大概一年多前写过一个部署ELK系列的博客文章,前不久刚好在部署一个ELK的解决方案,我顺便就把一些基础的部分拎出来,再整合成一期文章.大概内容包括:搭建ELK集群,以及写一个简单的MQ服务. ...
- Complementary XOR
题目链接 题目大意: 给你两个字符串只有01组成,你可以选取区间[l, r],对字符串a在区间里面进行异或操作,对字符串b非区间值进行异或操作,问能否将两个字符串变为全0串.如果可以输出YES, 操作 ...
- 基于 Sealos 的镜像构建能力，快速部署自定义 k8s 集群
Sealos 是一个快速构建高可用 k8s 集群的命令行工具,该工具部署时会在第一个 k8s master 节点部署 registry 服务(sealos.hub),该域名通过 hosts 解析到第一 ...
- 【云原生 · DevOps】DevOps 解决方案
DevOps 解决方案 1.1 容器化 CI/CD 1.2 容器化流水线 1.3 深度集成 Jenkins 1.4 灰度发布 1.5 制品库设计 1.6 DevOps 安全 1.6.1 CI/CD 安 ...
- 【云原生 · Kubernetes】kubernetes v1.23.3 二进制部署（一）
kubernetes v1.23.3 二进制部署 1. 组件版本和配置策略 1.1 主要组件版本 1.2 主要配置策略 2. 初始化系统和全局变量 2.1 集群规划 2.2 kubelet cri-o ...
- 记录下批处理bat脚本获取打包发布问题
最近做了个Jenkins配合Gitlab自动部署Java项目到Windows Server服务器. Jenkins和Gitlab在Linux下,好一顿折腾,先记录下脚本,其余后续补充吧. 把Java项 ...
- VH6501模板工程介绍（一）
VH6501硬件结构 1.式样 1.正向有5个灯,用来指示干扰的触发状态,干扰类型(数字或模拟),通道通信以及设备状态. 2.两个DB9接口(公头male和母头female),这是CAN或CANFD通 ...
- 【离线数仓】Day01-用户行为数据采集：数仓概念、需求及架构、数据生成及采集、linux命令及其他组件常见知识
一.数据仓库概念 二.项目需求及架构设计 1.需求分析 2.项目框架 3.框架版本选型 服务器选型:云主机 服务器规划 三.数据生成模块 1.数据基本格式 公共字段:所有手机都包含 业务字段:埋点上报 ...
- 静态文件配置，django连接MySQL，ORM基本操作
静态文件 什么是静态文件 静态文件是不怎么经常变化的文件,主要针对html文件所使用的到的各种资源. css文件.js文件.img文件.第三方框架文件 django针对静态文件资源需要单独开始一个目录 ...