V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ye22st
V2EX  ›  程序员

在 vue 里面到底哪种写法比较规范?

  •  
  •   ye22st · 2020-06-27 16:07:31 +08:00 · 3845 次点击
    这是一个创建于 728 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我看到很多项目里面对于 this 指向的写法都是 let self = this; 有些人跟我说就这样写,有些人又说这种写法不规范? 请教一下 V 站的大佬,哪种比较规范?

    43 条回复    2020-06-29 10:10:17 +08:00
    nianyu
        1
    nianyu  
       2020-06-27 16:50:53 +08:00   ❤️ 1
    let self = this 没问题,以前很多库的源码都是这么写的,这东西无所谓的
    ujued
        2
    ujued  
       2020-06-27 16:56:14 +08:00 via iPhone   ❤️ 1
    let forClosure = this
    loading
        3
    loading  
       2020-06-27 16:57:24 +08:00 via Android   ❤️ 1
    let that=this
    或者
    let _this=this
    sagaxu
        4
    sagaxu  
       2020-06-27 16:59:35 +08:00 via Android   ❤️ 1
    写 const 也行
    Biwood
        5
    Biwood  
       2020-06-27 17:04:44 +08:00   ❤️ 11
    既然已经用 let 关键字了,那么完全可以用箭头函数来规避这种语法,我反正是从写 ES6 开始很久都没这么写了,除非你有什么特殊需求?
    Hanggi
        6
    Hanggi  
       2020-06-27 17:12:11 +08:00   ❤️ 5
    这个问题上次不是都说了嘛:


    const 这个 = this;

    这个.submit();
    qyc666
        7
    qyc666  
       2020-06-27 17:51:59 +08:00 via iPhone   ❤️ 1
    为什么不用箭头函数
    seeker
        8
    seeker  
       2020-06-27 18:05:38 +08:00   ❤️ 1
    哪那么多讲究的,我都是 `const this2 = this`
    ChanKc
        9
    ChanKc  
       2020-06-27 18:09:00 +08:00   ❤️ 1
    箭头函数,self,that 都可以
    xxx749
        10
    xxx749  
       2020-06-27 18:14:15 +08:00 via Android   ❤️ 1
    const context = this
    Trim21
        11
    Trim21  
       2020-06-27 18:21:57 +08:00 via Android   ❤️ 1
    我之前看人用的 vm
    zhuangzhuang1988
        12
    zhuangzhuang1988  
       2020-06-27 18:30:52 +08:00   ❤️ 1
    自己怎么爽怎么 来..
    ChanKc
        13
    ChanKc  
       2020-06-27 18:32:12 +08:00   ❤️ 2
    @Trim21 vm 就只在 Vue 的场景下比较合适,没有 that 或者 self 通用
    ye22st
        14
    ye22st  
    OP
       2020-06-27 18:41:08 +08:00
    好的,谢谢各位大佬解答。
    BXGo
        15
    BXGo  
       2020-06-27 18:43:15 +08:00 via Android
    有文档规范
    mxT52CRuqR6o5
        16
    mxT52CRuqR6o5  
       2020-06-27 18:50:00 +08:00 via Android
    没有那种最规范,看团队怎么规定
    SilentDepth
        17
    SilentDepth  
       2020-06-27 19:51:10 +08:00
    没见过有规范明确要求这样处理 this 。只要不产生歧义,并且你(和你的协作者)清楚 this 在代码中的实际指向,怎么写着爽怎么来。
    surfwave
        18
    surfwave  
       2020-06-27 19:53:15 +08:00
    用箭头函数啊
    Lxxyx
        19
    Lxxyx  
       2020-06-27 20:00:04 +08:00
    一直用的 ctx 。

    ```js
    const ctx = this;
    ```
    ppgs8903
        20
    ppgs8903  
       2020-06-27 20:09:54 +08:00
    let that = this
    其他都容易冲突,self 用在 类 CLASS 的方案里面,不建议
    ChanKc
        21
    ChanKc  
       2020-06-27 20:38:04 +08:00
    @ppgs8903 这个怎么说?
    zhuisui
        22
    zhuisui  
       2020-06-27 20:58:14 +08:00   ❤️ 1
    @ChanKc 比如 self 在 webpack 被导出作为 this 的别名是很常见的,所以认为它应该是 window 的别名
    Vegetable
        23
    Vegetable  
       2020-06-27 21:45:23 +08:00
    变量名还有啥规范,纯粹一点好吗,何况现在有箭头函数
    ChanKc
        24
    ChanKc  
       2020-06-27 23:00:04 +08:00
    wish8023
        25
    wish8023  
       2020-06-27 23:22:48 +08:00 via Android
    建议用 ES6 语法,在现代浏览器,基本都可用了。
    WilliamLin
        26
    WilliamLin  
       2020-06-28 08:18:23 +08:00
    let _this = this
    hitaoguo
        27
    hitaoguo  
       2020-06-28 09:07:48 +08:00
    能不要新定义个变量就不要定义,这样能加深你对 this 指向的理解。
    大部分情况下用箭头函数就能解决。
    除非说在函数里面有它自己的 this 需要用到,同时还需要外部的 this,那么写 vue 的话我一般是 let vm = this 。
    gitjavascript
        28
    gitjavascript  
       2020-06-28 09:35:44 +08:00
    反正 let 肯定是不好的
    guanhui07
        29
    guanhui07  
       2020-06-28 09:38:19 +08:00
    _this 或
    that 用的人比较多
    cz5424
        30
    cz5424  
       2020-06-28 10:29:39 +08:00
    建议改成 ES6,不用 this 。this 真烦
    TomatoYuyuko
        31
    TomatoYuyuko  
       2020-06-28 10:30:42 +08:00
    见过用 entity = this 的也不错,
    Junh
        32
    Junh  
       2020-06-28 10:32:16 +08:00 via iPhone
    这好像和 vue 没什么关系吧
    optional
        33
    optional  
       2020-06-28 11:08:43 +08:00
    为啥是 let ? 这里显然应该用 const
    `
    const self = this
    const $this = this
    const _this = this
    ·
    Tdy95
        34
    Tdy95  
       2020-06-28 11:17:09 +08:00
    业务代码里面使用箭头函数,保证 this 指向不丢失即可。

    vue 的生命周期等方法调用的时候都帮你把 this 实例注入了好了
    wobuhuicode
        35
    wobuhuicode  
       2020-06-28 11:19:58 +08:00   ❤️ 2
    其实写习惯了 C 系列语言都喜欢 let self = this
    写习惯 java 的估计就喜欢 let that = this
    写习惯前端的都喜欢用箭头函数。
    xiangyuecn
        36
    xiangyuecn  
       2020-06-28 12:27:44 +08:00
    This
    Martox
        37
    Martox  
       2020-06-28 14:02:12 +08:00
    let that = this
    soulmt
        38
    soulmt  
       2020-06-28 14:04:27 +08:00
    我就觉得很 low 多此一举不是么
    soulmt
        39
    soulmt  
       2020-06-28 17:32:09 +08:00
    @hitaoguo 对,如果不是为了区分 2 个 this 不一致, 完全没必要申明一个新的;
    sunwang
        40
    sunwang  
       2020-06-28 17:36:55 +08:00
    有了箭头函数就没用过这个写法了
    kinghly
        41
    kinghly  
       2020-06-28 17:42:08 +08:00 via Android
    先要明白为什么这么写,可以看下 js 闭包。let 、const 、()=>{}不是万能的。
    ghosthcp516
        42
    ghosthcp516  
       2020-06-28 18:05:41 +08:00
    要么用箭头函数,如果要写兼容代码请用 var self = this,你这个等于是缝合怪写法
    ryanlid
        43
    ryanlid  
       2020-06-29 10:10:17 +08:00
    在浏览器中,self 是有值的,指向当前 window 对象的引用。

    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/self
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2493 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 07:20 · PVG 15:20 · LAX 00:20 · JFK 03:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.