Vue-比较方法、计算属性和侦听器
分别用方法、计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变。
一、方法:
html:
<div id="app">
{{fullName()}}
{{age}}
</div>
js:
var app=new Vue({
el:'#app',
data:{
firstName:'li',
lastName:'zhao',
age:18
},
methods:{
fullName:function(){
console.log('计算了一次')
return this.firstName+' '+this.lastName
}
}
})
当age发生改变时,fullName()执行了一次。
计算属性:
html:
<div id="app">
{{fullName}}
{{age}}
</div>
js:
var app=new Vue({
el:'#app',
data:{
firstName:'li',
lastName:'zhao',
age:18
},
computed:{
fullName:function(){
console.log('计算了一次')
return this.firstName+' '+this.lastName
}
}
})
当age发生改变时,由于firstName,lastName没有发生改变,所以fullName读的是缓存中的,计算并没有执行,性能较好。
侦听器
html:
<div id="app">
{{fullName}}
{{age}}
</div>
js:
var app=new Vue({
el:'#app',
data:{
firstName:'li',
lastName:'zhao',
fullName:'li zhao',
age:18
},
watch:{
firstName:function(){
console.log('计算了一次')
return this.fullName = this.firstName+' '+this.lastName
},
lastName:function(){
console.log('计算了一次')
return this.fullName = this.firstName+' '+this.lastName
}
}
})
当age发生改变时,由于firstName,lastName没有发生改变,所以fullName读的是缓存中的,计算并没有执行,性能较好;但是需要侦听firstName和lastName,代码量多。
总结
watch和computd可以从缓存中读数据,性能较好,只要相关数据没有改变就不执行;方法性能不好,只要页面数据有改变,方法就会执行;
对于某种功能,三者都能实现读情况下,优先选computd。
Vue-比较方法、计算属性和侦听器的更多相关文章
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- VueJs(7)---计算属性和侦听器
计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...
- vue基础——计算属性和侦听器
计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
随机推荐
- CentOS 7.x默认没有ifconfig?!
刚装了CentOS 7.0,安装界面非常漂亮,装完后发现没有ifconfig命令.yum install net-tools后出现. 有两个可能,一个是mini版本的原因,二一个可能我在安装过程中配置 ...
- JHipster开发环境安装
本文演示如何在CentOS7上安装Jhipster以及其依赖组件. 这里采用官方推荐的Yarn安装方法,操作系统版本为CentOS 7.4. 1 安装JDK 推荐版本:OpenJDK 1.8.0-64 ...
- WARNING: Re-reading the partition table failed with error 22: Invalid argument
在划分磁盘分区时,遇到错误"WARNING: Re-reading the partition table failed with error 22: Invalid argument&qu ...
- SQL Server -- 回忆笔记(一):初见数据库
SQL Server知识点回忆篇(一):初见数据库 1. 主键 primary key 唯一标识, 不会重复的值才会用来当做主键使用. 表可以没有主键,但建议每张表都有主键. 2. 数据冗余 ...
- web前端(8)—— CSS选择器
选择器 选择器,说白了就是html的标签或者其相关特性,在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的 ...
- java 根据实体对象生成 增删改的SQL语句 ModelToSQL
package com.xxx.utils; import java.lang.reflect.Field; import java.lang.reflect.Modifier; import jav ...
- UNIX高级环境编程(14)文件IO - O_DIRECT和O_SYNC详解 < 海棠花溪 >
春天来了,除了工作学习,大家也要注意锻炼身体,多出去运动运动. 上周末在元大都遗址公园海棠花溪拍的海棠花. 进入正题. O_DIRECT和O_SYNC是系统调用open的flag参数.通过指定o ...
- Linux下完全删除用户
实验环境:Centos7虚拟机 首先创建一个普通用户gubeiqing. [root@localhost ~]# useradd gubeiqing [root@localhost ~]# passw ...
- 【算法】LeetCode算法题-Count And Say
这是悦乐书的第153次更新,第155篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第12题(顺位题号是38).count-and-say序列是整数序列,前五个术语如下: ...
- VsCode放大缩小
如图:vscode界面突然缩小了 通过快捷键 ctrl+shift+ + 放大 ctrl+shift+ - 缩小