computed相关内容

  <div id ="app"> 
   		   {{  getFullName()  }}
    				  {{msg}}
   </div>
   <script src="node_modules/vue/dist/vue.js"> </script>
   <script> 
    let vm = new Vue({
                  data:{ 
                        firstName:'陈' ,
                        lastName:'邱' ,
                        msg:'abc'

                          },
            methods:{
                      getFullName(){
                        console.log('更新了')
                        return this.firstName + this.lastName   
                                   }      
                    }
                    }).$mount('#app');
	            </script>

上述方法，在检查代码时， vm.firstName=" " 一个新值的时候，会触发console.log
但是在vm.msg=" " 一个新值的时候 也会触发console.log 重新执行 浪费性能

于是为了节省性能，我们可以单独加入一个computer 存放通过属性计算的内容。

              <div id ="app"> 
  			    {{ FullName  }}
    			  {{msg}}
    		  </div>
  			 <script src="node_modules/vue/dist/vue.js"> </script>
		    <script> 
		 let vm = new Vue({
             		     data:{ 
                         firstName:'陈' ,
                         lastName:'邱' ,
                         msg:'abc'
                          },
                 computed:{  //Object.defineProperty来实现
                            fullName(){   //类似于get方法，有缓存，如果本次不计算 则取上一次的值。
                         	     console.log('更新了')
                                 return this.firstName + this.lastName 
                               //好处：它的依赖值不变就不会重新执行方法 只有first/lastName变了才变化
                          			  }
                 		   }，
                        }).$mount('#app');
				 </script>

以上的方法使用computed方法 在修改vm.first/lastName=" " 新值时 触发 ‘更新了’ 。
在修改vm.msg=” "新值时 不触发‘更新了’ 节省了性能避免没必要的执行。

与此同时comptued也可以使用watch方法代替 代码如下

		   <div id ="app"> 
  			    {{ fullName  }}
    			  {{msg}}
    	   </div>
  			 <script src="node_modules/vue/dist/vue.js"> </script>
		    <script> 
		 let vm = new Vue({
             	   data:{ 
                        firstName:'陈' ,
                        lastName:'邱' ,
                        msg:'abc',
                        fullName:' '
                          }, 
                      mounted(){  		            //在不同阶段会被调用  钩子函数
                  		   this.getFullName();       //加了mounted函数 第一次会渲染出现 没有mounted函数则vm修改值后才渲染出现
                               },
                      methods:{
                      	   getFullName(){
                      	   			     this.fullName = this.firstName + this.lastName
                      	   			     }
                      	   	 },
                      watch:{        //vm.$watch  只要有新数据变化了 就会触发回调
                    	   firstName(newValue){
                    	   					 this.getFullName();
                    	                     },
                    	   lastName(){
               			                     this.getFullName();
                          			  }
                 		   }，
                        }).$mount('#app');
				 </script>

watch也可以变成一个对象类型 功能和上面这个相同 代码如下

 <div id ="app"> 
  			    {{ fullName  }}
    			  {{msg}}
    	   </div>
  			 <script src="node_modules/vue/dist/vue.js"> </script>
		    <script> 
		 let vm = new Vue({
             	   data:{ 
                        firstName:'陈' ,
                        lastName:'邱' ,
                        msg:'abc',
                        fullName:' '
                          }, 
                      mounted(){  		            
                  		   this.getFullName();       
                               },
                      methods:{
                      	   getFullName(){
                      	   			     this.fullName = this.firstName + this.lastName
                      	   			     }
                      	   	 },
                      watch:{        
                    	   firstName:{
                    	   				handler(newValue){
                    	   				this.getFullName();
                    	   			 }
                    	                     },
                    	   lastName(){
               			               this.getFullName();
                          			  }
                 		   }，
                        }).$mount('#app');
				 </script>

computed和watch都能实现我们想要的逻辑，那他们有什么区别呢？
watch可以支持异步，computed只能同步。(watch)可以支持小功能，但是一般优先考虑能否使用computed方法计算属性，因为watch代码量比较大。
比如：当我们需要延迟渲染时 会修改watch部分的代码 computed不行 代码如下

	 watch:{        //vm.$watch  只要有新数据变化了 就会触发回调
     firstName(newValue){
               		   setTimeout(()=>{
                       this.getFullName();
                        },1000)     //延迟1秒渲染
                                      },
                   lastName(){
                    this.getFullName();
                              }
                     }
              }).$mount('#app');

computed和method 又有什么区别呢？
区别: computed有缓存 method没缓存