vue2 - 计算属性，计算属性简写，监听属性，深度监听，监听属性简写，两个重要的小原则

1.计算属性

<div id="root">
    性：<input type="text" v-model:value="firstName"><br>
    名：<input type="text" v-model:value="lastName"><br>
    全名：<span>{{fullName}}</span>
  </div>

  <script>
    const vm=new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三"
      },
      //计算属性
      computed: {
        fullName: {
          //当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
          //get有缓存，一个页面多次调用时，只会读取一次，但数据发生改变时，页面会重新读取数据
          get(){
            console.log("get被调用了");
            return this.firstName+"-"+this.lastName;
          },
          //当数据(fullName)被修改时，set会被调用
          set(value){
            console.log("set被调用了");
            var array=value.split("-");
            this.firstName=array[0];
            this.lastName=array[1];
          }
        }
      }
    });
  </script>

简写(计算属性一般用于读取)：

      computed: {
        fullName(){
          return this.firstName+"-"+this.lastName;
        }
      }

 

2.监听属性

1.当被监视的属性变化时,，回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
    //第一种写法
    watch: {
      isHot: {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
          console.log('isHot被修改了', newValue, oldValue)
        }
      }
    }
  })
  //第二种写法
  vm.$watch('isHot', {
    immediate: true, //初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时。
    handler(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue)
    }
  })
</script>

 

3.深度监听

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
      numbers: {
        a: 1,
        b: 1,
        c: {
          d: {
            e: 100
          }
        }
      }
    },
    watch: {
      //1.监视多级结构中某个属性的变化
      'numbers.a': {
        handler() {
          console.log('a被改变了')
        }
      },
      //2.监视多级结构中所有属性的变化
      numbers: {
        deep: true,
        handler() {
          console.log('numbers改变了')
        }
      }
    }
  })
</script>

监听属性 简写

            watch:{
                //简写
                 isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue,this)
                }
            }


         vm.$watch('isHot',(newValue,oldValue)=>{
            console.log('isHot被修改了',newValue,oldValue,this)
        })

 

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