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