Vue31、Vue2 和 Vue3 的区别？2、v-if 与 v-for 的优先级问题？
因为 Vue3 编译后的写法跟 Vue2 不一样了
如果想看比较详细的讲解，可以看我这篇文章：
3、 和 JSX 的性能孰优孰劣？
因为 解析时会有静态节点提升这一步，而 JSX 没有，所以编译肯定是 JSX 更快，但是到了运行时的时候， 的性能会更好，因为它的更新效率更高
如果想看比较详细的讲解，可以看我这篇文章：
4、 API 比 API 好在哪？
API 写法的最大缺点在于：逻辑写的比较分散，比如我写一个逻辑，我可能需要在 、watch、data 中写有关这个逻辑的代码，比较分散，后续维护找起来成本比较高
API 又称组合式 API，你可以把一整套逻辑写在同一块地方，这样开发或维护起来都非常方便
5、Proxy 和 哪个性能好？
如果单纯从 的层面来说的话，无疑是 的性能更好
但是如果是从 Vue3 响应式处理的角度上，毫无疑问是 Proxy 更优，因为响应式涉及到了对于对象的深度遍历，如果使用 的话那么深度遍历很浪费性能，但是 Proxy 确不需要去深度遍历，它是惰性劫持的，在响应式的处理上，性能更佳
如果想看比较详细的讲解，可以看我这篇文章：
6、watch 和 的区别？
这两个都是用来监听响应式数据变化的
可维护比较差，因为你后续维护很可能会忘了你监听了哪些数据
感兴趣的可以看我这篇文章：
7、说说 Ref 和 的区别？
用来包住一个基础类型或者引用类型，如果是基础类型那么跟 ref 基本没区别，如果是引用类型的话，那么直接改深层属性是不能触发响应式的，除非直接修改引用地址，如下：
注意：改深层属性能改数据，只是没触发响应式，所以当下一次响应式触发的时候，你修改的深层数据会渲染到页面上~
的用处主要用于一些比较大的但又变化不大的数据，比如我有一个表格数据，通过接口直接获取，并且主要用在前端展示，需要修改一些深层的属性，但是这些属性并不需要立即表现在页面上，比如以下例子，我只需要展示 name、age 字段，至于 isOld 字段并不需要展示，我想要计算 isOld 但是又不想触发响应式更新，所以可以用 包起来，进而减少响应式更新，优化性能
8、说说 和 ？
可以有两个作用：
收集副作用
比如我们封装一个共用的 hooks，为了减少页面隐患，肯定会统一收集副作用，并且在组件销毁的时候去统一消除，比如以下代码：
但是这么收集很麻烦， 能帮我们做到统一收集，并且通过 stop 方法来进行清除，且 stop 执行的时候会触发 内部的
我们可以利用 & 来做一些性能优化，比如下面这个例子，我们封装一个鼠标监听的 hooks
但是如果在页面里调用多次的话，那么势必会往 身上监听很多多余的事件，造成性能负担，所以解决方案就是，无论页面里调用再多次 ，我们只往 身上加一个鼠标监听事件
全局状态管理
现在 Vue3 最火的全局状态管理工具肯定是 Pinia 了，那么你们知道 Pinia 的原理是什么吗？原理就是依赖了
所以我们完全可以自己使用 来实现自己的局部状态管理，比如我们封装一个通用组件，这个组件层级比较多，并且需要共享一些数据，那么这个时候肯定不会用 Pinia 这种全局状态管理，而是会自己写一个局部的状态管理，这个时候 就可以排上用场了
中的 就是为了这个而生
9、props 能直接解构吗？
如果直接解构的话会丢失响应式
所以想解构需要使用 或 toRef
10、 是干什么用的？
是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去
看这篇文章，详细讲了 的应用场景：
11、 和 props 的区别？
也就是 props 和 是互补的
看下面的例子
注意： 并不会自动将横杆命名的属性转成驼峰命名属性，但是 props 是会的
12、Vue3 的响应式原理是什么？
如果想看比较详细的讲解，可以看我这篇文章：
Vue21、Vue的优点？Vue的缺点？
优点：
缺点：
2、为什么说Vue是一个渐进式框架？
Vue的全家桶，你可以选择不用，或者只选几样去用，比如不用vuex
3、Vue跟React的异同点？
相同点：
不同点：
4、MVVM是什么？和MVC有何区别呢？
MVC
MVVM
注意：Vue不严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue可以使用ref进行通信
5、Vue和的区别在哪？为什么放弃用Vue？6、为什么data是个函数并且返回一个对象呢？
防止组件被多个页面使用时，造成的变量互相污染
7、使用过哪些Vue的修饰符呢？8、路由的几种模式？9、路由的钩子函数？
全局钩子
：路由跳转后
路由独享钩子
routes: [
{
path: '/xxx',
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]
组件内路由钩子
10、使用过哪些Vue的内部指令呢？11、组件之间的传值方式有哪些？12、如何设置动态class，动态style？13、v-if和v-show有何区别？14、和watch有何区别？15、Vue的生命周期，讲一讲？16、为什么v-if和v-for不建议用在同一标签？
v-for优先级高于v-if，每项都通过v-for渲染出来后再去通过v-if判断显隐，做了很多无用功
17、 vuex的有哪些属性？用处是什么？
18、不需要响应式的数据应该怎么处理？19、watch有哪些属性，分别有什么用？20、父子组件生命周期顺序？
父 -> 父 -> 父 -> 子 -> 子 -> 子 -> 子 -> 父
21、对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？22、直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？23、插槽的使用以及原理？
具体：
普通插槽普通插槽slot会被当做子元素进行解析，最终会被解析成一个_t函数，他接收的第一个参数为插槽的名称，默认是全局钩子，也就是_t('')，执行此函数进行最终元素的渲染，如果是具名插槽，则传对应的插槽名作用域插槽插槽会被封装成一个函数放置在对象中，解析时_t第二个参数接收子组件的数据，并进行渲染
24、为什么不建议用index做key，为什么不建议用随机数做key？
举个例子：
<div v-for="(item, index) in list" :key="index">{{item.name}}</div>
list: [
{ name: '小明', id: '123' },
{ name: '小红', id: '124' },
{ name: '小花', id: '125' }
]
渲染为
小明</div>
<div key="1">小红</div>
<div key="2">小花</div>
现在我执行 list.unshift({ name: '小林', id: '122' })
渲染为
<div key="0">小林</div>
小明</div>
<div key="2">小红</div>
<div key="3">小花</div>
新旧对比
<div key="0">小明</div> 小林</div>
<div key="1">小红</div> <div key="1">小明</div>
<div key="2">小花</div> <div key="2">小红</div>
<div key="3">小花</div>
可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能
现在我们使用id来做key，渲染为
<div key="123">小明</div>
小红</div>
<div key="125">小花</div>
现在我执行 list.unshift({ name: '小林', id: '122' })，渲染为
<div key="122">小林</div>
小明</div>
<div key="124">小红</div>
<div key="125">小花</div>
新旧对比
<div key="122">小林</div>
小明</div> <div key="123">小明</div>
<div key="124">小红</div> <div key="124">小红</div>
<div key="125">小花</div> <div key="125">小花</div>
可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果
用index和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很消耗性能，所以，拒绝渣男，选择老实人
25、自定义指令的钩子函数？
这里只说Vue2的
26、说说的用处？
修改数据时不能马上得到最新的DOM信息，所以需要使用，在回调中可以获取最新DOM信息
27、为什么优先是微任务？
优先是.then方法，是个微任务，这样可以避免多一次队列，进而少一次UI渲染，节省性能
28、Vue的SSR是什么？有什么好处？
SSR全称 Side
29、Vue响应式是怎么实现的？30、为什么只对对象劫持，而要对数组进行方法重写？
数组的元素大概率是成百上千的，所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写，实现数组的响应式
31、Vue的模板编译原理？
具体：
32、Vue的和watch的原理？
具体：
33、Vue.set方法的原理？
Vue.set(, key, value)
export default function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.__ob__
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}
34、Vue.方法的原理？
Vue.(, key)
export default function del (target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
const ob = target.__ob__
if (!(key in target)) return
delete target[key]
if (!ob) return
ob.dep.notify()
}
35、的原理？
维护一个数组全局钩子，每次调用时讲回调函数压入这个数组，然后优先选择微任务，在微任务回调中去执行数组中的所有回调，同时维护一个布尔值，确保每一次队列进行一次执行数组所有回调
let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
pending = false; //把标志还原为false
// 依次执行回调
for (let i = 0; i < callbacks.length; i++) {
callbacks[i]();
}
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== "undefined") {
// 如果支持promise
const p = Promise.resolve();
timerFunc = () => {
p.then(flushCallbacks);
};
} else if (typeof MutationObserver !== "undefined") {
// MutationObserver 主要是监听dom变化 也是一个异步方法
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
} else if (typeof setImmediate !== "undefined") {
// 如果前面都不支持 判断setImmediate
timerFunc = () => {
setImmediate(flushCallbacks);
};
} else {
// 最后降级采用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0);
};
}
export function nextTick(cb) {
callbacks.push(cb);
if (!pending) {
pending = true;
timerFunc();
}
}
36、说说 虚拟dom 和 diff算法 吧？
虚拟dom
虚拟dom是一个对象，一个描述真实DOM的对象，每次数据更新时，新旧虚拟DOM都会互相进行同层对比，而diff算法优化就是在此时做优化的。
diff算法
37、如果子组件改变props里的数据会发生什么？38、props怎么自定义验证
props: {
num: {
default: 1,
validator: function (value) {
// 返回值为false则验证不通过，报错
return [
1, 2, 3, 4, 5
].indexOf(value) !== -1
}
}
}
}
39、watch的属性有什么用？
Vue实例初始化的时候立即调用watch的监听回调函数
40、watch监听一个对象时，如何排除某些属性的监听
mounted() {
Object.keys(this.params)
.filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
.forEach((_) => {
this.$watch((vm) => vm.params[_], handler, {
deep: true,
});
});
},
data() {
return {
params: {
a: 1,
b: 2,
c: 3,
d: 4
},
};
},
watch: {
params: {
deep: true,
handler() {
this.getList;
},
},
}
41、审查元素时发现data-v-xxxxx，这是啥？
样式模块化的效果，在本组件的标签都会带上data-v-xxx的属性，然后通过属性选择器实现样式模块化的效果
42、vue的hook的使用？
这是我们常用的使用定时器的方式
export default{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具体执行内容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}
上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：
export default{
methods:{
fn(){
let timer = setInterval(()=>{
//具体执行代码
console.log('1');
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
如果子组件需要在时触发父组件的某一个函数，平时都会这么写：
//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},
// 子组件
mounted () {
this.$emit('childMounted')
},
使用hook的话可以更方便：
//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},
43、和是响应式的吗？
引用数据类型响应式，基础数据类型不响应式
44、Vue的el属性和$mount优先级？
同时存在时，el > $mount
45、动态指令和参数使用过吗？
<aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />
46、相同的路由组件如何重新渲染？
更改如有组件上的key即可
47、自定义v-model
export default: {
model: {
event: 'change',
prop: 'checked'
}
}
48、如何将获取data中某一个数据的初始状态？
使用this.$.data().xxx获取初始值
49、计算变量时，和哪个好？
比较好，有缓存机制，可以节省性能。而则每次更新都会重新计算，不考虑缓存
50、.push、.、.go的区别？
最后：
限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情
站长微信:Jiucxh
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
相关文章
