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

翘阳啦

于 2022-06-29 09:41:22 发布

阅读量202

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qiaoyangla/article/details/125509306

版权

本文详细介绍了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 = nameArr[0]
        person.lastName = nameArr[1]
       }
     })

    //返回一个对象（常用）
    return {
      person,
    }
  }
}
</script>