响应式问题（响应式的概念）

本文目录一览：

• 1、$set为什么解决了响应式问题
• 2、前端vue问题,v-if动态更新视图问题,响应式问题?
• 3、什么是响应式是什么

$set为什么解决了响应式问题

1、由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。

2、在 Vue 2 中，通过索引修改数组的值无法触发组件重新渲染的原因是：Vue 2 中使用了 Object.defineProperty 来实现响应式数据变化检测，但是它只能检测对象属性的 get 和 set 操作，无法检测数组元素的变化。

3、vue 通过 $ set 方法，给对象添加响应式属性，如下文 this.$set ( this.obj ， sex ， 男 ) ，使用这种方法给对象后添加的属性可以再页面中响应式显示。

4、直接反映在Vue里的好处就是：我们不再需要使用 Vue.$set() 这类响应式操作了。除此之外，handler共有十三种劫持方式，比如 deleteProperty 就是用于劫持域删除。

5、这是因为Vue利用双向数据绑定机制监听了data对象的变化，只要data中的属性值发生变化，Vue会自动重新渲染页面。而set函数是在数据变化时被调用的，每次数据更新都会重新调用set函数，从而导致set函数被调用多次。

前端vue问题,v-if动态更新视图问题,响应式问题?

definproperty劫持数据后vue会查找当前属性有无依赖项既被watch，或者依赖当前属性的值，如果有，就会注册依赖既deps，而注册deps时会在wather内添加新的更新目标。

v-cloak 和 CSS 规则如 [v-cloak] { display： none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕，主要用于解决闪动问题，现在Vue3一般不会出现这个问题了。 不会显示，直到编译结束。

你可以参考$set的源码，第一步修改值，第二个触发依赖更新，理论上可以不进行第一步而直接进行第二步，好像没有暴露出来，你可以试试this.data.notify()看能不能调用，或者打印下响应式属性原型，找到更新依赖的方法。

vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

为了解决这个问题，Vue 2 引入了一些特殊的方法来改变数组，例如 vm.$set、vm.$delete 等。使用这些方法可以通知 Vue 更新视图，以反映数组内容的更改。

看过 vue源码 的都知道，vue中通过对data中的属性值进行监听实现了当数据变化时更新视图，其实实现的理论基础是比较简单的，只是结合到整个vue的组件化过程中后便变的贼秀。

什么是响应式是什么

响应式网页设计是网页能够根据屏幕宽度自动适应，以达到适配各种屏幕，使网站在不同设备上都能得到完美的展现。通过响应式模板可以很方便的搭建响应式的网站，在管理和运营上方便的多。

响应式布局，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

什么是响应式界面 根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

响应式网站就是一个可以智能的监控访问者屏幕尺寸并自动适应、实时响应的网站效果，无论访客使用的是手机还是电脑或者是PAD，都能像变色龙一样自动兼容和适应尺寸来完整的展示网站的内容和效果。

所谓响应式网站，是指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。