前端面试之Vue题目，简单全面（持续更新ing...）

VUE基础

1.vue的基本原理

当一个Vue实例创建时，vue会遍历data中的属性，用Object.defineProperty(vue3使用proxy)将它们转为getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有自己相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而使得它关联的组件得以更新。
Object.defineProperty()方法接收三个参数
1.属性所在的对象 2.属性的名字 3.一个描述符对象（下述一二三四数据属性）（五访问器属性）

一、configurable

// configurable属性代表能否通过delete删除属性从而重新定义属性，
// 或者能否把属性修改为访问器属性，默认值为false
let p1 = {
  name:'lisi'
}
Object.defineProperty(
  p1,'name',{
    configurable:false
  }
)
console.log(p1);
delete p1.name;
console.log(p1);//list

二、enumerable

// enumerable 代表能否通过for in 循环访问属性 默认值为false
let p1 = {
  name:'lisi'
}
Object.defineProperty(p1,'age',{
  enumerable:false,//不能通过for in遍历出来
  value:15
})
for(let i in p1){
  console.log(p1[i]);//lisi
}

三、writable 四、value

let p1 = {
	name:'lisi'
}
Object.definedProperty( p1,'age',{
	wirtable:false,
  value:15
})
console.log(p1.age); //15
p1.age = 20;
console.log(p1.age); //15

五、get set

/* 
get：在读取属性时调用的函数，默认值是undefined
set：在写入属性的时候调用的函数，默认值是undefined
*/

let book = {
  _year  : 2004,
  edition:1
}
Object.defineProperty(book,'year',{
  get:function(){
    return this._year;
  },
  set:function(newYear){
    if(newYear > 2004){
      this._year = newYear;
      this.edition += newYear - 2004;
    }
  }
})
book.year = 2005;
console.log(book.edition); // 2
console.log(book._year); //2005
/* 
  由于get方法返回_year的值，set方法通过计算来确定正确的版本
  因此把_year的值设置为2005会导致edition的值变为2
*/

/* 同时定义多个属性的写法 */

let p1 = {
  name:'lisi'
}
var student = {}
Object.defineProperties(student,{
  name:{
    writable:false,
    value:'lisi'
  },
  age:{
    writable:true,
    value:16
  },
  sex:{
    get(){
      return '男'
    },
    set(v){
      p1.sex = v;
    }
  }
})
p1.sex = '男'
console.log(student.name + ":" + student.age);//lisi:16
console.log(p1.sex); // 男
student.sex = "女";//修改student的sex属性会触发set 从而改变p1的sex
console.log(student.sex); //男
console.log(p1.sex); // 女

2.双向数据绑定的原理

vue2是采用数据劫持结合发布者-订阅者模式的方法，通过Object.definedProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
主要分为：1234暂略