响应基于 set 和 get(Object.defineProperty)

类型：

    单向绑定

    双向绑定

简单例子(基于Object.defineProperty)


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div>

        <form action="" class="form">

            <div>

                <label for="name">name</label>

                <input type="text" name="name" id="name">

            </div>

            <div>

                <label for="age">age</label>

                <input type="text" name="age" id="age">

            </div>

        </form>

    </div>

</body>

<script>

    // 实现Model到View的单向绑定

    //Model

    let person = {

        data: {

            name: '',

            age: '',

        }

    };

    //ViewModel

    function binding(obj) {

        for (let key in obj.data) {

            Object.defineProperty(obj, key, {

                get() {

                    console.log("getter");

                    return obj.data.key;

                },

                set(value) {

                    console.log("setter: " + value);

                    let dom = document.querySelector(`#${key}`);

                    dom.value = value;

                    console.log("dom.value: " + dom.value);

                    obj.data.key = value;

                    console.log("obj.data.key: " + obj.data.key);

                },

            });

        }

    }

    binding(person);

    // 实现view到model的单向绑定

    //View

    //获取表单对象

    // let form = document.querySelector(".form");

    // //监听form的input事件

    // form.addEventListener('input', (e) => {

    //     let value = e.target.value;

    //     let name = e.target.getAttribute('name');

    //     person[name] = value;

    // });

</script>

</html>


分析:

    1.js部分划分为数据(model)、关联视图方法viewModel

    2.只需要使用binding方法，此方法就会遍历观测对象的所有key，并为key定义属性拦截器(Object.defineProperty)，在数据set、get时定义额外的处理

    3.特别地，在set的时候，不仅仅更新的观测对象的的值，还更新了DOM元素的值，当然这里是做了简单处理，用以了解响应设计基础部分,详细部分的话，有兴趣可以去看看官方源码设计

    4.大家可能注意到有一个部分被我注释了，那个就是那个addEventListener这部分，这里实现了view到model的单向更新

总结: vue的响应式核心是基于ES5特性Object.defineProperty生成的set、get

Vue对数组和对象的观测处理：

    非根级变量响应方法：

        1.数组(vue对这些数组方法进行了代理，调用时做了更新视图的处理),至于为什么，下面马上解释

        检测边界：

            1.增加或者修改

            新增：vm.items[indexOfItem]=newValue

            这种情况其实就是在为对象添加一个新key，数组本身也是Array类的一个实例

            修改：vm.items[indexOfItem]=newValue按照数组本身是一个对象应该会触发更新，但是vue设计源码没有把数组对象的key进行set和get转换

            2.修改长度

            vm.items.length = newLength

            同样这样没有set和get没法触发视图更新

        另辟蹊径：

            通过对原生方法进行改写来触发视图更新

            1.变异方法(改变原数组)

                push()

                pop()

                shift()

                unshift()

                splice()

                sort()

                reverse()

            2.非变异方法(返回新数组)，vue在更新视图对这种覆盖原数组的情况作了优化处理，无需担心渲染效率

                filter()

                contact()

                slice()

        检测边界的新处理方法：

            1.增加元素

                1.1 按顺序插入

                    push(value)

                    unshift(value)

                1.2 按指定key插入

                    Vue.$set(arr,index,value)

            2.删除元素

                splice(index,count)    

            3.修改元素

                splice(index,1,value)

        2.对象(遍历data赋予set和get)

             Vue.$set(target, key, value) 

             注意事项:被设置变量不能存在(源码发现key存在就会跳过此key的set和get转换)

            增加单个属性

            Vue.$set(target, key , value)

            增加多个属性

            Object.assign({},target,source)

Vue响应式原理以及注意事项的更多相关文章

  1. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  2. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  3. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  4. vue响应式原理，去掉优化，只看核心

    Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...

  5. 深入Vue响应式原理

    深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...

  6. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  7. 浅析Vue响应式原理（三）

    Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...

  8. 深入解析vue响应式原理

    摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...

  9. 浅谈vue响应式原理及发布订阅模式和观察者模式

    一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...

随机推荐

  1. HTML+css基础 p段落标签 a 超链接标签 Src和href有什么区别和关联？ target属性 Meta标签

    p段落标签: <p></p> 1.他是唯一一个可以不写结束标签的双标签. a 超链接标签: 从一个页面链接到另一个页面.靠的是href属性.  Src和href有什么区别和关联 ...

  2. TF-IDF & CNN

    TF-IDF----------------------------------------------------------------认为一个单词出现的文本频率越小,它区别不同类别的能力就越大, ...

  3. SQL忽略重复键作用

    1.插入时如果开启的话,发现重复键会忽略,否则报错 2.更新时不管开启是否都会报错

  4. python__系统 : 线程池

    参考文档: https://www.jianshu.com/p/b9b3d66aa0be 使用  ThreadPoolExecutor  类,  as_completed 是迭代器, 如果有任务执行完 ...

  5. 02 .NET CORE 2.2 使用OCELOT -- 路由

    继续学习.NET CORE 2.2 使用OCELOT https://www.jianshu.com/p/05ccf87a3091 https://www.jianshu.com/p/585396dc ...

  6. mvc_第二遍

    之前,我们学习了mvc最基本的架构和用法. 在学习了真正的属性.委托和列表之后,我们就可以使用微软提倡的模型了. 需要注意的是,这种模型以及它的工作方式,身上有着浓浓的微软印记.在方便的同时,也要自行 ...

  7. 解决plsql中文显示问号（？？？）问题

    最近新买的电脑,配置好数据库连接后,plsql查看数据与插入中文数据都显示问号(???),同事的都正常显示,查看了很多资料,有的说是数据库字符集的原因让修改数据库的字符集,但是我的数据库都是远程连接正 ...

  8. 关于在linux上部署scrapy的爬虫

    1.在服务器中安装chrome sudo apt-get install libxss1 libappindicator1 libindicator7 wget https://dl.google.c ...

  9. python高级编程——网络编程（一）

    计算机网络基础 概念:计算机网络就是把各个计算机连接到一起,让网络中的计算机可以互相通信.网络编程就是如何在程序中实现两台计算机的通信.而网络编程就是开发计算机网络应用程序 计算机的通信协议 概念:计 ...

  10. Gin-Go学习笔记六：Gin-Web框架 Api的编写

    Api编写 1>     Gin框架的Api返回的数据格式有json,xml,yaml这三种格式.其中yaml这种格式是一种特殊的数据格式.(本人暂时没有实现获取节点值得操作) 2>    ...