1、vue双向绑定原理
vue2.x:vue双向绑定的原理是利用了Object.defineProperty()这个方法，这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
三个参数：要操作的对象，要定义或修改的对象属性名，属性描述符。
重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：
数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。
defineProperty的用法var obj = { };
var name;
//第一个参数：定义属性的对象。
//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
//获取值
get: function () {
return name;
},
//设置值
set: function (val) {
name = val;console.log(val)
}
})//赋值调用
setobj.data = 'aaa';
//取值调用
getconsole.log(obj.data);
//代码演示：defineProperty的双向绑定
var obj={};
Object.defineProperty(obj, 'val',{
set:function (newVal) {
document.getElementById("a").value=newVal==undefined?'':newVal;
docume.getElementById("b").innerHTML=new Val==undefined?'':newVal;
}
});
document.getElementById("a").addEventListener("keyup",function (e) {
obj.val = e.target.value;
})
vue3.x：Proxy拦截和重新定义对象的基本操作。什么是对象的基本操作呢，就是在你读取一个属性的时候实际上是在内部运行一个[GET]的基本操作，在给一个对象赋值的时候实际上是在内部运行一个[SET]的基本操作，删除内部运行[DELETE]，那么vue2的defineProperty实际上内部运行的是[defineOwnProperty]基本操作。那么Proxy它的作用是来拦截所有的基本操作，每一个基本操作Proxy都会有对应的陷阱函数，什么是陷阱函数，就是通过一个代理去读取属性的时候，本来应该运行的是基本操作，但是走着走着就会走到了这函数里去运行了，并没有运行他内部的基本操作，这就是陷阱，而defineProperty它啥也没拦截，因为它本身执行的就是defineOwnProperty，它不是在拦截，它是在调用基本操作，会导致用defineProperty的时候很多东西是拦截不到的，读取原型拦截不到，设置原型拦截不到，判断一个对象是不是可继承，拦截不到。举个例子，给一个数组push一项，用defineProperty去拦截数组的length，直接报错。那么vue2是vue搞出来的一个对象，它全部重写了数组对象的push，shift，splice，当数组调的时候调的都是vue搞出来的原型方法。在vue3中用的代理，代理可以连接所有的基本操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="spanName"></span>
<input id="inpName" type="text">
<script type="text/javascript">
let obj ={};
obj = new Proxy(obj,{
get(target,prop){
console.log("A");
return target[prop];
},
set(target,prop,value){
console.log("B");
target[prop] = value;
observer()
}
});
function observer(){
spanName.innerHTML = obj.name;
inpName.value = obj.name;
}
setTimeout(()=>{
obj.name = "bela"
},1000);
inpName.oninput = function(){
obj.name = this.value
}
</script>
</body>
</html>
//Object.defineProperty
const arr = [1,2,3];
Object.defineProperty(arr,'length',{
set(value){
console.log('set length',value)
this.length = value
},
get(){
console.log('get length')
return this.length
}
})
arr.push(1)
//proxy
const arr1 = [1,2,3]
const p = new Proxy(arr1,{
get(target,prop){
console.log('get',prop)
return target[prop]
},
set(target,prop,value){
console.log('set',prop,value)
target[prop] = value
return true
}
})
p.push(1)
2、兄弟组件之间的通讯方式用哪几种？
通过父组件来传值
通过EventBus：建一个EventBus.js，内容就是暴露一个vue实例，父组件中注册并使用两个子组件，在两个子组件中都引入EventBus.js，第一个子组件向第二个子组件传值使用 “$emit”，第二个子组件使用“$on”接受第一个组件传过来的值。
通过vuex
3、v-show和v-if指令的共同点和不同点？
共同点：都能控制元素的显示和隐藏
不同点：实现显示隐藏的方法不同，v-show是通过css中的display：none；控制显隐，只会编译一次。v-if是动态的生成或删除DOM元素，如果初始化的时候值为false，就不回编译了，频繁的使用v-if进行显隐比较消耗性能。
4、vuex有哪几种属性？
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
5、vuex的State特性是什么？
答：state是vuex数据源存放的地方，里面存放的数据是响应式的，对应于vue里面的data，vue组件从store中获取数据，如果store的数据发生变化，依赖这条数据组件里的数据也会发生变化，它通过mapState把全局的state和getter映射到当前组件compute计算属性里。
6、vue组件的scoped属性的作用
答：在style标签上添加scoped属性，以表示它的样式作用于当下的模块。
7、vue.js的两个核心是什么(数据驱动、组件系统。)
答：数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。
8、讲一下VUEdiff算法
答：vue的diff是双端diff，有一个双指针的比对，vue3在diff上加了一个最长递增子序列，它整个的这个函数流程是通过child Node不断的去递归，查找和上一个diff不一样的地方，再做头尾的比较和替换，递归算法是降低了操作者的心智，但它不一定比真实的操作DOM的效率要高，它是数据响应式之后一个比较大的突破。diff算法key的作用是，在比对的时候我们要标记出这次和上次同一个DOM元素替换更新的位置，如果不加key的话，会扰乱了它的顺序，它自动是根据索引来的，索引会有一个不太好的地方是，在push第一个元素的时候，后面的元素都会重新再计算，很浪费时间，key就是节省时间的。
9、vue和react区别
答：除了diff算法上的区别以外，他们的区别是一个mvvm一个是mvc，mvvm是数据驱动视图，视图驱动数据，mvc是数据和视图之间有一个controllr，对于react来说就是要不停的dispatch，通过事件去驱动数据视图的改变，性能来讲vue要优先于react，尤其是在DOM更新这个一块。vue3在vue2的基础上又做了一些东西，对ts的支持加强了，vue2对ts支持比较弱，react天生支持ts，vite 和react就有一些隔阂，但对与vue3绑定的就非常的强，在做一些大型项目的话，用webpack速度就会慢，用vite就会光速启动。对于开发人员vite学习成本很高，但是在市场上新项目都是用vue3来开盘，因为vue2已经停止维护了。
