解决Vue watch里调用方法的坑


Posted in Javascript onNovember 07, 2020

这里是说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里调用方法的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
node.js通过url读取文件
Oct 16 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 #Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 #Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 #Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 #Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
JS的反射问题
2010/04/07 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
深入理解Python变量与常量
2016/06/02 Python
python3操作mysql数据库的方法
2017/06/23 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python中的全局变量如何理解
2020/06/04 Python
基于python实现模拟数据结构模型
2020/06/12 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
十八大感想感言
2014/02/10 职场文书
政府四风问题整改措施
2014/10/04 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
python中pycryto实现数据加密
2022/04/29 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript