Vue学习笔记day03

一、计算属性

<!-- 复杂运算 -->
<div>{{message.split('').reverse().join('')}}</div>
<!-- 计算属性代替复杂运算 -->
<div>{{reverseMessage}}</div>
computed: {
    <!-- 计算属性的getter -->
    reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，都应当使用计算属性。

<div id="root">
        <!-- 组合姓-名 -->
        <h2>计算属性的基本使用</h2>
        <hr>
        姓：<input type="text" v-model='firstname'><br>
        名：<input type="text" v-model='lastname'><br>
        全名是：{{fullname}}
    </div>

const vm = new Vue({
        el:'#root',
        data:{
            firstname:'凯文',
            lastname:'Durant'
        },
        // 用来存放计算属性
        computed:{
            fullname:{
                //get什么作⽤：当有⼈读取fullName的时候，get就会被调⽤，并且返回值会作为fullName的值
               //get什么时候调⽤：1.初次读取fullName时 2.所依赖的数据发⽣变化的时候
                get(){
                    return this.firstname+'---'+this.lastname
                },
                //set什么时候调⽤：当fullName被修改时
                set(value){
                    let arr = value.split('-')
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }
    })

计算属性也可以通过简写来表达，当确定了计算属性，不需要做修改操作时用简写。

computed: {
            // 简写形式(当确定了计算属性不会再被修改的时候)
            fullname() {
                return this.firstname+'-'+this.lastname
            }
        }

虽然可以使用方法达到和计算属性同样的效果，但是计算属性有以下优点：

• 属性调用：
  1 .computed定义的方法，我们是以属性访问的形式调用，{{computedTest}}
  2 .methods定义的方法，我们必须要加上()来调用，{{methodTest()}}
• 缓存功能：
  计算属性具有缓存：只有当计算属性所依赖的属性发生改变时，才会重新去计算
  methods不会被缓存：方法每次都会去重新计算结果。
• 缓存好处：
  相比大家都知道HTTP缓存，其核心作用就是对一些服务端未更新的资源进行复用，避免一些无谓的请求，优化了用户的体验。

二、监听属性

Vue的watch属性可以用来监听data属性中数据的变化。

<div id="app">
 <h2>今天的天⽓真{{info}}</h2>
 <button @click='changeWeather'>切换天⽓</button>
 </div>

new Vue({
        el:'#app',
        data:{
            isHot:true
        },
        methods: {
            change(){
                this.isHot = ! this.isHot
            }
        },
        // 监听器
        watch:{
            isHot:{
                // 在isHot变化的时候调用
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        }
    })

监听属性watch
1.当被监听的属性变化时，回掉函数⾃动执行，进行相关操作
2.监听的属性必须存在，才能进行监听
3.监听的两种写法：
1）new Vue是传⼊watch配置
2）通过vm.$watch配置

三、methods,watch,computed的区别

1 . computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
2 . methods 方法表示一个具体的操作，主要书写业务逻辑；
3 . watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

---