vue计算属性和监听器

1. 模板里使用表达式

   • 模板语法里使用表达式进行一些操作

     <div id="app">
         {{ message.split('').reverse().join('')}}
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'hello,vue'
                 }
             }
         })
     </script>
     

   • 如果表达式足够复杂，会很难处理，并且不够优美且很难理解

2. 使用方法

   • 调用方法代替表达式

     <div id="app">
         {{reversedMessage()}}
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'hello,vue'
                 }
             },
             methods: {
                reversedMessage(){
                     return this.message.split('').reverse().join('')
                }
             }, 
     
         })
     </script>
     

   • 每次渲染模板的时候都需要调用一次方法，并且不能触发缓存，比较浪费性能。所以引入基于响应式依赖进行缓存的计算属性。

3. 使用计算属性

   • 只在相关响应式依赖发生改变时它们才会重新求值

     <div id="app">
         {{reversedMessage}}
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'hello,vue'
                 }
             },
             computed: {
                 reversedMessage() {
                     return this.message.split('').reverse().join('')
                 }
             },
         })
     </script>
     

   • 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

     computed: {
       fullName: {
         // getter
         get: function () {
           return this.firstName + ' ' + this.lastName
         },
         // setter
         set: function (newValue,oldValue) {
           var names = newValue.split(' ')
           this.firstName = names[0]
           this.lastName = names[names.length - 1]
         }
       }
     }
     

4. 使用监听器

   • 普通方法：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，一种更通用的方式来观察和响应 Vue 实例上的数据变动

     <div id="app">
         <input type="text"  v-model='message'>
         <p>{{reversedMessage}}</p>
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'hello,vue',
                     reversedMessage:'',
                 }
             },
             watch: {
                 message(newValue,oldValue){//这种这种不能立马生效，因为初始化时不会触发
                     this.reversedMessage = newValue.split('').reverse().join('')
                 }
             },
         })
     </script>
     

   • 立即执行：immediate立即执行一次

     <div id="app">
         <input type="text"  v-model='message'>
         <p>{{reversedMessage}}</p>
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'hello,vue',
                     reversedMessage:'',
                 }
             },
             watch: {
                 message: {
                     immediate: true,
                     handler: function (newValue, oldVal) {
                         this.reversedMessage = newValue.split('').reverse().join('')
                     }
                 },
             },
         })
     </script>
     

   • 监听复杂对象：为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做

      <div id="app">
         <input type="text" v-model='message.deepMsg'>
         <p>{{reversedMessage}}</p>
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:{deepMsg:'hello,vue'},
                     reversedMessage:'',
                 }
             },
             watch: {
                 message: {
                     //immediate: true,
                     deep:true,
                     handler: function (newValue, oldVal) {
                         this.reversedMessage = newValue.deepMsg.split('').reverse().join('')
                     }
                 },
             },
         })
     </script>
     

5. 计算属性和监听器的比较

   • 处理数据的场景不同，监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数据影响

   • 计算属性有缓存性，计算所得的值如果没有变化不会重复执行

   • 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况

     <div id="app">
         <input type="text" v-model='message'>
         <p>{{addMessage}}</p>
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'hello,vue',
                     addMessage:'',
                 }
             },
             watch: {
                 message(val){
                     this.addMessage ='wait.....';
                     setTimeout(()=>{
                         this.addMessage = 'change'
                     },2000)
                 },
             },
         })
     </script>