vue3 计算属性(computed)和监听属性(watch)的异同

计算属性(computed)

javascript 复制代码
//使用计算属性 {{fullName}}
//使用方法 {{fullName() }}

const firstName=ref("杰克")
const lastName=ref("麻子")
//计算属性
const fullName=computed(()=>firstName.value+"-"+lastName.value)
//方法
const fullName=()=>firstName.value+"-"+lastName.value

计算属性和方法比较?

相同:结果完全相同。

不同:计算属性值会基于其响应式依赖被缓存,一个计算属性仅会在其响应式依赖更新时才会重新计算。 方法调用总是会在重渲染发生时再次执行函数。比较消耗性能。
//计算属性只读,使用 fullName.value,其数据源可以修改(firstName,lastName)

监听属性(watch)

javascript 复制代码
//一--------监听字符串
let person=ref("")
watch(person,(newvalue,oldvalue)=>{})

//二------监听对象 
let person=ref({
		name:"张三",
		age:18
	})
/* watch(person,(newvalue,oldvalue)=>{
     console.log(newvalue,oldvalue) //当改变v-model的person.name值时,此时拿不到值,因为watch是一个浅层监听,需要深度监听。
}) **/
//开启深度监听
//① 监听某个特定的值,name
watch(()=>person.value.name,(newvalue,oldvalue)=>{})
//② 监听不确定哪一个值
watch(person,(newvalue,oldvalue)=>{},{deep:true},{immediate:true})
//immediate:true开启立即执行,立马拿到原数据

//三-------watchEffect 自动监听哪些数据发送改变
watchEffect(()=>{
	console.log(newvalue,oldvalue) //(只要数据源发生改变就会打印)
	})

区别

  • 计算属性函数必须有return函数,监听属性不必须。
  • .计算属性不能执行异步操作,watch允许在发生改变时执行异步操作或复杂的逻辑。
  • 计算属性是基于它们的依赖进行缓存的,只有依赖发生变化才会重新计算,watch没有缓存,数据发生改变 直接触发对应的事件。
  • computed可以自定义名称,而watch只能监听 props和data里面名称相同的属性。

计算属性适用于派生出新的数据,而监听属性适用于在数据变化时执行异步操作或复杂逻辑。

相关推荐
foxhuli2298 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔39 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺39 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear43 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息44 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript