web面试必问的题

本文详细探讨了Vue.js的核心技术,包括双向数据绑定、虚拟DOM与diff算法、组件通信、Vuex状态管理、vue-router及其原理、生命周期、自定义指令和过滤器等。此外,还介绍了Vue 2.x与3.x的区别、keep-alive组件的使用、环境变量配置、axios的封装技巧以及UI库element-ui和vant-ui的按需引入方法。同时,涉及到了前端适配方案如rem和vw/vh、webpack配置优化、数据类型差异及常见的数组操作方法,全面覆盖了Vue开发和面试的常见知识点。
摘要由CSDN通过智能技术生成

1. vue双向数据绑定原理

vue是采用数据劫持结合发布-订阅的方式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据发生变动时发布消息给订阅者,触发相应的监听回调来渲染视图
第一步:
需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter,getter,这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到数据变化
简单来说就是实现一个数据监听器Observer,它能够对数据对象的所以属性进行监听,如果有变动就可以拿到最新的值并通知订阅者

第二步:
compile解析模块指令,讲模块中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
简单来说就是实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,替换数据,绑定更新函数
第三步:
Watcher订阅者时ObserverCompile之间的通讯桥梁,主要做的事情是:
1.在自身实例化时往属性订阅器(dep)里面添加自己
2.自身必须有一个update()方法
3.待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中的绑定回调
简单来说就是实现一个Watcher,作为Observer和Compile的桥梁,能够收到每个属性变动的通知,绑定相应的回调函数,从而更新视图
第四步:
MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭建起Observer和Compile之间的通信桥梁,达到数据变化->视图更新; 视图交互变化->数据model变更的双向绑定效果

MVVM就是实现Vue双向数据绑定的根本,MVVM本质上是MVC的改进版,即模型-视图-视图模型,【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】MVVM的核心,他是连接view和model的桥梁。它有两个方向: 一个是将【模型】转换成【视图】,即后端传递的数据转换成所看到的页面:实现方式是:数据绑定。第二个是【视图】转化成【模型】,即将所看到的页面转换成后端的数据:实现方式是:DOM事件监听。这两个方向都实现的话,我们称之为数据的双向绑定

2.vue虚拟dom,diff算法

虚拟DOM就是为了解决游览器性能问题而被设计出来的。

就是用对象来模拟dom元素和嵌套关系,指的就是用js对象的形式,来模拟页面上的DOM嵌套关系

目的:实现页面元素的高效更新,避免大量无谓的计算(若一次操作中有10次更新DOM的动作,虚拟DOM不会立即去操作DOM,而是将10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一个姓attch到DOM树上,再进行后续操作)

作用:用来比较两次DOM结构

web界面由DOM树(树的意思就是数据结构)来搭建,当其中一部分发生变化时,其实就时对应某个DOM节点发生了变化

diff算法是作为DOM的加速器,改进优化了页面渲染的基础和性能保障

用js对象表示dom树结构,用这个树建立一个真正的dom树,插入到文档中,状态更新,重新构造一棵新树,两树比较差异,把差异应用到真的dom树上,更新视图

3. 组件 通讯

  • 回到顶部
    1.父传子
    父组件是通过props属性给子组件通信的
    父组件代码:
<template>
	<div>
		<h2>{
   {
   msg}}</h2>
		<Son :faMsg="msg"></Son>
	</div>
</template>
	
 <script>
	import Son from "./Son";
	export default {
   
		name:"HelloWorld",
		data(){
   
			return{
   
				msg:"父组件"
			}
		},
		components:{
   Son}
	}
 </script>

子组件代码:

<template>
	<div>
		<h2>{
   {
   sonMsg}}</h2>
		<p>子组件接收到的内容是:{
   {
   faMsg}}</p>
	</div>
</template>
	
 <script>
	export default {
   
		name:"Son",
		data(){
   
			return{
   
				sonMsg:"子组件"
			}
		},
		props:['faMsg'], //接收faMsg值
		//还可以这样,上面的不是很严谨
		props:{
   
			faMsg:{
   
				type:String,
				default:"123"
			}
		}
	}
 </script>

在父组件中给子组件标签上绑定一个属性, 属性上挂载需要传递的值
在子组件通过props:[“自定义属性名”]来接收数据

子传父:
(1) 在父组件中给子组件标签绑定一个自定义事件,给这个事件挂载需要调用的方法
(2) 在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法

父组件代码:

<template>
   <div>
     <h2>{
   {
    msg }}</h2>
     <p>父组件接手到的内容:{
   
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值