草庐IT

Vue2响应式原理

wxiaonan 2023-03-28 原文

?vue2响应式原理

vue的特性:数据驱动视图双向数据绑定。vue官方文档也提供了响应式原理的解释:

深入响应式原理

Object.defineProperty()

Object.defineProperty()的作用是直接在一个对象上定义一个新属性,或者修改一个属性

使用方式:Object.defineProperty(对象名,属性名,配置项)

<script>	
	let person = {
		name: '张三',
		sex: '男',
	}
	Object.defineProperty(person,'age',{
		value: 18
	}) //不能参与遍历
</script>

上述写法是给person对象添加一个age属性,属性的值是18

但是这种写法:

  • 不能进行枚举,即无法在遍历的时候获取到age属性的值
  • 不能被修改
  • 不能删除

所以Object.defineProperty()还有其他配置项

Object.defineProperty(person,'age',{
    value: 18
    enumerable: true //控制属性是否可以枚举,默认值是false
    writeable: true //控制属性是否可以被修改,默认值是false
    configurable: true //控制属性是否可以被删除,默认值是false
}) 

现在有一个需求:定义一个新的变量number,当number的值修改后,personage的值也相应被修改;而personage的值被修改后,number的值也相应被修改。

这个时候需要借助新的配置项getset

<script>	
	let number = 18
	let person = {
		name: '张三',
		sex: '男',
	}
	//能够实现number的值修改后,person中age的值也相应被修改
    Object.defineProperty(person,'age',{
        //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
        get:function(){
            return number
        },
        //当有人修改person的age属性时,set函数(setter)就会被调用,且接收到修改的具体值
        set(value){
            number = value
        }
    })
</script>

数据代理

数据代理就是通过一个对象代理另一个对象中属性的操作

vue就是通过vm对象来代理data对象中属性的操作

<body>
    <div id="app">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
    </div>

</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            age: 18
        }
    })
</script>

控制台输出vm,我们可以看到nameage这两个属性

这两个属性都是通过Object.defineProperty()添加到vm上,所以可以发现他们都有对应的getter/setter

也就是说:当读取vm中的name时,会调用getter,把data.namename;当修改vm中的name时,会调用setter,修改data.name中的值(这里跟第一个例子是同一个道理)

但是我们会发现vm上没有data(疑惑:明明在创建vue实例对象的时候,设置了data,为什么取不到)

其实我们以为的这个data其实是_data,可以验证一下:

let data = {
    name: '张三',
    age: 18
}
const vm = new Vue({
    el: '#app',
    data
})

控制台进行一下判断:

所以我们获取数据的时候,也可以通过vm._data.age来获取

vue为了编码更方便,进行了数据代理,遍历data中的所有属性,把每个属性都添加到vm中,指定getter/setter

所以可以直接通过vm.age来获取数据

基本原理:

  • 通过Object.defineProperty()data对象中所有属性添加到vm
  • 为每一个添加vm上的属性,都指定一个getter/setter
  • getter/setter内部去操作(读/写)data中对应的属性

实现双向绑定

双向绑定就是数据发生变化时,视图也跟着变。核心是数据劫持发布者-订阅者模式

数据劫持实质就是使用defineProperty重写getter/setter。当数据改变时,set就会劫持这个数据的变化,更新视图(view)

但是由于defineProperty无法检测到对象和数组内部的变化,所以遇到属性为对象时,会递归观察该属性;遇到数组时,会重写pushpopshift等方法。

监测对象中的数据

最开始会想认为利用getter/setter,但是这样会造成死循环。只要有人获取name的值,就会调用get,然后又会获取一次person.name,造成死循环。set同理。

//错误的代码!!!!!!!!!
let person = {
    name: '张三',
}
Object.defineProperty(person, 'name', {
    get: function() {
    	return person.name
    },
    set(value) {
    	person.age = name
    }
})

正确的做法是:监听数据的每一个属性,当监听到属性值发生变化时,通知订阅者去更新视图,重新进行模板解析。

<script>
    let data = {
        name: '张三',
    }

    //创建一个观察者实例对象,用于监视data中属性的变化
    const obs = new Observer(data)

    //准备一个vm实例对象
    let vm = {}
    vm._data = data = obs

    function Observer(obj) {
        //汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)

        //遍历
        keys.forEach((k) => {
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },
                set(val) {
                    obj[k] = val
                }
            })
        })
    }
</script>

上述代码只是一个例子,只会对一层对象进行处理,vue的操作是递归,直到数据类型是简单数据类型。

如需给后添加的属性做响应式,可以使用

  • Vue.set(object,propertyName,value)
  • vm.$set(object,propertyName,value)
data: {
	student:{
		name: '张三',
		age: 18,
		friends:[
			{name:'小明',age:20},
			{name:'李四',age:15}
		]
	}
}
Vue.set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')

监测数组中的数据

这里可以去看一下vue的官方文档:

通过包裹数组更新元素的方法实现,本质就是做了两件事

(1)调用原生对应的方法对数组进行更新

(2)重新解析模板,进而更新页面

所以在vue修改数组中的某个元素一定要用如下方法:

  1. 使用API:push(),pop(),shift(),splice(),sort(),reverse()
  2. Vue.set(),vm.$set()

有关Vue2响应式原理的更多相关文章

  1. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成? - 2

    在我做的一些网络开发中,我有多个操作开始,比如对外部API的GET请求,我希望它们同时开始,因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中,该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码,其中FirstAsyncWorker和SecondAsyncWorker是我编写的类,我在其中混合了Concurrent::Async模块,并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  4. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  5. ruby-on-rails - Rails 在记录 200 OK 后在做什么? (调试响应时间慢) - 2

    我试图在我的RubyonRails应用程序中调试一个极其缓慢的请求调用。我已设法根据自己的喜好优化Controller方法,Rails的日志告诉我它已在XX毫秒内完成操作(Completed200OKin5049ms(Views:34.9ms|ActiveRecord:76.3ms)).但是,在加载页面时,在浏览器中实际呈现任何内容之前打印此消息很长;最多约15秒的等待时间。Rackmini-profiler证实了这一点,告诉我GET操作(不计算完成Controller操作所花费的时间)花费了14秒左右。(分析器还确认Controller操作的执行时间约为5秒)。我可以接受Contro

  6. ruby - 带有 header 的 Sinatra 流式响应 - 2

    我想通过Sinatra应用程序代理远程文件。这需要将带有header的HTTP响应从远程源流式传输回客户端,但我不知道如何在Net::HTTP#提供的block内使用流式API时设置响应header获取响应。例如,这不会设置响应头:get'/file'dostreamdo|out|uri=URI("http://manuals.info.apple.com/en/ipad_user_guide.pdf")Net::HTTP.get_response(uri)do|file|headers'Content-Type'=>file.header['Content-Type']file.re

  7. ruby - Net::HTTP 对 HTTPS 请求的响应极其缓慢 - 2

    出于某种原因,在我的开发机器上,我对通过Net::HTTP执行的HTTPS请求的响应非常非常慢。我试过RestClient和HTTParty,它们都有同样的问题。它似乎是凭空冒出来的。我已毫无问题地提出这些请求数百次,但今天它们的速度慢得令人难以忍受。pry(main)>putsTime.now;HTTParty.get('https://api.easypost.com/v2/addresses');putsTime.now;2015-04-2908:07:08-05002015-04-2908:09:39-0500如您所见,响应耗时2.5分钟。不仅仅是这个EasyPostAPIUR

  8. ruby - 使用 Ruby 将 HTTP GET 的响应主体流式传输到 HTTP POST - 2

    我正在尝试下载一个大文件,然后使用Ruby将该文件发布到REST端点。该文件可能非常大,即超过可以存储在内存中甚至磁盘上的临时文件中的容量。我一直在用Net::HTTP尝试这个,但我愿意接受任何其他库(rest-client等)的解决方案,只要他们做我想做的事情。这是我尝试过的:require'net/http'source_uri=URI("https://example.org/very_large_file")source_request=Net::HTTP::Get.new(source_uri)source_http=Net::HTTP.start(source_uri.ho

  9. 更新证书后,Ruby Net::HTTP 响应 OpenSSL::SSL::SSLError "certificate verify failed" - 2

    我们最近更新了我们网站的SSL证书,在MacOSElCapitan10.11.3上出现以下情况:require'net/http'Net::HTTP.getURI('https://www.google.com')#=>"..."#ThesitewhosecertificategotrenewedNet::HTTP.getURI('https://www.example.com')#=>OpenSSL::SSL::SSLError:SSL_connectreturned=1errno=0state=error:certificateverifyfailed我在Google和StackO

  10. ruby-on-rails - Rails Controller 中未定义的方法呈现 - 尝试使用 200 状态代码响应 Sendgrid - 2

    我正在使用SendgridParseAPI和Griddlergem来接受传入的电子邮件。在大多数情况下,这工作正常;但是,如果您未使用状态代码200响应Sendgrid,他们将假定该应用程序未正确接收POST请求并继续尝试进行POST3天。我正在尝试使用状态代码进行响应,但遇到了问题。在常规的RESTful路由中,您可以执行类似...render:status=>200但是,我认为这必须在Controller中完成才能识别渲染方法。Griddler建议您创建一个EmailProcessor模型并使用“处理”方法来处理电子邮件。据我了解,您不能在模型中使用渲染方法。因此,我使用类方法创建

随机推荐