Vue源码之 $set

太过爱你忘了你带给我的痛 2023-08-17 16:41 119阅读 0赞

v-model属性在render函数中是下面这样的

on: {
        "input": function($event) {
            if ($event.target.composing) return;
            $set(obj, "name", $event.target.value)
        }
    }

意思也就是，第一次input事件的时候，调用$set，而set

function set (target, key, val) {
            if (isUndef(target) || isPrimitive(target)
            ) {
                warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target))));
            }
            if (Array.isArray(target) && isValidArrayIndex(key)) {
                target.length = Math.max(target.length, key);
                target.splice(key, 1, val);
                return val
            }
            if (key in target && !(key in Object.prototype)) {
                target[key] = val;
                return val
            }
            var ob = (target).__ob__;
            if (target._isVue || (ob && ob.vmCount)) {
                warn(
                    'Avoid adding reactive properties to a Vue instance or its root $data ' +
                    'at runtime - declare it upfront in the data option.'
                );
                return val
            }
            if (!ob) {
                target[key] = val;
                return val
            }
            defineReactive$$1(ob.value, key, val);
            ob.dep.notify();
            return val
        }

注意红色字体，所以用v-model的话，没必要再在初始化的时候用$set绑定属性，但是注意紫色字体，不要在input事件之前给obj.name赋值，否则不会响应，非要赋值就提前用$set赋值

转载于:https://www.cnblogs.com/chuliang/p/11392736.html

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue源码之 $set

v-model属性在render函数中是下面这样的 on: { "input": function($event) { if

太过爱你忘了你带给我的痛/ 2023年08月17日 16:41/ 0 赞/ 120 阅读

相关 kubectl源码分析之config set

欢迎关注我的公众号： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHhwamF2Y

谁借莪１个温暖的怀抱￠/ 2023年02月21日 11:40/ 0 赞/ 64 阅读

相关 kubectl 源码分析之config set-cluster

欢迎关注我的公众号： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHhwamF2Y

古城微笑少年丶/ 2023年02月21日 02:24/ 0 赞/ 72 阅读

相关 kubectl源码分析之set env

欢迎关注我的公众号： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHhwamF2Y

青旅半醒/ 2023年02月13日 03:45/ 0 赞/ 179 阅读

相关 kubectl源码分析之set serviceaccount

欢迎关注我的公众号： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHhwamF2Y

Myth丶恋晨/ 2023年02月12日 13:22/ 0 赞/ 22 阅读

相关 kubectl源码分析之set image

欢迎关注我的公众号： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHhwamF2Y

柔情只为你懂/ 2023年02月11日 07:24/ 0 赞/ 14 阅读

相关 golang源码阅读之实现set操作

set.go package main type Set interface { // 向集合添加元素。返回是否已添

桃扇骨/ 2022年11月26日 08:56/ 0 赞/ 172 阅读

相关 JAVA集合Set之HashSet源码分析

1、概述 HashSet是Java集合的Set的实现类，实际上底层它是HashMap，Set是无序的、不可重的.其中无序的含义是：添加到集合中和取出顺序不一致.可以存放n

红太狼/ 2022年10月17日 04:24/ 0 赞/ 318 阅读

相关 vue源码分析之vue实例

Vue 在使用时都是以实例为单位来初始化运行，从我们最熟悉的根组件（const app = new Vue()）到自定义组件，在运行时都是一个个 Vue 实例。因此要理解 Vu

不念不忘少年蓝@/ 2022年08月29日 10:55/ 0 赞/ 268 阅读

相关 STL源码剖析——关联容器之set

前言在SGI STL中的容器set，其实现基本上是在RB-Tree的基础上，把RB-Tree作为其底层的实现机制，是因为set的操作RB-Tree都能实现，有关RB-

朱雀/ 2022年08月12日 11:30/ 0 赞/ 216 阅读