【Uniapp-Vue3】computed计算属性用法及方法对比
假如我们想要将两个相应式变量进行某种运算，就可以使用computed计算属性。比如下面这个例子中，输入名和姓合玉成名，可以用直接显示的方法：
https://i-blog.csdnimg.cn/direct/e91c346324a6442d91d2171cc6dc99d3.png
https://i-blog.csdnimg.cn/direct/39bd85c6105743a2a98c279799d95850.png
我们也可以使用computed属性：
import {computed} from "vue";
let 变量名 = computed(()=>{计算过程});
https://i-blog.csdnimg.cn/direct/fbcdd9bd0227476ebd197bde87f60df7.png
当然，我们也可以使用函数来实现这个结果：
https://i-blog.csdnimg.cn/direct/da23ea4b8a784f6e8ac368311ed21567.png
那么这两种方法有什么区别呢？
先来看用函数返回的情势：
https://i-blog.csdnimg.cn/direct/f88e9f56147f4250b605a3fd9967ef0f.png
我运算结果会弹出很多次“计算fullName” 。
https://i-blog.csdnimg.cn/direct/d0bd5312ba0e436b9d80e3c7a4f00277.png
我们在使用computed的情况下来看看：
https://i-blog.csdnimg.cn/direct/ed43ba0d9df84a2da140dd0f3d0d3920.png
很明显，输出“计算fullName”的次数少了很多。
https://i-blog.csdnimg.cn/direct/e0d5867345a9446db27e361fa70347d9.png
以是我们可以得出结论，使用computed能够缓存，也就是说我们在DOM上渲染3次计算属性值，都只会触发一次，因为有缓存。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]