解决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 DOM 学习第三章 内容表格
Feb 19 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js 获取时间间隔实现代码
May 12 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
JS代码实现页面切换效果
Jan 10 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 分页原理详解
2009/08/21 PHP
php实现的农历算法实例
2015/08/11 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
红米手机抢购的js代码
2014/03/10 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
java判断三位数的实例讲解
2019/06/10 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python内置函数property()如何使用
2020/09/01 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
实习单位接收函模板
2014/01/10 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
关于远足的感想
2015/08/10 职场文书