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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
jQuery插件的写法分享
Jun 12 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
用js重建星际争霸
2006/12/22 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
Python实现12306火车票抢票系统
2019/07/04 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
本科生详细的自我评价
2013/09/19 职场文书
致接力运动员广播稿
2014/02/17 职场文书
领导干部对照检查材料
2014/08/24 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python