vue 09 计算computed视频自学

谁借莪１个温暖的怀抱￠ 2022-12-18 15:52 104阅读 0赞

**computed 计算**

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
      {
        { msg.split('').reverse().join('') }}
    </div>

这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理

> 当你需要从现有数组得到新的数据这个时候你就需要计算了computed

<div id="example">
    <p>原来的信息: "{
        { msg }}"</p>
    <p>计算翻转的信息: "{
        { rmsg }}"</p>
    </div>

var vm = new Vue({
    el: '#example',
    data: {
    msg: 'Hello'
      },
    computed: {
    // 计算属性的 getter
        rmsg: function () {
    // `this` 指向 vm 实例
    return this.msg.split('').reverse().join('')
        }
      }
    })

结果：

原来的信息: "hello"

计算翻转的信息: "olleh"

**computed 与method**

强调了computed区别于method最重要的两点

1.  computed是属性调用，而methods是函数调用
2.  computed带有缓存功能，而methods不是

**computed 原理**

JavaScript有一个特性是 Object.defineProperty ,它能做很多事，但我在这篇文章只专注于这个方法中的一个：

(Obeject.defineProperty是Object的一个方法，第一个参数是对象名称，第二个参数是要设置的属性名，第三个参数是一个对象，它可以设置这个属性是否可修改、可写等，而这篇文章主要使用的是Obeject.defineProperty的访问器属性

尽管 person.age 看起来像是访问了对象的一个属性，但其实在内部我们是运行了一个函数。