vue3.x之计算属性与侦听器

计算属性

我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。

计算属性的用法

在vue3中计算属性的用法和在vue2中的不一样。

<template>
  <div>姓名:{{ fullname }}</div>
</template>

<script lang="ts">
//👀:需要什么导入什么
import { reactive,computed } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式属性
    const person = reactive({
      firstName:'安妮',
      lastName:'海瑟薇'
    });
    //2.定义计算属性
    const fullname = computed(()=>{
      return `${person.firstName}.${person.lastName}`;
    })
    console.log('fullname',fullname)
    return { person, fullname}
  }
}
</script>

效果如下：

从上述效果图中我们可以看出，计算属性返回的变量相当于是一个使用ref定义的响应式变量。需要通过.value来获取值。

计算属性的完整用法

const fullname = computed({ //输入一个包含set和get的配置对象
  get() {
    return `${person.firstName}·${person.lastName}`;
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [person.firstName, person.lastName] = newValue.split(' ')
  }
});

👀 计算属性除了定义可读，它也可以设置可写（不建议）。

计算属性的使用场景

我们一般使用计算属性都是对复杂的可读的属性想要响应式，只采用可读。

侦听器

和vue2一样，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。 由于vue3中数据分为基本类型和复杂类型的响应式数据，因此在使用watch监听的时候也分为以下几种。

watch监听ref

//👀:需要什么导入什么
import { ref,watch } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式属性
    const a = ref(0)
    const b = ref(0)
    //2.定义侦听器
    //监听单个ref
    watch(a,(newval)=>{
      console.log(`a is ${newval}`);
    })
    //使用getter监听
    watch(()=> a.value + b.value,(sum)=>{
      console.log(`sum of a + b is: ${sum}`)
    })
    //监听多个来源组成的数组
    watch([a, ()=>b.value],([newA, newy])=>{
      console.log(`a is ${newA} and b is ${newy}`);
      
    })
    return {}
  }
}

watch监听props属性

//👀:需要什么导入什么
import {watch } from 'vue'
export default {
  name: 'App',
  props:{name:{type:String,default:''}},
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup(props) {//1.定义侦听器
    //监听单个props
    watch(()=>props.name,(newval)=>{
      console.log(`name is ${newval}`);
    })
    return {}
  }
}

watch监听对象

watch监听对象的属性的时候需要用一个返回该属性的 getter 函数：

//👀:需要什么导入什么
import { reactive, watch } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式对象
    const person = reactive({
      name: ''
    })
    //2.定义侦听器
    //监听单个reactive对象
    watch(() => person.name, (newval) => {
      console.log(`name is ${newval}`);
    })
    return { person }
  }
}

如果用下列watch监听对象，必须是直接给person重新赋值才能被监听

//👀:需要什么导入什么
import { reactive, watch } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式对象
    const person = reactive({
      name: '',
      age: 18
    })
    //2.定义侦听器
    //监听单个reactive对象
    watch(() => person, (newval) => {
      console.log(`person is ${newval}`);
    })
    return { person }
  }
}

深度监听

如果想监听上述person对象，只要里面任意属性改变都能监听到的话，就需要使用深度监听。

//👀:需要什么导入什么
import { reactive, watch } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式对象
    const person = reactive({
      name: '',
      age: 18
    })
    //2.定义侦听器
    //监听单个reactive对象
    watch(() => person, (newval) => {
      console.log(`person is ${newval}`);
    }, { deep: true })
    return { person }
  }
}

即时监听

watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。那么就需要使用immediate: true来配置

//👀:需要什么导入什么
import { reactive, watch } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式对象
    const person = reactive({
      name: '',
      age: 18
    })
    //2.定义侦听器
    //监听单个reactive对象
    watch(
　　　　() => person, 
　　　　(newval) => {console.log(`person is ${newval}`);},
　　　　{deep: true, immediate:true}) 

　　return { person } 
　} 
}