Vue语法之watch、watchEffect、cumputed监听区别

一、watch函数

1、watch特性

1）具有一定的惰性， 第一次页面展示的时候不会执行，只有数据变化的时候才会执行，但可以通过配置immediate为true指定初始时立即执行第一次

2）需要手动传入依赖

3）既要指明监视的属性，也要指明监视的回调

4）可以同时监听多个数据的变化

5）参数可以拿到值类型和引用类型属性的最新值和原始值

2、watch支持监视以下类型数据

1）ref定义的数据

监视ref定义值类型数据：在watch参数据可以直接写变量名，监视的是value值的变化

监视ref引用类型数据：在watch参数据可以直接写变量名，监视的是对象地址值，若地址不变化不会执行wath事件，若想监视内部属性值的变化，需要开启深度监视deep:true

2）recative定义的数据

监视reactive定义的引用类型数据，默认开启深度监视

3）箭头函数

支持仅监视引用类型某个属性值的变化

属性值是值类型数据：需要写成函数形式，比如箭头函数。

属性值是引用类型：可直接编写也可写成函数，但建议写成函数

 import {ref,reactive,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })

  let name=ref('张三')
   // 方法
  function changeName(){
    name.value+='~'
  }

  function changeAge(){
    person.value.age += 1
  }


  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }

  function test(){
    obj.a.b.c = 888
  }

  // 监视ref定义的【对象类型】数据，需要开启深度监视
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{deep:true})

  //监视ref定义的值类型数据
  watch(name,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  })

// 监视reactive定义的【对象类型】数据，默认已开启深度监视
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
  

二、watchEffect函数

1）页面的首次加载就会执行一次回调函数，来自动获取依赖

2）不需要指定监听的数据，组件初始化的时候就会执行一次用以收集依赖，而后收集到的依赖发生变化会再次执行

3）不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性

4）不需要手动传入依赖

5）无法获取到原值，只能得到最新值

// 监视 -- watchEffect实现
  watchEffect(()=>{
    if(temp.value >= 60 || height.value >= 80){
      console.log('给服务器发请求')
    }
  })

三、computed函数

1）支持缓存，只有依赖数据发生改变，才会触发computed函数，值没有改变不会被调用

2）函数必须有返回值，通过get写返回值，通过set设置值

 import {ref,computed} from 'vue'
  let firstName = ref('zhang')
  let lastName = ref('san')
  // fullName是一个计算属性，可读可写
  let fullName = computed({
    // 当fullName被读取时，get调用
    get(){
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    // 当fullName被修改时，set调用，且会收到修改的值
    set(val){
      const [str1,str2] = val.split('-')
      firstName.value = str1
      lastName.value = str2
    }