Vue中computed与methods的区别详解


Posted in Javascript onMarch 24, 2018

Vue中computed可以用来简单的拼接需要展示的数据

Vue中computed与methods的区别详解

computed and methods

拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用

一个简单的实例

Vue中computed与methods的区别详解

computed只在初始化时被调用

computed只在初始化时被调用

methods会在数据变化时被调用, 即使变动的数据与自身无关

测试源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>computed的使用</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="root">
  </div>
  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        name: "zhaozhao",
        age: 13,
        hobby: 'Python',
        nameAgeStyle: {
          fontSize: "20px",
          color: "#0c8ac5"
        }
      },
      template: `<div>
        <div v-bind:style="nameAgeStyle">computed方式渲染: {{nameAndAge}}</div>
        <div v-bind:style="nameAgeStyle">methods 方式渲染: {{getNameAndAge()}}</div>
        <br>
        <input type="text" v-model="hobby">
        <div>爱好: {{hobby}}</div>
        <div>{{noUse()}}</div>
        </div>`,
      computed: {
        nameAndAge: {
          get(){
          console.log('调用computed');
          return `${this.name} ==> ${this.age}`;
          }
        }
      },
      methods: {
        getNameAndAge() {
          console.log('调用methods');
          return `${this.name} ==> ${this.age}`;
        },
        noUse(){
          console.log("=methods==nouse==");
        }
      }
    })
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
js中settimeout方法加参数
Feb 28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JS高级运动实例分析
Dec 20 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 #Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 #Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 #Javascript
使用Angular CLI生成路由的方法
Mar 24 #Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 #Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
You might like
yii分页组件用法实例分析
2015/12/28 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
详解Node 定时器
2018/02/26 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
初学python数组的处理代码
2011/01/04 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
房地产广告策划方案
2014/05/15 职场文书
有关环保的标语
2014/06/13 职场文书
中央空调节能方案
2014/06/15 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
学校教代会开幕词
2016/03/04 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python