网站建设的必要性分析,自己建一个电商网站,公司装修工程,网站开发合同 保密条款#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 回顾watch引入watchEffectwatch、watchEffect对比注意事项总结 回顾watch
在介绍本节的内容之前我们还是先准备好本节使用的初始代码
templatediv classpersonh2攻击{{ gongji }}/h2h2防御{{ fangyu }}/h2button clickchangeG攻击点数加一/buttonbutton clickchangeF防御点数加一/button
/div/templatescript langts setup namePerson11import {ref} from vuelet gongji ref(0)let fangyu ref(0)function changeG(){gongji.value 1}function changeF(){fangyu.value 1}/scriptstyle scoped.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}/style运行结果如下
接下来我们表达我们的需求当攻击或者防御达到十点的时候给服务器发送请求 如果我们想要使用上节的watch进行实现
templatediv classpersonh2攻击{{ gongji }}/h2h2防御{{ fangyu }}/h2button clickchangeG攻击点数加一/buttonbutton clickchangeF防御点数加一/button
/div/templatescript langts setup namePerson11import {ref,watch} from vuelet gongji ref(0)let fangyu ref(0)function changeG(){gongji.value 1}function changeF(){fangyu.value 1}watch([gongji,fangyu],(newValue,oldValue){console.log(newValue,oldValue)})/scriptstyle scoped.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}/style运行结果如下 接下来我们从Value中获取新的攻击和防御
watch([gongji,fangyu],(Value){let [newG, newF] Valueif(newG10 || newF10){console.log(发送请求)}})当我们点击九次的时候没有反应 再点击一次就会发送请求了
引入watchEffect 在 Vue3 中watchEffect 是一个非常有用的函数用于监视响应式数据的变化并执行相应的副作用代码。与 watch 监视特定的数据源不同watchEffect 会自动追踪其内部的响应式数据并在这些数据变化时重新运行传入的函数。 上一段中如果我们想要监视多个数据使其更加方便那么watchEffect就展现了它的作用 import {ref,watch,watchEffect} from vuewatchEffect((){if(gongji.value10 || fangyu.value10){console.log(发送请求)}})下面依然是两张对比图片
watch、watchEffect对比
watchEffect可以立即运行一个函数
watch对比watchEffect 都能监听响应式数据的变化不同的是监听数据变化的方式不同 watch要明确指出监视的数据 watchEffect不用明确指出监视的数据函数中用到哪些属性那就监视哪些属性。 注意事项
避免在 watchEffect 中执行会引起无限循环的操作比如直接修改 state 中的属性。
如果需要手动清除 watchEffect可以将其返回的清除函数保存起来并在适当的时机调用。Vue3 中的 watchEffect 是一个强大而灵活的工具可以帮助我们更方便地处理响应式数据的变化并执行相应的副作用代码。
总结
合理的使用watch和watchEffect可以让我们的开发变得更加高效 挑战与创造都是很痛苦的但是很充实。
