分别用方法、计算属性和侦听器实现当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-比较方法、计算属性和侦听器的更多相关文章

  1. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  3. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  4. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  5. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  6. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  7. VueJs(7)---计算属性和侦听器

    计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...

  8. vue基础——计算属性和侦听器

    计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...

  9. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

随机推荐

  1. CentOS 7.x默认没有ifconfig?!

    刚装了CentOS 7.0,安装界面非常漂亮,装完后发现没有ifconfig命令.yum install net-tools后出现. 有两个可能,一个是mini版本的原因,二一个可能我在安装过程中配置 ...

  2. JHipster开发环境安装

    本文演示如何在CentOS7上安装Jhipster以及其依赖组件. 这里采用官方推荐的Yarn安装方法,操作系统版本为CentOS 7.4. 1 安装JDK 推荐版本:OpenJDK 1.8.0-64 ...

  3. 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 ...

  4. SQL Server -- 回忆笔记(一):初见数据库

    SQL Server知识点回忆篇(一):初见数据库 1.  主键 primary key    唯一标识, 不会重复的值才会用来当做主键使用. 表可以没有主键,但建议每张表都有主键. 2.  数据冗余 ...

  5. web前端(8)—— CSS选择器

    选择器 选择器,说白了就是html的标签或者其相关特性,在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的 ...

  6. java 根据实体对象生成 增删改的SQL语句 ModelToSQL

    package com.xxx.utils; import java.lang.reflect.Field; import java.lang.reflect.Modifier; import jav ...

  7. UNIX高级环境编程(14)文件IO - O_DIRECT和O_SYNC详解 < 海棠花溪 >

    春天来了,除了工作学习,大家也要注意锻炼身体,多出去运动运动.  上周末在元大都遗址公园海棠花溪拍的海棠花.   进入正题. O_DIRECT和O_SYNC是系统调用open的flag参数.通过指定o ...

  8. Linux下完全删除用户

    实验环境:Centos7虚拟机 首先创建一个普通用户gubeiqing. [root@localhost ~]# useradd gubeiqing [root@localhost ~]# passw ...

  9. 【算法】LeetCode算法题-Count And Say

    这是悦乐书的第153次更新,第155篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第12题(顺位题号是38).count-and-say序列是整数序列,前五个术语如下: ...

  10. VsCode放大缩小

    如图:vscode界面突然缩小了 通过快捷键 ctrl+shift+ + 放大  ctrl+shift+ - 缩小