vue-computed

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
    1.计算属性最终会出现在vm上，直接读取使用即可。
    2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

为什么使用computed而不使用methods和data以达到相同的目的？
重点：computed会有缓存机制，只要所依赖的数据没有发生改变，就直接在缓存调用，无论使用多少次都，不用再重新调用。如果使用的是methods的话，使用一次就会调用一次，效率不高。

<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    测试：<input type="text" v-model="x">
    全名：<span>{{fullName}}</span>
</div>

const vm = new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三',
        x:'你好'
    },
    methods: {
	demo(){		
        }
    },
    computed:{
	fullName:{
	//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
	//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
            get(){
                console.log('get被调用了')
		// console.log(this) //此处的this是vm
		return this.firstName + '-' + this.lastName
            },
	//set什么时候调用? 当fullName被修改时。
            set(value){
		console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
		}
            }
        }
})
	</script>

computed的简写方式

//完整写法
 computed:{
    fullName:{
       get(){
         console.log('get被调用了')
         return this.firstName + '-' + this.lastName
    },
 }
 
 //简写方式
 computed:{
     fullName(){
         console.log('get被调用了')
         return this.firstName + '-' + this.lastName
     }
 }

计算属性（computed）与监视属性的对比（watch）

1. computed能完成的功能，watch都可以完成。
   
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
   

两个重要的小原则：
  1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
  2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。