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里面名称相同的属性。

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

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
凉白开<--2 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go3 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5