computed和watch

简介: computed和watch

1、模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性

计算属性与methods区别:

computed是带缓存的,如果被依赖的变量不发生变化,则下次调用computed时不会重新计算结果。但是methods则是每次调用都会重新运行以得出实时的结果。

methods调用需要加()

import { computed, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    const computed = computed(() => {
      return count.value * 2;
});

2、

侦听属性,(有两个参数,new,old,分别代表改变后和改变前的值)

侦听属性的命名,必须是data,computed,props中的变量名

(计算属性监测的是某个值的依赖的变化,侦听属性监测的是值自身的变化)

import { computed, watch, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
watch( count , ()=>{
// 逻辑代码
    })
    return { count, computed };
  },
};
相关文章
|
PyTorch API 算法框架/工具
SWA(随机权重平均) for Pytorch
SWA(随机权重平均) for Pytorch
704 0
|
存储 Shell Android开发
Android--adb命令查看第三方应用包名、应用activity名
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/78038767 (adb s...
5025 0
|
12月前
|
安全 网络安全 数据安全/隐私保护
HTTPS中的加密算法
HTTPS中的加密算法
|
Linux Shell 开发工具
Linux 下通过nvm 安装node,并进行版本管理
Linux 下通过nvm 安装node,并进行版本管理
420 1
|
编解码 小程序 算法
自己动手写RTP服务器——关于RTP协议
本文会带领着你一步步动手实现一个简单的RTP传输服务器,旨在了解RTP流媒体传输协议以及一些关于多媒体编解码的知识。   关于RTP协议的必备知识 要动手实现一个协议,当然首先需要阅读该协议的文档。
1998 0
|
前端开发 JavaScript 开发者
【chatgpt谈前端三大主流框架】React、Vue和Angular的优缺点及如何选择
chatgpt号称无所不能,今天我们就来考考他,让他来对比下React、Vue和Angular。
467 0
|
小程序 数据格式
微信小程序事件通道使用教程
微信小程序事件通道使用教程
|
JSON JavaScript 小程序
小程序和Vue写法的区别
小程序和Vue写法的区别
(4)(4.6.6) 罗盘校准
(4)(4.6.6) 罗盘校准
304 0
|
机器学习/深度学习 人工智能 编解码
Nightcafe Creator:AI绘画艺术图片生成器
Nightcafe Creator:AI绘画艺术图片生成器
1149 0