【Vue3】computed计算属性和watch监视

最新推荐文章于 2024-09-23 22:06:56 发布

原创

最新推荐文章于 2024-09-23 22:06:56 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了Vue3中的computed、watch和watchEffect的使用方法及其与Vue2的区别。通过实例展示了如何定义计算属性、监听数据变化以及响应式回调的触发条件。同时，探讨了watchEffect在关注过程而非计算结果时的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed函数

与Vue2.x中computed配置功能一致
写法：

<template>
     <h1>一个人的信息</h1>
     姓：<input type="text" v-model="person.firstName">
     名：<input type="text" v-model="person.lastName">
     <br>
     <span>全名：{
  
  {person.fullName}}</span>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  name: 'HelloWorld',
  
  setup(){
    //数据
    let person = reactive({
      firstName:'张',
      lastName:'三'
    })
     
    //计算属性(简写 没有考虑计算属性被修改的情况)
     person.fullName = computed(()=>{
        return person.firstName +'-'+person.lastName
      })
     //计算属性（完整写法  考虑读和写）
     person.fullName = computed({
       get(){
         return person.firstName +'-'+person.lastName
       },
       set(){
        const nameArr = value.split('-')
        person.firstName =