Vue3计算属性解读

最新推荐文章于 2024-08-13 09:40:14 发布

itFuml

最新推荐文章于 2024-08-13 09:40:14 发布

阅读量220

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_76905836/article/details/136995129

版权

本文介绍了Vue3中计算属性的工作原理，包括如何通过getter和setter实现自动更新，以及它与methods的比较。还提供了计算属性在实际项目中的应用示例，展示了如何定义、使用和修改计算属性以提高效率和调试便利性。

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

在Vue3中计算属性会在其依赖属性的值发生变化时，对属性的值进行自动更新，同时更新相关的DOM部分。通过Vue中导入computed来使用计算属性。实际上计算属性只能计算一个对象里面的属性的值，而不是随意的一个变量！

1.定义：要用的属性不存在，要通过已有的属性计算得来。
2.原理：底层借助了Object.definepeoperty方法提供的getter和setter
3.get函数什么时候执行？
        （1）.初次读取时会执行一次。
        （2）.当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
        1.计算属性最终会出现在vm上，直接读取使用即可。
        2.如果计算属性要被修改，那必须与set函数去响应修改，且set中要引起计算时依赖的数据发生变化。

案例：

使用computed完成计算属性操作：

<template>
<div id="app">
<p>输入姓：<input type="text" v-model="person.firstName"></p>
<p>输入名：<input type="text" v-model="person.lastName"></p>
<span>全名：{{info}}</span><br>
修改姓名：<input type="text" v-model="changeInfo">
</div>  
</template>

<script>
import { computed, reactive } from 'vue';

export default {
setup(){
  const person=reactive({//进行响应式定义一个对象
    firstName:'z',
    lastName:'l'
  })
  const info=computed(()=>{
    return person.firstName+'-'+person.lastName
  })

  const changeInfo=computed({//进行计算属性赋值操作
    get:()=>{
      return person.firstName+'-'+person.lastName
    },
    set:(val)=>{
      const arr=val.split('-')//使用split按照‘-’进行分割字符形成字符数组
      person.firstName=arr[0]
      person.lastName=arr[1]
    }
  })

  return{
    person,
    info,
    changeInfo
  }
}
}
</script>

注：在computed中，get是取值函数，set是赋值函数。