vue相关核心内容

• vue 2.0/3.0 双向数据绑定得实现原理？

//vue2.0
姓名：<span id=spanName></span>
<input type='text' id=inpName />
let obj={
name:''
}
let newObj=JSON.parse(JSON.stringify(obj)) //深克隆
Object.defineProperty(obj,'name',{
get(){
//return this.name //不能返回this.name,会进入死循环
return newObj.name
}
set(val){
if(val==newObj.name)return
newObj.name=val
observer()
}
})
function observer(){
//修改得值挂载在dom上
spanName.innerHTML=obj.name
inpName .name=obj.name
}
setTimeout(()=>{
obj.name='哈哈哈'
},1000)
inpName.onInput =function(){
obj.name=this.value
}
//注意：
1 原始数据克隆
2 需要给对象中每一个属性设置监听

//vue3.0
let obj={}
obj=new Proxy(obj,{
get(targe.prop){
return target[prop]
}
set(targe.prop,value){
cosnole.log('B')
target[prop]=value
observer()
}
})
function observer(){
//修改得值挂载在dom上
spanName.innerHTML=obj.name
inpName .name=obj.name
}
setTimeout(()=>{
obj.name='哈哈哈'
},1000)
inpName.onInput =function(){
obj.name=this.value
}

• MVC和MVVM得区别？
  1 mvc：单向数据改变，默认是数据得更改，控制视图
  2 mvvm：双向数据改变，应用了onchange事件
• 路由传参相关面试题？
  1 路由传递参数（对象写法）path是否结合params参数一起使用？
  答：是不可以得，
  2 如何指定params参数可传或不可传？
  答：如果路由要求传递params参数，但是就不传params参数，会造成url有问题，如果实现不传递，在配置路由时，在占位后面加一个问号
  3 params参数是可以传也可以不可传，但如果传递时空串。如何解决？
  答：如果需要传递是空串，可以将参数设置为undefind
  4 路由组件能不能传递props数据了？
  是可以得，一共三种,在路由文件里配置
  // 布尔值写法：（只能params）
  props:true
  //对象写法： 额外给组件传递一些props
  props：{a:1,b:2}
  //函数写法：可以params参数 ，可以是query参数，通过props传递给路由组件
  props:(KaTeX parse error: Expected '}', got 'EOF' at end of input: …return { value:route.params.value | |$route.query.value
  }
  }