Vue核心 计算属性 侦听属性

计算属性 computed

• 定义：要用的属性不存在，需要通过已有属性计算得来

• 原理：底层借助了objcet.defineproperty()方法提供的 getter和setter

• get函数什么时候执行?
  a、初次读取时会执行一次
  b、当依赖的数据发生改变时会被再次调用

• 优势：与methods 实现相比，内部有缓存机制(复用)，效率更高，调试方便

• 备注：
  a、计算属性最终会出现在vm上，直接读取使用即可
  b、如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  c、如果计算属性确定不考虑修改，可以使用计算属性的简写形式

<template>
    <div class="hello">
      <h1>{{ number }}</h1>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ComputedAndWatch',
    data(){
      return {
       num:1
      }
    },
    computed:{
        //完整写法
        // number:{
        //     get(){
        //         return this.num+10
        //     },
        //     set(value){
        //         this.num = value
        //     }
        // },
        // 简写
        number(){
            return this.num*10
        }
    }
  }
  </script>

侦听属性 watch

• 当被监视的属性变化时，回调函数自动调用，进行相关操作
• 监视的属性必须存在，才能进行监视，既可以监视data，也可以监视计算属性
• 配置项属性
  immediate:false，改为true，则初始化时调用一次handler(newValue,oldValue)
• 4．监视有两种写法
  a．创建Vue时传入watch: {}配置
  b．通过vm.$watch()监视

<template>
    <div class="hello">
      <h1>{{ number }}</h1>
      <input type="button" @click="changeNum" value="增加">
    </div>
  </template>
  
  <script>
  export default {
    name: 'ComputedAndWatch',
    data(){
      return {
       num:1
      }
    },
    methods:{
        changeNum(){
            this.num += 1;
        }
    },
    watch:{
        // 完整写法
        // num:{
        //     immediate:true,
        //     handler(newValue,oldValue){
        //         console.log(newValue,oldValue);
        //     }
        // }
        // 简写
        num(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    }
  }
  </script>
  
  

深度侦听

• Vue中的watch默认不监测对象内部值的改变(一层)
• 在watch中配置deep:true可以监测对象内部值的改变（多层)
• Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
• 使用watch 时根据监视数据的具体结构，决定是否采用深度监视

 watch:{
   // 完整写法
    num:{
        immediate:true, // 初始化时调用一次
        deep:true, // 开启深度监视
        handler(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    }
}

计算属性VS侦听属性

computed和watch之间的区别

• computed能完成的功能，watch都可以完成
• watch 能完成的功能，computed不一定能完成，例如watch可以进行异步操作

两个重要的小原则

• 所有被Vue管理的函数，最好写成普通函数，这样 this的指向才是vm或组件实例对象
• 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象