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

关于 vue 的一个基础小问题?

  •  
  •   zooo · 2018-07-22 20:23:28 +08:00 · 3014 次点击
    这是一个创建于 2076 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <td><input type="checkbox" @click="handleChecked(index)" :checked="isChecked(index)"></td>

    methods: {
    isChecked: function(index) {
    return this.list[index].status;
    },
    }


    isChecked(index)函数是如何被驱动执行的?? 是不是当 list 数组发生改变就会执行??
    19 条回复    2018-07-23 10:53:29 +08:00
    zooo
        1
    zooo  
    OP
       2018-07-22 20:28:42 +08:00
    小白不懂,求解答
    zooo
        2
    zooo  
    OP
       2018-07-22 20:36:42 +08:00
    没有人吗?
    WilliamLin
        3
    WilliamLin  
       2018-07-22 20:37:10 +08:00 via Android
    @zooo watch 或 computed 了解下
    qiayue
        4
    qiayue  
       2018-07-22 20:43:08 +08:00
    我不懂 vue
    这是一个复选框,选中或者取消选中的时候执行 isChecked
    msputup
        5
    msputup  
       2018-07-22 20:48:33 +08:00
    :checked 其实是 v-bind:checked
    就是进行了动态绑定
    上面写的很清楚了,返回的是这个 VUE 组件列表某一项的 status ( true 或 false )
    你的前面还有一个点击事件 handleChecked(index)。
    应该还有一个事件方法,点击的时候,会改变 status 的值,false->true,true->false.
    msputup
        6
    msputup  
       2018-07-22 20:51:34 +08:00
    上面写错,是 vue 组件数据中列表的某一项。
    dixeran
        7
    dixeran  
       2018-07-22 20:56:19 +08:00 via Android
    isCheck 函数里面 log 一下呗。应该是组件的依赖项改变的时候会重新调用,列表项改变或者 list 改变的时候
    luob
        8
    luob  
       2018-07-22 21:19:37 +08:00
    isChecked 这个函数是不是有问题,它好像啥也没干吧
    zooo
        9
    zooo  
    OP
       2018-07-22 21:21:49 +08:00
    @WilliamLin 知道 computed,这是别人代码中的一部分,没看懂。
    @msputup 谢谢
    大概明白了,点击的时候,先执行前面一个绑定的事件 handleChecked 函数,之后还会执行 isChecked 函数,handleChecked 函数改变状态 status,之后 isChecked 函数获取状态。
    看书上没讲,v-bind:可以绑定到一个函数上,所以以为不可以。。。
    才学,所以不懂,之前基础也不好
    谢谢各位回答。
    luob
        10
    luob  
       2018-07-22 21:26:34 +08:00
    sorry, 看错(逃
    vue 都忘完了
    qiayue
        11
    qiayue  
       2018-07-22 21:29:28 +08:00
    果然,我靠猜的回答是错的
    zhzer
        12
    zhzer  
       2018-07-22 21:37:47 +08:00
    其实可以这么写
    :checked="list[index].status"
    noe132
        13
    noe132  
       2018-07-22 22:02:23 +08:00 via Android
    所有渲染访问到了的属性,值的改变都会触发重新渲染,无论是 method,还是 computed,跟踪的方式是访问到了 data 中某个属性定义的 getter。
    VDimos
        14
    VDimos  
       2018-07-22 22:23:53 +08:00 via Android
    input 标签 vue 进行了归一化处理的,实际上是 new
    了一个 Function 对象,然后监听了 input 相关的事件,然后用 call 或者 apply 调用这个函数
    zooo
        15
    zooo  
    OP
       2018-07-22 23:05:43 +08:00
    @noe132
    @VDimos
    谢谢回答
    SergeGao
        16
    SergeGao  
       2018-07-23 00:11:33 +08:00 via Android
    用 computed 确定可以?在 computed 里面是访问不到 this 的
    murmur
        17
    murmur  
       2018-07-23 08:10:23 +08:00
    个人感觉 vue 在处理这种函数绑定的时候绝对比想的要周全
    我在函数绑定里连 eval 这种东西都用过 处理特殊需求
    所以底线还是 vdom diff 毕竟 vdom 渲染一次性能也查不到哪里去 diff 坏了就麻烦了
    Stlin
        18
    Stlin  
       2018-07-23 08:30:16 +08:00
    @SergeGao #16 可以访问,但是不能传参
    leemove
        19
    leemove  
       2018-07-23 10:53:29 +08:00
    可以看看 vue 源码....实际上 vue 是通过 setter 来感知数据变化的,所以即使用 eval 也可以察觉.在渲染的时候触发 getter 来收集依赖.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2794 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 12:21 · PVG 20:21 · LAX 05:21 · JFK 08:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.