本文目录
- 关于vue无法侦听数组及对象属性的变化的解决方案
- vue3.0数组清空与重新赋值
- 数组和对象的什么操作不会再vue中被监测到,原因是什么
- vue初始值命名null还是空字符串
- vue 中的Vue.set 和 this.$set 的区别
- vue响应式原理面试
- Vue 中 $set() 与 Vue.set() 原理及使用
- vue中添加数组后怎么删除点击的数组中的元素
- vue对象或者数组中数据变化但是视图没有更新
- 回顾Vue2，面向Vue3
关于vue无法侦听数组及对象属性的变化的解决方案
把一个普通 JavaScript 对象传给 Vue 实例的 data 选项， Vue 将遍历此对象所有的属性 ，并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
受到现代JavaScript浏览器的限制，其实主要是 Object.observe() 方法支持的不好， Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。
如push、splice、=赋值（array=）
使用下标修改某个元素（这种比较常见）
1.push到数组的时候深拷贝一下
JSON.parse(JSON.stringify(this.widget))
2.给 this.widget 添加属性的时候使用 $set 添加，将响应属性添加到对象上
this.$set(this.widget, item.attr,’’);
3.object.assign()+直接=赋值
vue3.0数组清空与重新赋值
记个踩坑笔记 vue3.0里面，如果数组是用reactive()声明的，要清空数组得用list.length = 0,如果想要使用list =来清空，因为obj已经被响应式了.
数组和对象的什么操作不会再vue中被监测到,原因是什么
1、检测对象的变化受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。使用Object.assign() 或 _.extend() 方法来添加属性// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })2. 检测数组的变化由于 JavaScript 的限制， Vue 不能检测以下变动的数组：(1)、当你利用索引直接设置一个项时，例如： vm.items = newValue(2)、当你修改数组的长度时，例如： vm.items.length = newLength如何解决上述问题呢？方法1：// Vue.setVue.set(example1.items, indexOfItem, newValue)方法2：// Array.prototype.spliceexample1.items.splice(indexOfItem, 1, newValue)
vue初始值命名null还是空字符串
初始值命名null。vue文档中vue实例《数据与方法》就有提到。项目中通常把需要响应式的数据对象或者数据数组初始化赋值为null。当通过接口异步获取数据时，页面应该处于loading状态，这时候只需要判断其是否为null。
vue 中的Vue.set 和 this.$set 的区别
2019年8月14号上午，有个需求为，根据点击的按钮 联动一个下拉列表，如，点击“全部”,下拉列表显示所有的选项，点击“待申请”，下拉列表显示 待申请的选项。 想要改变vue中数组，并且被实时自动检测数组的变动，且渲染页面。就用Vue的set方法 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 有，Vue.set 和this.$set 两种方法， 例子：1.Vue.set 可以设置实例创建之后添加的新的属性，（在data里未声明的属性），而。this.$set只能设置实例创建后存在的属性。 Vue.set(target，key，value) target:目标数组，可是Object可是Array， key:要改变的属性，可为string，可为number value:any 返回值：设置的目标
vue响应式原理面试
原理：在vue初始化的时候，会调用一个方法initData，用来初始化用户传入的data数据，然后newObserver，对数据进行观测，如果数据是个对象类型非数组的话，就会调一个this.walk(value)方法进行对象的处理，将对象进行遍历，然后使用defineReactive重新定义，采用的就是Object.defineProperty。Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript对象。而当你修改它们时，视图会进行更新。
Vue 中 $set() 与 Vue.set() 原理及使用
问题： 在使用 vue 进行开发的过程中，可能会遇到一种情况：当生成vue实例后，再次给数据赋值时，有时候并不会自动更新到视图上去。也就是 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
案例：
当点击按钮后页面：
当点击按钮后控制台：
原因： 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以 属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
因此： Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items = newValue 当你修改数组的长度时，例如：vm.items.length = newLength eg： 使用 this.arr 去更新 array 的内容，视图没有刷新 使用 Vue.set(this.arr, 0, !this.arr) 去更新 array 的内容，视图被刷新 使用 this.arr 和 this.obj.a = !this.obj.a 同时更新，视图被刷新
结论： 如果方法里面单纯的更新数组 Array 的话，要使用 Vue.set()； 如果方法里面同时有数组和对象的更新，直接操作 data 即可;
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
3.1 通过 Vue.set() 改写 语法：
当点击按钮后页面：
当点击按钮后控制台：
3.2 通过 $set() 改写 语法：
当点击按钮后页面：
当点击按钮后控制台：
3.3 Vue.set() 和 this.$set() 的区别
Vue.set() 源码：
this.$set() 源码
文章转自 Vue 中 $set() 与 Vue.set() 原理及使用
vue中添加数组后怎么删除点击的数组中的元素
在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动《h1》{{obj.name}}《/h1》《h3》{{obj.prop}}《/h3》 《script src="../Scripts/vue.js"》《/script》《script》$(function () {alert(1);}); var vue = new Vue({ el: ’body’,data: {//初始obj是空的，因此视图默认是什么都没有obj:{}},ready: function () {//这里是vue初始化完成后执行的函数this.obj.name = "对象名字";//这时会显示name},methods: {//这里是自定义的方法setProp: function () {this.obj.prop = "测试";//这时会显示测试}}});
vue对象或者数组中数据变化但是视图没有更新
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。但是我们还是有一些办法来回避这些限制并保证它们的响应性。
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：
对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如，对于：
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend() 。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如： vm.items = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 举个例子：
为了解决第一类问题，以下两种方式都可以实现和 vm.items = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：
为了解决第二类问题，你可以使用 splice ：
回顾Vue2，面向Vue3
Object.defineProperty() 是可以监听数组的， key 是角标， value 是元素值。 但对数组插入、删除、排序操作时，数据元素的位置会发生移动，造成每个元素的 getter、setter 频繁调用，严重影响性能！所以， Vue2 放弃使用监听数组！
Object.defineProperty() 的真正问题是： 不能对初始化时没有设置的键值做监听！
这也是为什么会有 Vue2 要重写数组的方法，并提供 Vue.set 等 API 另外， Object.defineProperty() 需要一开始就初始化递归遍历，循环监听，这也是性能瓶颈之一。
也正是因为这些历史遗留问题，才会有 Vue3
Object.defineProperty() 是重写对象的 key ，而 Proxy 只是拦截读写操作。
Vue3 采用 懒代理 解决深度嵌套问题，只需要遍历第一层的属性即可！
对数组做插入、删除、排序操作时，仍然会多次触发 Proxy getter/setter ，那么 Vue3 中做了什么优化呢？
