解决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中如何去掉空格的方法实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
下面小编就为大家分享一篇vue中v-for加载本地静态图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了详解Vue2.5+迁移至Typescript指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了详解Vue中watch对象内属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue动态属性数据绑定（v-bind指令）的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了Vue3实现登录表单验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
使用Vant完成DatetimePicker 日期的选择器操作
这篇文章主要介绍了使用Vant完成DatetimePicker 日期的选择器操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文主要介绍了Vue实现前后端完全分离的项目实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
安装nvm node版本管理器的操作方法(vue2.x迁移vue3.x)
这篇文章主要介绍了安装nvm node版本管理器(vue2.x迁移vue3.x)的操作方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-01-01
最新评论