Vue全家桶+React全家桶⾯试题及部分原理整理
Vue全家桶+React全家桶⾯试题及部分原理整理
Vue
v-if和v-show的区别？
v-if表达式为true显⽰该元素，为false隐藏该元素(直接删除)
v-show根据表达式的真假来显⽰与隐藏元素，会在标签加⼊display属性
为何v-for中要⽤key
vue中列表循环需加:key=“唯⼀标识” 唯⼀标识可以是item⾥⾯id index等，因为vue组件⾼度复⽤增加Key可以标识组件的唯⼀性，为了更好的区别各个组件，key的作⽤主要是为了⾼效的更新虚拟DOM
注意：v-for和v-if不能同时使⽤
⽗⼦组件之间的通讯
⽗传⼦组件标签中，⼦组件通过props接收
⼦组件通过$emit()传送事件，⽗组件需要通过v-on去监听⾃定义事件
vue⽣命周期
------------------beforeCreate初始化之前状态(el,data,msg还没有初始化)
el:undefined
data:undefined
msg:undefined
------------------created初始化之后状态(el还没有挂载，data中已经初始化有了数据)
el:undefined
data:[object Object]
msg:hello vue
------------------beforeMount挂载之前状态（el已经挂载，但还没有渲染）
el:
{{msg}}
data:[object Object]
msg:hello vue
------------------mounted挂载之后状态（el挂载并渲染）
el:
hello vue
data:[object Object]
msg:hello vue
------------------beforeUpdate更新前
------------------updated更新后
-
-----------------beforeDestroy销毁前的状态
------------------destroyed销毁后的状态
⽗⼦组件⽣命周期调⽤顺序
先⽗组件created，然后⼦组件created，之后⼦组件mounted，再⽗组件mounted
（创建是从外到内，渲染是从内到外，⼦组件渲染完再⽗组件）
更新阶段，先⽗组件update，然后⼦组件update，然后⼦组件updated，再⽗组件updated
何时需要使⽤beforeDestory
解绑⾃定义事件event.$off
清除⾃定义的DOM事件，如window scroll等
Vuex中action和mutation有何区别
action中处理异步，mutation不可以
mutation做原⼦操作
action可以整合多个mutation
Vue3升级内容
全部⽤ts重写（响应式、dom、模板编译等）
性能提升，代码量减少，会调整部分API
Proxy实现响应式（基本使⽤）
Proxy能规避Object.defineProperty的问题，但Proxy⽆法兼容所有浏览器，⽆法polyfill
Vue⾼级特性
⾃定义v-model
//---------------⼦组件传值
//绑定 input 事件，$emit 触发⽗组件的 input 事件
<input type="text" @input="$emit('input', $event.target.value)">
//⽗组件监听 input 事件，然后将事件携带的 input 输⼊的值传⼊到 data 状态中
<my-children @input="value = $event"></my-children>
export default {
data () {
return {
value: ''
}
}
}
//-------------⽗组件传值
/
/将value值传递给⼦组件，⼦组件再绑定 value值到 input的value属性上
<my-children :value="value" @input="value = $event"></my-children>
//⼦组件中绑定 input 的 value 属性
<input type="text" @input="$emit('input', $event.target.value)" :value="value">
//props设定value值
export default {
name: 'myChildren',
props: ['value']
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$nextTick
Vue是异步渲染，data改变之后，DOM不会⽴即渲染，$nextTick会在DOM渲染之后被触发，以获取最新DOM节点页⾯渲染时会将data的修改做整合，多次data修改只会渲染⼀次
<ul ref="uls">
<li>***</li>
</ul>
this.$nextTick(()=>{
//获取DOM元素
const ulElem =this.$refs.uls
console.log(ulElem.childNodes.length)
})
1
2
3
4
5
6
7
8
<div id="app">
<my_cpn>
<button>按钮</button>
<span slot="btn">具名插槽使⽤</span>
<my_cpn>
<template v-slot="get">
<span v-for="item in get.set_data">{{item}}</span>
</template>
</my_cpn>
</my_cpn>
</div>
<template id="p">
<div>
<slot><p>匿名slot插件默认内容</p></slot>
<slot name="btn"><button>按钮</button></slot>//具名插槽<slot :set_data="str">//作⽤域插槽使⽤
<ul>
<li v-for="item in str">{{item}}</li>
</ul>
</slot>
</div>
</template>
const vm = new Vue({
el:"#app",
data:{},
components:{
my_cpn:{
template:"#p",
data(){
return {
str:["⼀","⼆","三","四"]
}
}
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
react组件之间通信
21
22
23
24
25
26
31
32
33
34
35
36
动态异步组件
:is="component-name"⽤法，需要根据数据，动态渲染的场景。即组件类型不确定
<component :is="NextTickName"/>//使⽤动态组件
<FormDemo v-if="showFormDemo"/>//异步组件
<button @click="showFormDemo = true">show form demo </button>
import NextTick from "./NextTick"//导⼊外部组件
export default{
components:{
NextTick,
FormDemo:() => import("../BaseUse/FormDemo")//异步加载组件
},
data(){
return {
name:"home",
NextTickName:"NextTickName"
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
keep-alive
缓存组件，频繁切换，不需要重复渲染(被包裹的组件不会被销毁)
mixin
多个组件有相同的逻辑，抽离出来
mixin并不是完美的解决⽅案，会有⼀些问题(
变量来源不明确，不利于阅读，多mixin可能造成命名冲突,mixin和组件可能出现多对多的关系，复杂度较⾼)，vue3提出的composition API旨在解决这些问题
<div>
<p>{{name}}{{age}}{{sex}}</p>
</div>
import myMixin from "./mixin"
export default {
mixins:[myMixin],//可以添加多个，会⾃动合并起来
data(){
return {
name:"张三",
age:18
}
3
4
5
6
7
8
9
10
11
12
13
Vue部分原理（≠源码）
组件化（MVVM，数据驱动视图）
MVVM 即模型-视图-视图模型。【模型(M)】指的是后端传递的数据。【视图(V)】指的是所看到的页⾯。【视图模型(VM)】mvvm模式的核⼼，它是连接view和model的桥梁。它有两个⽅向：⼀是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页⾯。实现的⽅式是：数据绑定。⼆是将【视图】转化成【模型】，即将所看到的页⾯转化成后端的数据。实现的⽅式是：DOM 事件监听。这两个⽅向都实现的，我们称之为数据的双向绑定
响应式(数据驱动视图第⼀步)
核⼼API:Object.defineProperty(Vue3.0之前)
//基本使⽤
const data ={}
const name="zhangsan"
Object.defineProperty(data,"name",{
get:function(){//get返回内容
console.log("get")
return name
},
set:function(newVal){//set赋值内容
console.log("set")
name=newVal
}
})
//如果监听的类型是对象，需要判断进⾏深度监听
//如果监听的类型是数组，不污染全局的数组原型情况下，重新定义数组原型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Object.defineProperty的缺点：深度监听，需要递归到底，⼀次性计算量⼤
⽆法监听新增属性/删除属性（需要Vue.set Vue.delete两个API来使⽤）
Vue3.0使⽤Proxy取代，但Proxy有兼容性问题，且⽆法polyfill，所以Vue2.x还会存在⼀段时间
vdom（Virtual DOM）和diff（虚拟DOM和diff算法，⾯试中的热门问题）
vdom----⽤js模拟DOM结构，计算出最⼩的变更，操作DOM
vue是参考snabbdom实现的vdom和diff
----------diff算法
diff即对⽐，是⼀个⼴泛的概念，如linux diff命令，git diff等
diff算法过程：patch(elem,vnode)和patch(vnode,newVnode)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。