计算属性computed 监视属性watch

计算属性：
定义：要用的属性不存在，要通过已有的属性计算得来（不能是变量）
原理：底层借助了Obejct.defaultProperty方法提供的getter和setter
get作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值，底层用的Object.defaultProps
get什么时候调用：1、初次读取fullName时，2、所依赖的数据发生变化时
优势：与methods相比，内部有缓存机制（复用），效率更高，使用方便
set作用:当fullName被修改时

computed:{
fullName:{
      get(){
        console.log("get被调用了")
        return this.firstName+'-'+this.lastName
      },
      //set作用:当fullName被修改时
      set(val){
        console.log("set被调用了")
        console.log(val)
      }
    }
    简写：**当只有get没有set时，可以采用简写**
    fullName：function(){
        console.log("get被调用了")
        return this.firstName+'-'+this.lastName
    }
    再简写：
     fullName(){
     	console.log("get被调用了")
        return this.firstName+'-'+this.lastName
    }
}
  

调用：

 <div>
    姓：<el-input type="text" v-model="firstName" placeholder=""></el-input><br/>
    名：<el-input type="text" v-model="lastName" placeholder=""></el-input><br/>
    全名：<span>{{ fullName }}</span> //注意调用的时候时fullName不是fullName（），因为fullName是属性，他的值是一个函数
  </div>
  

方法：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }，
  **下面是上面的简写**
   reversedMessage () {
    return this.message.split('').reverse().join('')
  }，
}

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

监视属性watch

 <div>a的值{{numbers.a}}</div>
 <div @click="numbers.a++">点我让a+1</div>

 data() {
        return {
            isHot:true,
            numbers:{
                a:1,
                b:2
            }
        }
    },

 watch:{
        isHot:{
            //handler什么时候调用：ishot发生改变时
            handler(newV,oldV){

            },
            immediate:true,//默认false，改为true，初始化时让handler执行
        },
        // 深度监视：
        // 1、vue中的watch默认不监视对象内部值的变化（这样是为了提高效率）  但vue监听，
        // 2、配置deep：true可以监视对象内部值改变
        // 备注：
        // 1、vue自身可以监测对象内部值的变化，但vue提供的watch默认不可以
        // 2、使用watch时根据数据的具体结构，决定是否采用深度监视
        "numbers.a":{//监视某一个属性，这个地方要加引号
            handler(){
                console.log("a变了")
            }
        },
        "numbers":{//监视多级结构中，某个属性的变化
            deep:true,
            handler(){
                console.log("a变了")
            }
        }，
        简写：**当不需要deep，immediate，只需要handler时就可以使用简写**
        isHot(newV,oldV){
        console.log(newV,oldV)
        }
    },

computed和watch区别：
1、computed能完成的watch都能完成
2、watch能完成的computed不一定能完成，例：watch可进行异步操作

当computed和watch都能实现，用computed，当涉及到异步时（setTimeout，ajax）只能用watch，因为computed有return，

重要原则：
1、被vue管理的函数(methods中的方法，computed中的属性（直接），watch)，最好写成普通函数，这样this指向vm或组件实例对象
2、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成尖头函数，这样this的指向才是vm或组件实例对象