08计算属性

<template>
  <div>
    <h1>计算属性</h1>
  </div>
  <h5>插值语法实现</h5>
  <hr/>
  <div id="root">
    姓： <input type="text"
              v-model="firstName"
    >
    <br/><br/>
    名： <input type="text"
              v-model="lastName"
    >
    <br/><br/>
    <!-- 第0位第1位，第二2，不包含第3位 -->
    姓名：<span>{{firstName.slice(0,3).toUpperCase()}}-{{lastName}}</span>
  </div>
  <hr/>
  <h5>methods实现</h5><hr/>
  <div id="root">
    姓： <input type="text"
              v-model="firstName"
    >
    <br/><br/>
    名： <input type="text"
              v-model="lastName"
    >
    <br/><br/>
    <!-- 第0位第1位，第二2，不包含第3位 -->
    姓名：
    <span>
      <!-- 不加（）是把函数展示在上面function () { [native code] } -->
      {{fullName()}}
      <!-- <button v-on:click="fullName()">点我</button> -->
    </span>
  </div>
  <hr/>
  <h5>计算属性实现</h5><hr/>
  <div id="root">
    姓： <input type="text"
              v-model="firstName"
    >
    <br/><br/>
    名： <input type="text"
              v-model="lastName"
    >
    <br/><br/>
    测试： <input type="text" v-model="x">
    <br/><br/>
    姓名：
    <span>
      {{fullName1}}
    </span>
    <br/><br/>
    姓名：
    <span>
      {{fullName1}}
    </span>
    <br/><br/>
    姓名：
    <span>
      {{fullName1}}
    </span>
  </div>
  Property(属性)  or   method(方法) 就是data里面写的东西都是属性
  <hr/>
  <h5>watch监视属性</h5><hr/>
  <div id="root">
    姓： <input type="text"
              v-model="firstName"
    >
    <br/><br/>
    名： <input type="text"
              v-model="lastName"
    >
    <br/><br/>
    姓名：
    <span>
      {{fullName2}}
    </span>
    <br/><br/>
  </div>
    <br/><br/>

计算属性：<hr/>
    1.定义:要用的属性不存在,要通过已有的属性计算得来。(不能是随便的一个变量比如脱离了vm的管理)<hr/>
    2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。<hr/>
    3.get函数什么时候执行?<hr/>
          (1).初次读取时会执行一次<hr/>
          (2).当依赖的数据发生改变时会被再次调用<hr/>
    4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调用方便。<hr/>
    5.备注:<hr/>
            1.计算属性最终会出现在vm上,直接读取使用即可。<hr/>
            2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变<hr/>
    <h3>
      computer 和 watch之间的区别<hr/>
        1.computed能完成的功能, watch都可以完成。<hr/>
        2.watch能完成的功能, computed不一定能完成, 例如: watch可以进行异步操作。<hr/>
      两个重要的小原则<hr/>
        1.所被Vue所管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。<hr/>
        2.所有不被Vue所管理的函数,(定时器的回调函数,ajax的回调函数,Promise的回调函数成功失败等)最好写成箭头函数。<hr/>
        这样this的指向才是vm 或 组件实例对象。<hr/>
    </h3>
</template>
<script>
// import  01_初始Vue  from './components.';
export default {
//data的第二种写法:函数式
  data() { 
    // console.log('@@@',this);
    return { 
      firstName:'张',
      lastName:'三',
      x:'你好',
      fullName2:'',
    
    }
  },
  methods:{
    fullName () {
      console.log('@--fullName'); // 上来就会调用， 只要改动就会重新调用(只要data中的数据改动，就会重新解析模板)
      return this.firstName + '--' + this.lastName
    }
    
  },
  computed: {
    fullName1: {
      // get有什么作用？ 当有人读取fullName时，get就会被调用， 且返回值就作为fullName1的值
      // get什么时候调用？ 1.初次读取fullName时。2.所依赖的数据发生变化时。
      get () {
        console.log('get被调用了')
        // console.log(this) //此处的this是vm
        return this.firstName + '---' + this.lastName
      },
      // set什么时候调用， 当fullName1被修改的时候。
      set (value) {
        console.log(value)
        const arr = value.split('-')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }

    },
    //简写 当get用   (只考虑读取，不考虑修改的时候才能用简写的方式。)
    // fullName:function () {
    //   console.log('get被调用了')
    //   return this.firstName + '---' + this.lastName
    // }
  },
  watch: {
    firstName (newValue,oldValue) {
      console.log(newValue,oldValue)
      // this.fullName2 = newValue  + '----' + this.lastName
     setTimeout(() => {
      this.fullName2 = newValue  + '----' + this.lastName
     }, 1000);
    },
    lastName(newValue){
      this.fullName2 = this.firstName + '----' + newValue
    }
  }

  
}
</script>
<style scoped>
</style>