Vue项目中调用watch数据时会遇到哪些问题?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
这个时候一定要在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数据时会遇到哪些问题的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。