vue3----计算属性，监听,watchEffect

1.计算属性和vue2区别不大，有返回值就行了

setup() {

    const personName = reactive({

      firstName: "蛋",

      lastName: "铁",

    });

    const fullName = computed(() => personName.lastName + personName.firstName);

    return { fullName };

  },

2.计算属性的高级写法，get和set,这种方法不常用

const fullName = computed({
      get(){
        return personName.lastName + personName.firstName
      },
      set(newval){
        personName.lastName = newval
      }
})


//调用set方法
<button @click="fullName = '刘'">点击</button>

3watch

监听分两种，当监听一个数组时，语法为watch(变量，（新值，老值） => {})

const num1 = ref(10);

const num2 = ref(20);

// 监听单个数据变化

// 语法1：watch(变量，（新值，老值） => {})

watch(num1,(newval, oldval) => {

console.log(`新值是${newval}，老值是${oldval}`)

})

当监听多个数据时，语法为watch([变量1，变量2]，（新值，老值） => {})

// 监听多个数据变化

// 语法2：watch([变量1，变量2]，（新值，老值） => {})

// 新值和老值都是要给数组，表示各个变量的新值或老值

watch([num1,num2], (newval, oldval) => {

// newval和oldval都是数组

console.log(`新值是${JSON.stringify(newval)}，老值是${JSON.stringify(oldval)}`)

})

4.当监听引用数据类型时，

// 监听引用数据类型变化，vue2需要开启深度监听，vue3不需要，默认就是

 setup() {
    const person = reactive({
      name: "zs",
      age: "20",
      info: {
        phone: 18856697905,
        score: 75
      }
    });
    // 监听引用数据类型变化，vue2需要开启深度监听，vue3不需要，默认就是
    // 因为是引用数据类型，新值和老值是一样的，没有老值的必要
    watch(person, (newVal) => {
        console.log(newVal)
    })
    // 监听对象里面某个属性的变化
    // watch(() => 对象.属性, (新值，老值) => {})
    watch(() => person.age, (newVal, oldVal) => {
        console.log(`年龄的新值是${newVal}老值是${oldVal}`)
    })
    // 监听对象里面多个属性的变化
    // watch([() => 对象.属性, () => 对象.属性],(新值，老值) => {})
    // 新值和老值就又是数组了，表示每个属性的新值和老值
    watch([() => person.age, () => person.name], (newVal, oldVal) => {
        console.log(`新值是${newVal}老值是${oldVal}`)
    })
    // 小坑：监听对象里某个属性（且该属性的值是引用数据类型）变化，则需要开启deep为true
    // watch(监听内容，处理函数，配置对象)
    watch(() => person.info, (newVal) => {
        console.log(newVal)
    }, {
        deep: true,
        // immediate: true
    })
    return {
      person,
    };
  },

5.watchEffect

watchEffect开始就执行一次,监听函数用到哪些变量，只要这些变量变化就会执行监听函数

watchEffect(() => {

console.log(person)

console.log(person.name) //只改变就会触发

})

vue3----计算属性，监听,watchEffect

猜你喜欢