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

Vue 里的$如何理解

  •  
  •   imherer · 2018-11-08 17:24:49 +08:00 · 15405 次点击
    这是一个创建于 2208 天前的主题,其中的信息可能已经有所发展或是发生改变。

    后端出身,偶尔兼职写写前端

    如下代码:

    new Vue({
      el: '#app',
      router,
      store,
      i18n,
      test,
      render: h => h(App)
    })
    
    // 用的时候
     this.$store.dispatch(xxx)
    
    

    这里的 $store 是不是仅仅是 vue 里的一种命名方式而已?只要我在 new Vue 里初始化的了的,都可以用$+name 来调用

    例如上面的$test,$i18n

    17 条回复    2018-11-08 21:31:36 +08:00
    swaggeek
        1
    swaggeek  
       2018-11-08 17:29:03 +08:00
    $的话,看文档的介绍,是内部函数的一种特殊命名方式。
    imherer
        2
    imherer  
    OP
       2018-11-08 17:32:56 +08:00
    @swaggeek 文档里的$在哪里呢,没找到😂
    wildnode
        3
    wildnode  
       2018-11-08 17:33:03 +08:00   ❤️ 1
    我理解的 $ 只是一种约定俗成的明明方式,表示这个属性或者方法存在于 Vue 实例的原型上:

    比如 $store 也是 Vuex 源码中挂载到 Vue 根实例上去的
    wildnode
        4
    wildnode  
       2018-11-08 17:33:20 +08:00
    明明 => 命名
    swaggeek
        5
    swaggeek  
       2018-11-08 17:34:28 +08:00   ❤️ 1
    @imherer 你看 API,vue 内部的实例方法,都是$开头的。具体介绍的我忘记在哪里看的了,现在一时找不到
    c9y
        6
    c9y  
       2018-11-08 17:37:46 +08:00 via Android   ❤️ 1
    我的理解是:表示 私有,因为你定义的方法也会在实例的 this 链里。
    nealv2ex
        7
    nealv2ex  
       2018-11-08 17:40:18 +08:00   ❤️ 1
    https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95

    > 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
    swaggeek
        8
    swaggeek  
       2018-11-08 17:43:15 +08:00
    @nealv2ex 是的,就是在这里看到的
    swaggeek
        9
    swaggeek  
       2018-11-08 17:43:52 +08:00
    @imherer 看一下 7 楼老哥的,就是在里面有介绍
    shintendo
        10
    shintendo  
       2018-11-08 17:53:30 +08:00
    简单回答楼主的关键问题:你传的 store 和它自己的$store 只是碰巧同名,你传进去的变量可以是任何名字
    zhzer
        11
    zhzer  
       2018-11-08 17:58:09 +08:00 via Android
    一般指代特殊变量,dom 对象,私有方法之类的
    就是约定俗成,我通常用来标记 dom 用
    imherer
        12
    imherer  
    OP
       2018-11-08 18:21:45 +08:00
    @shintendo 那 this.$store 这里的$store 对应的是就是我上面传进去的 store 了?
    还有我上面还传了一个 test,那我可以 this.$test 这样使用吗?
    imherer
        13
    imherer  
    OP
       2018-11-08 18:23:15 +08:00
    @swaggeek 文档里这样说的 “除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来”
    那我自己可以新增吗? 例如上面我在 new Vue 的时候传入了 test,我可以 this.$test 这样使用吗?还是$只能是 Vue 定义好的?
    lrz0lrz
        14
    lrz0lrz  
       2018-11-08 19:27:31 +08:00   ❤️ 1
    @imherer #12 不可以,你可以把 this.$store 与 store 当成完全不同的东西。
    如果想要自己新增,可以通过 Vue.prototype.$xxx 的方式添加。
    之所以前面加 $,只是为了不与用户定义的属性冲突而已。
    shintendo
        15
    shintendo  
       2018-11-08 20:39:03 +08:00   ❤️ 1
    @imherer 可以自己新增,但不是通过传入 new Vue,而是通过手动赋值:Vue.prototype.$test = test
    比如最常见的 Vue.prototype.$http = axios
    asdf123101
        16
    asdf123101  
       2018-11-08 20:47:15 +08:00 via Android
    纯粹是约定,并不表示特殊含义
    Trim21
        17
    Trim21  
       2018-11-08 21:31:36 +08:00 via Android   ❤️ 1
    你也可以在 data 里用$前缀,不过不会被代理…

    https://cn.vuejs.org/v2/api/#data
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2659 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 15:24 · PVG 23:24 · LAX 07:24 · JFK 10:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.