vue3组件详细介绍
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3组件详细介绍相关的知识，希望对你有一定的参考价值。
参考技术A 一、不使用语法糖1、组件注册
注册和vue2中基本相同
2、传参
//父组件调用子组件，传值name
子组件
在setup（prpos,context）有两个参数，其中prpos是父组件传来的参数，因为prpos是响应数据，使用直接使用解离会失去响应属性，需要使用到toRefs、toRef这两个方法，toRefs方法当没有这个参数的时候会报错，然后我们就可以使用toRef了。如下
另一个参数context，是本身也有三个参数attrs,slots,emit，attrs组件的属性，slots 组件内的插槽，emit 自定义事件 子组件
3、动态组件
动态组件是使用component 标签 使用:is,根据需求展示不同的组件，基本使用方法vue2差不多
二、使用语法糖
语法糖setup,在script标签中直接使用，就相当于setup(),在语法糖中怎么使用setup中prpos和context参数呢，setup script语法糖提供了新的API来供我们使用
使用语法糖，在父组件中直接引用，无需注册
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
前端vue经典面试题78道（重点详细简洁）
目录
9.VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
43.有哪些指令？v-if和v-show区别，v-if、v-for优先级
46.computed、watch（自动监听、深度监听）、methods区别
50.什么是vuex？vuex核心包括？怎么修改state中数据？在项目中哪里使用？
51.路由模式有哪些？路由传参有哪些方式？路由守卫有哪些，有没有在项目中使用过？
53.有没有封装过组件，封装过什么，怎么封装？注意点或有哪些原则？
55.有没有使用过axios、axios拦截器，跨域如何解决？
61.vue中编写可复用的组件(深度好题，掌握思路,不用背诵)
64.v-for产生的列表，实现active的切换 tab切换
1.自我介绍
2分钟，200-300个字，主旨自己基本情况，工作经历，优点，兴趣爱好，职业规划，邀约
2.vue面试题
1.v-show和v-if区别的区别：
v-show通过css display控制显示和隐藏，v-if组件真正的渲染和销毁，而不是显示和隐藏，频繁切换状态使用v-show 否则v-if
2.为何v-for要用key
快速查找到节点，减少渲染次数，提升渲染性能
3.描述vue组件声明周期mm
单组件声明周期图
挂载： beforeCreate => created => beforeMount => mounted
更新： beforeUpdate => updated
销毁： beforeDestroy => destroyed
父子组件生命周期图
挂载： parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted
更新： parent beforeUpdate => child beforeUpdate => child updated => parent updated
销毁： parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed
从以上能够看出：
挂载时，子组件是在父组件before mount后开始挂载，并且子组件先mounted，父组件随后
更新时，子组件是在父组件before update后开始更新，子组件先于父组件更新
销毁时，子组件是在父组件before destroy后开始销毁，并且是子组件先销毁，父组件随后。
4.vue组件如何通信
1.父子组件props和this.$emit
2.ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值($parent / $children与 ref类似)
3.事件总线bus：使用一个 空的 VUE 实例作为事件总线，自定义事件event.$on event.$off event.$emit
4 provide inject组件通信
5.vuex
6.$attrs和$listeners 仅仅是传递数据，而不做中间处理，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。
常见使用场景可以分为三类：
父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject API；
$attrs/$listeners
vuex
兄弟通信：
事件总线Bus；
Vuex
跨级通信：
事件总线Bus；
Vuex；
provide / inject API
$attrs/$listeners
5.描述组件渲染和更新的过程
1、vue 组件初次渲染过程
解析模板为 render 函数
触发响应式，监听 data 属性的 getter 和 setter
执行 render 函数， 生成 vnode，patch(elem,vnode)
2、vue 组件更新过程
修改 data， 触发 setter （此前在getter中已被监听）
重新执行 render 函数，生成 newVnode，patch(vnode, newVnode)
6.双向数据绑定v-model的实现原理
双向数据绑定最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的.
先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。
调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。
7.对mvvm的理解
m->model,v->view,vm->viewModel。dom通过监听事件操作vue里的data，反之vue中的data通过指令操作dom，这就是所说数据驱动视图，这就是mvvm的理解。
8.computed有何特性
缓存，data不变不会重新计算，提高性能
9.VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？
为什么要封装组件？
主要就是为了解耦，提高代码复用率。
什么是组件？
页面上可以复用的都称之为组件 它是 HTML、CSS、JS 的聚合体。
组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。
组件中的 data 为什么是一个函数？
让每个返回的实例都可以维护一份被返回对象的独立的拷贝。
10.ajax请求应该放在哪个生命周期？
mounted，因为js是单线程，ajax异步获取数据
11.如何将组件所有props传递给子组件？
父组件绑定一个自定义属性变量，然后子组件通过props使用这个变量即可。
12.如何自定实现v-model?
我们定义了model对象。model对象包含两个属性，一个是prop，一个是event。prop值text1，event的值change1，我们这里写model是为了改变默认的东西，使用我们自己定义的变量。
<input type="text" :value="text1" @input="$emit('change1', $event.target.value)" >
13.多个组件有相同逻辑，如何抽离？
使用mixin 对公共部分的逻辑进行抽离
14.何时要使用异步组件？
加载大组件，路由异步加载
15.何时使用keep-alive？
缓存组件不需要重复渲染，多个静态tab页切换，优化性能
16.何时使用beforeDestroy？
1.解绑自定义事件event.$off
2.清除定时器
3.解绑自定义dom事件，如windom.scroll等
17.什么是作用域插槽？
在solt组件中有自己的data，把它传给使用的地方
18.vuex中action和mutation有何区别？
action中处理异步，mutation不可以
mutation做原子操作，action2可以整合多个mutation
19.vue-router常用路由模式
hash默认，h5 histroy需要服务端支持
20.如何配置vue-router异步加载
component:() => import('./component')
21.请用vnode描述一个dom结构
<ul id='test'>
<p class='hehe'>这里是p标签</p>
<li>1+1</li>
</ul>
let vdom=
tag:'ul',
props:
id:'test'
,
children:[
tag:'p',
props:
class:'hehe'
,
children:'这里是p标签'
,
tag:'li',
children:1
]
22.监听data变化的核心api是什么？
vue2.0核心api是Object.defineProperty，vue3.0是启用provy实现响应式
23.vue如何监听数据变化？
vue中的watch监听数据变化
24.请描述响应式原理？
1.描述监听data变化
监听对象变化：vue2.0核心api是Object.defineProperty，vue3.0是启用provy实现响应式
监听数组变化：重写数组的push.pop.shift.unshift.splice.sort.reverse方法
2.组件渲染和更新的过程(面试题5)
25.简述diff算法过程（了解）
在执行Diff算法的过程就是调用名为 patch 的函数，比较新旧节点。一边比较一边给真实的 DOM 打补丁。patch 函数接收两个参数 oldVnode 和 Vnode，它们分别代表新的节点和之前的旧节点。这个patch函数会比较 oldVnode 和 vnode 是否是相同的, 即函数 sameVnode(oldVnode, vnode), 根据这个函数的返回结果分如下两种情况：
true：则执行 patchVnode
false：则用 vnode 替换 oldVnode
//对比过程
找到对应的真实 dom，称为 el
判断 vnode 和 oldVnode 是否指向同一个对象。
如果是，那么直接 return。
如果他们都有文本节点并且不相等，那么将 el 的文本节点设置为 vnode 的文本节点。
如果 oldVnode 有子节点而 vnode 没有，则删除 el 的子节点。
如果 oldVnode 没有子节点而 vnode 有，则将 vnode 的子节点真实化之后添加到 el
如果两者都有子节点，则执行 updateChildren 函数比较子节点。
26.vue为何是异步渲染，$nextTick何用？
因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以考虑性能问题，Vue会在本轮数据更新之后，再去异步更新视图
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
27.vue常见性能优化方式？
1.合理使用v-if和v-show，
2.合理使用computed，
3.v-for加key，
4.自定义事件，dom事件及时销毁，
5.合理使用异步组件，
6.合理使用keepalive，
7.data层级不要太深，
8.使用vue-loader在开发环境做模板编译，
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
10.使用ssr
28、VUEX 是什么？怎么使用？那种场合能用？
vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）
vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）
state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据
应用场合：购物车的数据共享、登入注册
29、vue 的指令用法
v-html //html
v-text //元素里要显示的内容
v-bind：data //绑定动态数据 ：data
v-on：click //绑定事件 @click
v-for
v-if //条件渲染指令
v-model //双向绑定，用于表单
30、vue.js的两个核心是什么？
数据驱动和组件化
31.vue中子组件调用父组件的方法?
1.直接在子组件中通过this.$parent.event来调用父组件的方法。
2.在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
3.父组件把方法传入子组件中，在子组件里直接调用这个方法。
32.vue中父组件调用子组件的方法?
父组件利用ref属性操作子组件方法。
父：
<child ref="childMethod"></child>子：
method:
test()
alert(1)
在父组件里调用test即 this.$refs.childMethod.test()