Vue种计算属性和侦听器的运用和区别

 // 计算属性（选项）computed
 //作用：我们知道 v-*指令上可以绑定一个JS表达式，当JS表达式比较复杂时，我们可以使用计算属性把指令中复杂的表达式抽离出来，以便于视图代码的可维护性。
 // 特点：计算属性必须依赖于一个或多个响应式变量，当它所关联的响应式变量发生变化时，计算属性会重新计算。反之，如果计算属性依赖的响应式变量不变化，计算属性永远不会重新执行。
 // 1、计算属性是定义在computed选项中，它可以用在v-text、v-bind、{{}}、v-for、v-if等指令上。
 
//重点：计算属性能否用在 v-model 上？可以。当计算属性绑定在v-model上时，因为v-model还具有set功能，所以我们需要把计算属性拆解成get/set的写法。
 <!-- name的变化 -->
    <input type="text" v-model='name' />
    <!-- 这里用到了计算属性 -->
    <h1 v-text='name2'></h1>
    <input type="text" v-model='name2' />
    
    computed:{
        get() {
            return this.name.split('').reverse().join('').toLocaleUpperCase() 
        },
        // 取出v-model表单上的最新值，经过处理，赋值给声明式变量
          set(newVal) {
            
            this.name = newVal.split('').reverse().join('').toLocaleLowerCase()
          }
    }
    
    // 侦听器（选项）watch
    // 作用：当我们需要监听一个响应式变量的变化时，就可以使用watch。
    // 特点：侦听器只能监听四类数据（data变量、计算属性、路由$route、vuex数据）的变化
    
    // 以下是监听器的两种写法
    watch {
           price(newVal,oldVal) {
                   
           },
           total: {
               handler(nelVal,oldVal) {
                   console.log('total发生了变化：', this.total, oldVal)
               }
                deep: true
            }
    }
    
    // 面试题：计算属性和侦听器有什么区别？
    // 1、计算属性是对响应式变量进行复杂运行，它的目的不是为了监听数据变化，而是解决视图中表达式难以维护的问题。
    // 2、侦听器是专用于监听响应式变量的变化的。通常当某个响应式变量变化，我们需要做另外一件事。 
    // 3、计算属性可以用this进行访问，在视图指令中也可以使用。但是侦听器函数不能被调用。