Vue源码之 $set

太过爱你忘了你带给我的痛 2023-08-17 16:41 79阅读 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 条评论，79人围观）

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

相关阅读

相关 Vue源码之 $set

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

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

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

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

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

相关 kubectl源码分析之set env

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

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

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

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

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

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

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

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

相关 vue源码分析之vue实例

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

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

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

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

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

相关 jdk源码解析--set

JDK源码分析Set类，因为Set类是经常要用到的，那我们知道JDK源码中Set类在其中不可以有相同的元素，那么判断这个元素是否相同是如何实现的呢，我们看下下面这张图： [!

Bertha 。/ 2022年06月16日 14:15/ 0 赞/ 176 阅读

相关 django settings.py 源码

""" Django settings for qwe project. Generated by 'django-admin startproject'

我会带着你远行/ 2022年05月26日 10:54/ 0 赞/ 127 阅读

相关 Java集合-Set源码

简介 > Set集合不包含重复的元素，相同的元素只保存一个，不包含相等的两个元素，Set至多只能包含一个NULL元素。Set的实现类都是基于Map来实现的，其中HashS

绝地灬酷狼/ 2022年05月17日 23:07/ 0 赞/ 201 阅读