1021 计算属性

计算属性和侦听器都可以监听到data区数据的变化，当数据变化时可以触发方法的调用，从而在方法内部可以进行相应的逻辑处理。

    计算属性的语法格式是：computed: {}
    侦听器的语法格式是：watch: {}

Vue专辑

1. 对于任何复杂逻辑，你都应当使用计算属性。（官方原话）
2. 打开浏览器就会有第一次引用 调用computed计算属性 把结果缓存起来
3. 页面中重复引用直接从缓存中获取第一次引用的结果 不会重新调用conputed中计算属性function求值

• 自定义一些计算属性，只限制当前vm实例控制区域使用
• 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；
• 并不会把 计算属性，当作方法去调用；

1. 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
2. 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发生了变化，就会 立即重新计算 这个 计算属性的值
3. 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 页面中只在第一次引用时调用这里function 结果被缓存起来

• 从第二次开始页面上所有引用全部从缓存中获取 不会再重新调用这里的function
• 如果 计算属性方法中，所依赖的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；

        computed: {
          fullname: function() {
            // 类似与对象的访问器get, 最终映射为属性名为健:return结果为值
            // 页面上引用了一次 第一次来获取fullname值 必然调用一下function 返回结果
            // 页面第二次引用 没修改数据时 不会重新调用计算属性求值
            console.log("ok"); // 只执行一次
            return this.firstname + "-" + this.middlename + "-" + this.lastname;
            // return "hello word";
          }
        }

• Vue.js 的内联表达式非常方便，但如果涉及到比较复杂的场景，我们应该使用计算属性。

• 计算属性是用来声明式的描述一个值依赖了其它的值，当依赖的值发生改变时，其值才会相应的发生更改并更新相关的ＤＯＭ。
  当文本框中值发生更改时，计算属性的值也发生相应的更改并触发ＤＯＭ更新。

• 在简单的例子中，使用计算属性与methods是区别并不明显，但在一些比较复杂或是数据量比较大的，并存在一些依赖关系的时候，计算属性的优势就会突显出来，此时使用计算属性会大大提高我们的性能。

• 计算属性：只要依赖的数据没发生改变，我们就可以直接返回缓存里的数据，而不需要每次都重复执行数据操作。

• 在vue中 methods是方法，只要调用它，函数就会执行。有一定的触发条件。

• 计算属性：只要依赖的数据没发生改变，我们就可以直接返回缓存里的数据，而不需要每次都重复执行数据操作。

• 鉴于两者的区别，我们可以根据其需求和场景进行合理的选择。

watch && Watched属性 vs computed

watch用于观察和响应Vue实例上的数据变动,与计算属性相比，大部份情况下使用计算属性可能会更好一些，但当你想要在数据变化响应时，执行异步操作或开销较大的操作，这时使用watch将是更好的选择。

此时如果textValue的值发生改变时，就会执行watch操作，如果我们需要对数据进行深度观察时，可以使用deep属性。

使用watch时代码很容易理解，它指定监测的值是谁，然后相应的改变其他的值。