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

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

相关推荐
excel18 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel19 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript