解决Vue watch里调用方法的坑
这里是说watch调用methods里方法的时候，页面经常会报找不到方法
这个时候一定要在watch里去输出一下this，
看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。
例如
正常情况下用this.functionname()就可以调用了。
但是在一些情况下（现在本人还没找到原因）在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层，所以使用方法的时候就会变成 this.a.methods.funtionname()
原因还在找，不过解决办法先记下来。
补充知识：使用 Vue 的最佳做法---不要在“created”和“watch”中调用方法
我就废话不多说了，大家还是直接看代码吧~
watch: {
params: {
handler: function (val, oldVal) {
if (val == '1') {
this.initTableData()
}
},
deep: true
},
property: {
immediate: true,
handler: function (val, oldVal) {
this.initTableData()
},
},
},
Vue开发人员经常犯的一个错误是他们不必要地在created和watch中调用方法。 其背后的想法是，我们希望在组件初始化后立即运行watch。
// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }
但是，Vue为此提供了内置的解决方案，这是我们经常忘记的Vue watch属性。
我们要做的就是稍微重组watch并声明两个属性：
1.handler (newVal, oldVal)-这是我们的watch方法本身。
2. immediate: true- 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
// 好的做法
methods: {
handleChange() {
// stuff happens
}
},
watch () {
property {
immediate: true
handler() {
this.handleChange()
}
}
}
以上这篇解决Vue watch里调用方法的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章给大家介绍了vue封装公共方法的实现,文章中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
Vue是当今增长最快的前端框架,Vue 平易近人、用途广泛且性能卓越,它的语法非常直观,并且具有友好的学习曲线,是开发人员最想学习的顶级前端库之一,下面这篇文章主要给大家介绍了关于vue管理系统项目中的一些核心技能,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了如何修改vue-treeSelect的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue3全局导入bootstrap5方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vuecli4插件svg-sprite-loader使用svg图标
这篇文章主要为大家介绍了vuecli4插件svg-sprite-loader使用svg图标示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了vue项目的访问端口及其设置方式，具有很好的参考价值，希望对大家有所帮助。2022-10-10
这篇文章主要介绍了Vue echarts封装的实现，Echarts，它是一个与框架无关的JS图表库，但是它基于JS，这样很多框架都能使用它2023-01-01
这篇文章主要介绍了vue2.x中的provide和inject用法小结,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要介绍了在Vue中使用axios请求拦截,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
最新评论