Vue3中computed的用法

简介: Vue3中computed的用法

computed又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当无关值变化时,不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。

一、computed简写形式

<template>
  <div>
    <div>姓:<input type="text" v-model="per.surname"></div>
    <div>名:<input type="text" v-model="per.name"></div>
    <div>姓名:<input type="text" v-model="per.fullName"></div>
  </div>
</template>
<script>
import { computed, reactive } from 'vue'
export default {
  setup(){
    let per=reactive({
      surname:'勇敢',
      name:'小陈'
    })
    per.fullName=computed(()=>{
      return per.surname+'~'+per.name
    })
    return{
      per
    }
  }
}
</script>
<style>
</style>

当我们动态的去更改surname或name时,都会引起fullName的改变。

二、computed的完整形式

       为什么说是computed的完整形式呢,因为computed的简写形式只是单独的完成了读的功能,而没办法去更改surname和name的值,下面我们进行computed的完整形式。

        当我们动态的去更改surname或name时,都会引起fullName的改变。
二、computed的完整形式
        为什么说是computed的完整形式呢,因为computed的简写形式只是单独的完成了读的功能,而没办法去更改surname和name的值,下面我们进行computed的完整形式。


目录
相关文章
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
1天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
|
7天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
22 9
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
6天前
|
JavaScript 调度
Vue3 使用 Event Bus
Vue3 使用 Event Bus
11 1
|
7天前
|
JavaScript
Vue3 : ref 与 reactive
Vue3 : ref 与 reactive
9 1
|
8天前
|
JavaScript
|
6天前
Vue3 使用mapState
Vue3 使用mapState
10 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
3天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem