Vue 数据响应式

简介

Vue中的响应式是指在Vue中当data中的数据改变后,如果视图上有用到该数据,那么视图也会“自动”更新。代码如下:

<div id="app">{{ message }}</div>

const vm = new Vue({
  el: '#app',
  data: {
    message: 'hi'
  }
})

这里 id为app的div中会显示 hi

vm.message = 'hello'

当message改变了之后 div 中的内容也会更新为hello。

如何实现?

实际上,是vue通过对传入data的代理和监听来实现数据响应式的。如下:

const myData = {  message: 'hi'}// 监听data中的messagefunction proxy({ data }) {  // 实际上vue监听了data中所有的属性,此处只用message属性作为展示  const obj = {}  Object.defineProperty(obj, 'message', {    get() {      return data.message    },    set(newValue) {      data.message = newValue
      console.log('通知更新视图')    }  })  return obj}
const newData = proxy({ data: myData })
newData.message = 'hello' // 通知更新视图

上面代码监听了代理对象obj。

这也就是为什么Vue 无法检测 property 的添加或移除的原因, 因为在new Vue({data})时给data做了监听和代理,而新增的属性没有做,所以新增的属性没有响应式的原因,通过提供的API

Vue.set(vm.someObject, 'b', 2)

会自动创建代理和监听。

数组也是如此,不过Vue侦听了数组的变更的一些方法,听过这些方法也可以实现响应式。详见列表渲染

如下图为Vue实现响应式的流程,核心机制是观察者模式。(图片来自官方)

v-model

所谓的双向绑定,在Vue中指的是v-model,实际上是 v-bind:value 和 v-on:input的语法糖。本质是发布订阅模式。

以上均为个人理解,如有误烦请指出。

原文链接:juejin.im

上一篇:Redux源码分析
下一篇:JavaScript 数据类型及判断

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    24 天前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🚩Vue源码——如何监听数据变化

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue 是用数据来驱动来生成视图...

    6 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    6 个月前
  • 🏆 掘金技术征文|双节特别篇 vue3——composition API

    vue3刚出测试版的时候尝过一次,后来学了react,才尝出点味道来,现在再尝一遍,先从重要的compositon api入手! composition api 主要是把之前vue的核心api暴露出来...

    13 天前
  • 🎉🎉🎉 一个基于vue3+vite+ts的完整项目

    VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 ...

    10 天前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    1 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    25 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前

官方社区

扫码加入 JavaScript 社区