setup中的计算属性和监视

最新推荐文章于 2023-04-18 11:32:36 发布

ikun不解释

最新推荐文章于 2023-04-18 11:32:36 发布

阅读量577

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42309685/article/details/119751185

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文深入探讨了Vue.js中的计算属性和监听属性。计算属性`fullName`展示了如何组合`firstName`和`lastName`，并提供了setter以更新这两个属性。另一方面，通过`watch`和`watchEffect`，我们了解了如何监听`user`对象的变化，实时更新`fullName`。两种方法分别演示了如何在变化发生时响应式地更新组件状态。

摘要由CSDN通过智能技术生成

setup中的计算属性和监视

计算属性

import { reactive, computed } from 'vue';

setup(){
  const user = reactive({
    firstName: "",
    lastName: ""
  })

  const fullName = computed({
    get(){
      return user.firstName + "_" + lastName;
    },
    set(val){
      const names = value.split("_");
      user.firstName = names[0];
      user.lastName = names[1];
    }
  })
}

监听属性

import { ref, reactive, watch, watchEffect } from 'vue';

setup(){
  const user = reactive({
    firstName: '',
    lastName: ''
  })

  const fullName = ref("");


  // 方法1
  watch(user, ()=>{
    fullName = user.firstName + "_" + user.lastName
  }, { immediate: true, deep: true });

  // 方法2
  watchEffect(()=>{
    fullName = user.fistName + "_" + user.lastName
  });

  return {
    user,
    fullName
  }
}