1. vue中实现变异数组和非变异数组的方法
在阅读vue官网的时候，偶然间看到了一个观察数组变异的方法，变异方法？Are you kidding me? ...什么东西？guide就给了这么一堆东西：
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
*
1.push( )
*
2.pop( )
*
3.unshift( )
*
4.shift( )
*
5.splice()
*
6.sort()
*
7.reverse()
看完这里才恍然大悟，其实数组变异方法都是JavaScript操作数组的方法，那么接下来就一一解释这些方法是干嘛用的
push（）往数组最后面添加一个元素，成功返回当前数组的长度
pop（）删除数组的最后一个元素，成功返回删除元素的值
shift（）删除数组的第一个元素，返回该元素。
unshift（）在数组的开头添加一个或者多个元素，返回原数组的长度，改变原来的数组
splice（）有三个参数，第一个是删除index位置的元素（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选）
splice(index，num，5)表示从index下标位置开始向后截取num个元素，截取的这些元素组成一个新数组返回，并且从index位置开始，插入后面的所有参数。（插入到原数组里去）
sort（）使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse（） 将数组倒序，成功返回倒序后的数组
既然有变异方法那么也自然有非变异方法（操作数组不改变原数组的）
filter（）、concat（）和 slice（）
他们不会改变原始数组，他们只会生成一个新的数组
slice（）将原数组
slice（startindex，endindex）从startindex下标开始向后截取到endindex位置（不包含）的元素，截取的这些元素组成新的数组返回，原数组不变
concat（）将一个或多个数组组合到原数组中，组成新的数组返回
与push的区别
filter（）可以对数组元素进行过滤
逆战
2. vue 里面怎么调用过滤器方法
在user-list组件中我们需要遍历联系人列表，filter_key用来传给该组件，和搜索栏组件一样，也用props接收一版下，并且在权里面插入要过滤的内容，
filterBy是返回过滤后的数组，orderBy是排序，前者的使用方法是filterBy 一个key(字段)，in xxx 就是指搜索字段，这里需要注意的是in后面跟的必须是obj里面的key，因为我们的需求是同时保证输入汉字或者拼音都能查询，所以in后面跟的是okr_owner和user.u_name(这是vue渲染的数据，我们展示该联系人用的是里面的u_name，okr_owner则为拼音)，下面附上数据结构。对于在搜索时如何去掉这些字母索引，我们只需要在通讯录页面中的<user-list>加入一个字段，然后使用watch来监听一下key_word即可。
3. vue 请问这个怎么要它输出数组中的一个，而不是全部，现在输出的是全部
一、根据索引设置元素：
1、调用$set方法：
this.arr.$set(index, val);1
2、调用splice方法：
this.arr.splice(index, 1, val);
4. vue数组能存放10万条数据吗
能。vue数组是一款非常强大的数组，存储能力非常强，是能够存放10万条数据的，vue能够存储多种数据，是一款非常好用的软件。
5. 2.vue中遍历数组的指令是什么，过滤的方法怎么写
public static void main(String[] args){
String[] arr = {"a","b","c"};
for(int i = 0; i < arr.length; i++){
System.out.print(arr[i] + " ");
}
//或者
System.out.println(java.util.Arrays.sort(arr));
}
6. Vue2 中为什么“数组名=[]”就能更新数组
vue的数组更新检测规则：使用数组方法push、pop、shift、unshift、splice、sort、reverse才可以触发视图更新，其他方法修改数组将不会同步视图
7. Vue3和Vue2响应式的区别
理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有 Composition API（组合API） “ 表演的舞台 ” 。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：
若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
若返回一个渲染函数：则可以自定义渲染内容。（了解）
注意点：
尽量不要与Vue2.x配置混用
Vue2.x配置（data、methos、computed...）中 可以访问到 setup中的属性、方法。
但在setup中 不能访问到 Vue2.x配置（data、methos、computed...）。
如果有重名, setup优先。
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的 引用对象（reference对象，简称ref对象） 。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
接收的数据可以是：基本类型、也可以是对象类型。
基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
作用: 定义一个 对象类型 的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个 代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
vue2.x的响应式
实现原理：
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
Object.defineProperty(data,'count', {
get() {},
set() {}
})
存在问题：
新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。
Vue3.0的响应式
实现原理:
通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。
MDN文档中描述的Proxy与Reflect：
Proxy： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
newProxy(data, {
// 拦截读取属性值
get(target,prop) {
returnReflect.get(target,prop)
},
// 拦截设置属性值或添加新属性
set(target,prop,value) {
returnReflect.set(target,prop,value)
},
// 拦截删除属性
deleteProperty(target,prop) {
returnReflect.deleteProperty(target,prop)
}
})
proxy.name='tom'
从定义数据角度对比：
ref用来定义： 基本类型数据 。
reactive用来定义： 对象（或数组）类型数据 。
备注：ref也可以用来定义 对象（或数组）类型数据 , 它内部会自动通过reactive转为 代理对象 。
从原理角度对比：
ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
reactive通过使用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作 源对象 内部的数据。
从使用角度对比：
ref定义的数据：操作数据 需要 .value，读取数据时模板中直接读取 不需要 .value。
reactive定义的数据：操作数据与读取数据： 均不需要 .value。
setup执行的时机
在beforeCreate之前执行一次，this是undefined。
setup的参数
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。
8. vue2响应式原理总结
vue组件实例化时，会对data属性深度遍历（遇到数组或者对象）为每一个属性添加数据劫持。数据劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法。
在这个过程中会实例化一个Dep类。
1.在get拦截器里触发dep实例的depend方法,进行依赖收集，实质是在dep的实例属性sub数组中添加依赖这个属性的watcher实例。
2.在set拦截器里触发dep实例的notify方法，对收集到的所有依赖派发更新，（watcher的update方法）
vue组件实例化时会实例化一个渲染watcher,渲染watcher实例化过程会做两件事情。
1.创建vnode,在这个过程中，访问了data属性，触发了get方法，完成了依赖收集。
2.触发了子组件的实例化，子组件实例化又会重复上述数据劫持的过程。
这个过程就是对组件树的深度遍历。
结合组件生命周期来看整个过程，父组件会先触发created钩子，子组件后触发created钩子。而子组件mouted钩子会先执行，父组件的mouted钩子后执行。
分步骤记忆
1、实现页面不刷新的原理
2、页面视图刷新的原理
实现页面不刷新
1.hash
2.history
3.abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
1.hash(哈希模式)，#符号后边是浏览器行为，在改变的时候不对页面进行刷新（重新请求URL）（监听hashChange事件）
2.history模式，H5新增了pushState，replaceState连个新API,可以修改历史记录却不会使浏览器刷新页面。
视图更新原理
其原理就是vue的响应式更新dom的原理，m => v
m是数据，也就是在vue-router install时在根组件（root vue component）添加了_route属性，在匹配到对应路由后更新了_route属性值，继而触发了该属性值的渲染watcher,在继而触发dom更新。
两种模式的不同
1.部署时，history模式需要服务端处理所有可能的路径（例如配置nginx的配置文件），防止出现404。哈希模式则不需要。
2.URL表示不同。
v-model指令就是 v-bind:value 和 @input 的语法糖。
它即可以支持原生表单元素，也可以支持自定义组件
在自定义组件中其实际是这样的：
它的实现通过自定义render函数, 缓存了 vnode
Vue 在更新 DOM 时是异步执行的，只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。在缓冲时会去除重复数据避免不必要的计算和 DOM 操作。
$nextTick(cb) 目的是在DOM 更新完成后传入的回调函数再被调用。
9. vue中怎么过滤掉几百个数组里面不需要的信息
几百个数组删除起来可能有点影响用户体验 如果不是非要删除建议不要删 如果删除for循环 delete删除
10. Vue向数组里面添加字段
1. 有时候我们会碰到这种情况：比如我们渲染一个table，从后端返回的数组里面并没有我们想要的字段，如果让后台帮忙加上的话，会增加冗余字段，这样会增加后端的维护成本，并不可取。
2. 我们可以通过 this.$set 来增加一个字段比如:
const lists = res.data // 后端返回数组
this.tableData = lists.map(i => {
this.$set(i, edit , false)
return i
})
3. 更详细的可以去查看官方文档， ps：Vue官网转了好久打不开。。。