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的完整形式。


目录
相关文章
|
1天前
|
JavaScript API 开发者
Vue3自定义hooks
Vue3自定义hooks
5 0
|
1天前
|
JavaScript 编译器
Vue3之事件
Vue3之事件
4 0
|
1天前
|
JavaScript
Vue3之Props组件数据传递
Vue3之Props组件数据传递
5 0
|
1天前
|
JavaScript API
vue3组件注册
vue3组件注册
5 0
|
1天前
|
JavaScript API UED
Vue3中的Suspense组件有什么用?
Vue3中的Suspense组件有什么用?
17 6
|
1天前
|
JavaScript 前端开发 索引
Vue3基础之v-if条件与 v-for循环
Vue3基础之v-if条件与 v-for循环
7 0
|
1天前
|
JavaScript
Vue3基础之v-bind与v-on
Vue3基础之v-bind与v-on
10 0
|
1天前
|
JavaScript 测试技术 API
Vue3中定义变量是选择ref还是reactive?
Vue3中定义变量是选择ref还是reactive?
12 2
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
17 1
|
1天前
|
JavaScript 前端开发
vue2升级到vue3的一些使用注意事项记录(四)
vue2升级到vue3的一些使用注意事项记录(四)
13 0