vue 面试 初学者必看知识点之计算属性及与方法 侦听器的区别

1.计算属性（computed）

computed选项中定义计算属性：由某个表达式计算出结果，形成的特殊属性，外观上是一个函数
好处：
1.可以把业务逻辑和视图分离，方便维护
2.计算属性会使用缓存技术，以提高性能
//计算属性第一次调用时，会执行它对应的函数，函数会返回一个计算结果，并把计算结果缓存起来，再次使用计算属性时，如果计算属性依赖的变量没有发生过变化，此时，就会从缓存中取计算属性，而不在重新执行计算逻辑，从而提高性能。如果依赖的变量发生了变化，计算属性会重新执行相应的业务逻辑，并把新的计算结果缓存到内存
3.使用方便。可以像data选项中的变量一样去使用计算属性。

 <div id="app">
        {{message}} - {{1+1}}  -  {{message.split('').reverse().join('')}}

        {{reverseMessage}}

    </div>
    <script src="vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
               message:'hello'
            },
            computed:{
                reverseMessage:function(){
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

计算属性和方法的区别

// 当方法名称和计算名称重名时，视图会优先调用方法
1.计算属性会使用缓存，在依赖的数据不发生变化时，它的性能比方法高
2.计算属性当成属性来使用，方法当成函数来调用
3.方法定义到methods选项中，计算属性定义到computed中

计算属性和侦听器的区别

1.计算属性会依赖缓存，而监听器不会依赖缓存
2.计算属性定义到computed中，而侦听器定义到watch中
3.计算属性业务逻辑编写方便，而监听需要定义很多侦听函数。当依赖的变量越来越多时，建议使用计算属性。
注意
1.计算属性不是响应式的，而依赖的变量是响应式的，所以直接更改计算属性不会影响视图。
2.如果想让更改计算属性时，影响视图怎么办？
想办法把依赖变量变化。需要使用计算属性中的getter，setter

    <div id="app">
        {{firstName}} {{lastName}}<br>
        {{fullName}}  {{fullName}}<br>
        {{fullName2}}<br>
     
    </div>
    <script src="vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
               firstName:'陈',
               lastName:'大琳',
               fullName2:'陈帅琳'
            },
            computed:{
                fullName:{
                  get(){
                      return this.firstName + this.lastName
                  },
                  set(newValue){
                    this.firstName = newValue[0]
                    this.lastName = newValue[1]+newValue[2]
                  }
                }
            },
            watch:{
                firstName(newValue,oldValue){
                    console.log('每次firstName发生变化，都会执行');
                    this.fullName2 = newValue + this.lastName;
                },
                lastName(newValue,oldValue){
                    console.log("每次lastName发生变化，都会执行");
                    this.fullName2 = this.firstName + newValue
                }
            }
       
        })
    </script>