Vue 计算属性，方法和侦听器

1.计算属性，方法和侦听器

   <div id="app">
        {{fullName}}  <!--计算属性-->
        {{age}}
    </div>
    

<script>
     var vm=new Vue({
         el:"#app",
         data:{
             firstName:'Dell',
             lastName:'Lee',
             fullName:'Dell Lee',
             age:28
         },
         computed: {
             //计算属性的值是一个函数
             //计算属性内置缓存的,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
             //例如我要改变age的值，计算属性fullName的值是不会执行重新计算的
             fullName:function(){
                 console.log('计算了一次');
                return this.firstName+' '+this.lastName;
             }
         },
         methods: {
             //例如我要改变age的值，fullName()会被调用。只要有数据改变，渲染页面就会被调用，内部没有缓存的机制
            fullName:function(){
                console.log('计算了一次');
                return this.firstName+' '+this.lastName;
            }
         },
        
        watch: {
            //侦听器
            //缓存机制，侦听的属性没有变化的话，就会使用缓存的值
            firstName:function(){  //firstName 改变的时候才会重新计算fullName的值
                console.log('计算了一次');
                this.fullName=this.firstName+' '+this.lastName;
            },
            lastName:function(){   //lastName 改变的时候才会重新计算fullName的值
                console.log('计算了一次');
                this.fullName=this.firstName+' '+this.lastName;
            }
        },
     })
    </script>

2.计算属性的getter和setter

 <div id="app">
        {{fullName}}  <!--计算属性-->
 </div>
    

 <div id="app">
        {{fullName}}  <!--计算属性-->
    </div>
    <script>
     var vm=new Vue({
         el:"#app",
         data:{
             firstName:'Dell',
             lastName:'Lee',
         },
         computed: {
             
             fullName:{
                 get:function(){
                    return this.firstName+' '+this.lastName;
                 },
                 set:function(value){
                     var arr=value.split(" ");
                     this.firstName=arr[0];
                     this.lastName=arr[1];
                 }
             }
         },
        
     })

     //现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
    </script>