computed的使用

本文主要是介绍computed的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用计算处理相关数据 

如可以是data里申明的数据；可以是其他页面 $emit('的数据'); 还可是自身申明的变量数据

 

1、vue.js的computed方法：
处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值。用methods也可以实现同样的效果，但methods在重新渲染的时候会重新调用执行，在性能上computed优于methods,当不需要缓存时可用methods。

实例1：computed和methods实现翻转字符串

<template>
  <div>
    <input v-model="message">
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
    <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
  </div>
</template>

 

<script>
export default {
  data () {
    return {
      message: 'Runoob123!'
    }
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return thi

这篇关于computed的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---