Vue2学习计划二：mustache与methods和computed等Vue实例参数

松鼠先生

发布于 2022-02-22 14:56:11

3470

发布于 2022-02-22 14:56:11

上一节写了Vue实例的生命周期，我们心里有了个Vue里的数据绑定至DOM，那么具体怎么实现的呢？

要实现只需要在Vue绑定的DOM元素中使用mustache语法即可，简单例子如下

<div id="app">
  <h2>{{message}}</h2>
  <hr>
  <h3>全名：{{fullName}}</h3>
  <h3>lastName：{{lastName}}</h3>
  <h3>firstName：{{firstName}}</h3>
  <h3>computed:{{name}}</h3>
  <button @click="getFullName">点击显示全名</buuton>
</div> 

<script src="./../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello vue",
      firstName: 'keobe',
      lastName: 'bryant',
      fullName: '请点击按钮'
    },
    methods: {
      getFullName(){
        this.fullName = this.firstName + " " +this.lastName
      }
    },
    computed: {
      name(){
        return this.firstName + " " +this.lastName
      }
    }
  })
</script>

效果如下：

第一行：hello vue，这是data中的message变量，从这里可以看出来，这里的mustache语法，可以看做所有Vue实例挂载的DOM元素中的{{变量}}都替换成变量的值。再分析一下Vue的实例对象，这段代码比上一篇文章中的代码在实例中多了两个对象，一个是methods，另一个就是computed。其中methods里存放的是方法，computed里存储的是计算属性。

我们在初始化Vue对象时，可以传入哪些参数呢？接下来就统一分析一下。然后一个一个的解释解释。

el ：提供一个页面上的DOM元素作为Vue实例的挂载目标，可以是选择器或者DOM实例
data ：存储响应式的数据
methods ：用于存储需要使用的方法
computed ：计算属性？？？？
components ：存放子组件对象
生命周期函数 ：存放上一节讲的各种生命周期函数

el和data上一节就讲过了，就不在复述。这里重点描述一下computed（计算属性）。细心的已经发现问题了，为什么它叫计算属性，但是在例子中确实一个方法？？？还有它到底是一个什么东西，如此的难以理解。为什么要使用它，用方法来替代不是更香吗？

**为什么需要计算属性：**用小白语言解释官方的标准话术就是，当模板中的数据运算太多，就会难以维护，因此引入计算属性。再简化一下就是，计算属性就是为了把一些运算封装，然后引入。哪些运算呢？比如字符翻转，大小写转化，数值相加减乘除，以及这些全部混用。当任何你觉得复杂的运算出现时，你都应该使用计算属性。 怎么使用：

computed:{{name}}

这一行就是使用，看上面例子应该能了解。 使用计算属性的优势：假设我们有一个性能开销比较大的计算属性 A ，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。这也完美的解释了为什么不用方法而要使用计算属性，因为计算属性会缓存。计算属性在多次调用的时候，只会执行一次，结果就会缓存，下一次调用直接使用缓存好的。而方法则是调用几次，就执行几次。 计算属性到底是什么：真实的计算属性是下面代码中的前面部分，后面部分就是我们常用的简写形式。

  name: {
    set: function(){},
    get: function(){return 'abc'}
  }
}
//简写后
computed: {
  name: function(){
    return 'abc'
  }
}

因此

computed:{{name}}

中调用计算属性name时，没加小括号，实质上是返回了get方法。计算属性一般没有set方法，绝大多多多数情况下都是这样。

**小作业：**接下来我们用代码实现一下计算属性与方法的区别，直观的观察一下计算属性的缓存：

<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
</div>

<script src="./../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Li',
      lastName: 'KUN'
    },
    computed: {
      fullName: function(){
        console.log('fullName')
        return this.firstName + ' '+ this.lastName
      }
    },
    methods: {
      getFullName: function (){
        console.log("getFullName()")
        return this.firstName + ' '+ this.lastName
      }
    }
  })
</script>

结果如下：可以明显的看到方法执行了6次（这里打印一次，即为执行一次）。而计算属性只打印了一次，所以只执行了一次。