用Object.defineProperty添加属性的方法，给属性加get set方法。当我们操作属性的时候其实底层是在操作dom。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>数据驱动页面更新原理</title>

</head>

<body>

    <p> 你好，<a href="" id="name"></a></p>

</body>

</html>

<script>

    var obj={}

    Object.defineProperty(obj,'name',{

        set(inner){

            document.getElementById('name').innerHTML=inner;

        },

        get(){

            return document.getElementById('name').innerHTML;

        }

    })

    console.log(obj.name)//undefined

    obj.name='lizhao'

    console.log(obj.name)//lizhao

</script>

vue响应原理的更多相关文章

  1. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

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

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

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

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

  4. Vue响应式原理及总结

    Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...

  5. 详解Vue响应式原理

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

  6. vue响应数据的原理

    vue最大的特点就是数据驱动视图. vue的数据改变,页面一定发生改变?不一定. 当操作引用类型的数据,动态添加属性时,页面不会发生改变. vue响应式数据原理(也叫数据绑定原理.双向数据绑定原理): ...

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

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

  8. 深入Vue响应式原理

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

  9. vue响应式原理解析

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

随机推荐

  1. laravel中orderBy使用

    laravel中orderBy使用 一.总结 一句话总结: 链式操作:laravel中的数据库操作可以是链式操作,所以类似这种想要多个orderBy效果的就直接接在后面写就可以了 User::orde ...

  2. linux向文件中添加数据，数据被追加到了上一行的行尾

    当我们在windows上新建了文件,并且要上传到linux上时,一定要在文件后加上空格,否则就会出现标题上讲的,数据被追加到了上一行的行尾,而不是新起一行,但是如果是在linux上新建的文件,则没有这 ...

  3. 如何在uboot下列出使用的设备树信息？

    答: 使用fdt命令 1. fdt addr <fdt addr>  (将设备树加载到fdt addr指定的位置,如tftpboot 0x80000000 my.dtb,那么fdt add ...

  4. ES 可视化工具

    1.ElasticSearch Head 用途:展示ES(集群)数据信息 视图:https://mobz.github.io/elasticsearch-head/ 下载:https://github ...

  5. Spark算子与RDD基本转换

    map 将一个RDD中的每个数据项,通过map中的函数映射变为一个新的元素. 输入分区与输出分区一对一,即:有多少个输入分区,就有多少个输出分区. flatMap 属于Transformation算子 ...

  6. 全部二进制脚本高可用--只有docker启动未成功

    [root@test1 script]# cat k8s-docker-binary-py #!/usr/bin/python # -*- coding: utf-8 -*- from __futur ...

  7. Git学习教程一之安装Git&&&本地仓库建立

    一. 安装git 1:在Windows上使用Git,可以从Git官网直接下载安装程序,(网速慢的同学请移步国内镜像),然后按默认选项一直安装即可. 2:安装完成后,在开始菜单里找到“Git”-> ...

  8. PhpSpreadSheet 读写excel文件

    phpoffice 系列很好用.PhpSpreadSheet取代了原先的phpexcel,用来处理excel文件 https://phpspreadsheet.readthedocs.io/en/la ...

  9. 软件缺陷5C标准

    Correct(准确) :每个组成部分的描述准确,不会引起误解 Clear(清晰): 每个组成部分描述清晰,易于理解 Concise(简洁): 只包含必不可少的信息,不包括任何多余的内容 Comple ...

  10. STS如何将一个文件夹设置缺省的创建路径（build path）

    STS中的build path是一种缺省的路径,相当于windows的环境变量中的path,利用它可以将jsp等文件放入其中,程序只需要文件名就可以找到它. (1)在Package Explorer中 ...