1、vue的基本原理
Vue的基本原理是基于MVVM（Model-View-ViewModel）模式的前端框架。它通过数据绑定和响应式系统来实现数据和视图的自动同步更新。
Vue的基本原理可以概括为以下几个步骤：
1). 解析模板：Vue通过解析模板来生成虚拟DOM（Virtual DOM）树。模板可以使用Vue提供的模板语法，将数据和视图进行绑定。
2). 创建实例：Vue通过实例化Vue对象来管理数据和视图。在实例化过程中，Vue会将模板中的数据和方法进行响应式处理，以便在数据发生变化时能够自动更新视图。
3). 数据绑定：Vue使用指令（Directives）来实现数据绑定。指令是一种特殊的HTML属性，用于将数据和视图进行关联。当数据发生变化时，Vue会自动更新视图。
4). 响应式系统：Vue使用响应式系统来追踪数据的变化。当数据发生变化时，Vue会自动更新相关的视图。Vue通过使用Object.defineProperty()方法来实现数据的劫持和监听。
5). 虚拟DOM更新：当数据发生变化时，Vue会生成新的虚拟DOM树，并与旧的虚拟DOM树进行比较。通过比较，Vue可以找出需要更新的部分，并将更新应用到实际的DOM树上，从而实现视图的更新。
6). 渲染视图：最后，Vue会将更新后的虚拟DOM树渲染到实际的DOM树上，完成视图的更新。
总结起来，Vue的基本原理是通过数据绑定和响应式系统来实现数据和视图的自动同步更新。它使用虚拟DOM来提高性能，并通过指令来实现数据和视图的关联。通过这些机制，Vue能够简化开发过程，提高开发效率。
2、MVVM、MVC、 MVP的区别
MVVM、MVC和MVP是三种常见的软件架构模式，它们在应用程序的组织和设计上有一些区别。
1). MVC（Model-View-Controller）模式：
MVC模式将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。模型负责处理数据逻辑，视图负责展示数据给用户，控制器负责处理用户输入和更新模型和视图之间的通信。MVC模式的主要特点是模型和视图之间的解耦，使得它们可以独立变化。
2). MVP（Model-View-Presenter）模式：
MVP模式也将应用程序分为三个主要部分：模型（Model）、视图（View）和展示器（Presenter）。模型负责处理数据逻辑，视图负责展示数据给用户，展示器负责处理用户输入和更新模型和视图之间的通信。与MVC模式不同的是，MVP模式中的展示器充当了控制器的角色，负责处理用户输入和更新模型和视图之间的通信。
3). MVVM（Model-View-ViewModel）模式：
MVVM模式也将应用程序分为三个主要部分：模型（Model）、视图（View）和视图模型（ViewModel）。模型负责处理数据逻辑，视图负责展示数据给用户，视图模型负责处理用户输入和更新模型和视图之间的通信。与MVC和MVP模式不同的是，MVVM模式中的视图模型充当了展示器的角色，并且视图和视图模型之间通过数据绑定实现了双向通信。
总结：
MVC、MVP和MVVM是三种常见的软件架构模式，它们在应用程序的组织和设计上有一些区别。MVC模式将应用程序分为模型、视图和控制器，MVP模式将应用程序分为模型、视图和展示器，MVVM模式将应用程序分为模型、视图和视图模型。这些模式都有助于提高代码的可维护性和可测试性，但选择哪种模式取决于具体的应用需求和团队的偏好。
3、computed 和 Methods 的区别slot是什么？有什么作用？原理是什么？
computed和methods是Vue中两种不同的方法，用于定义组件中的计算属性和方法。
computed是一种计算属性，它会根据依赖的数据动态计算出一个新的值，并将其缓存起来。当依赖的数据发生变化时，computed会自动重新计算并更新其值。computed适用于那些依赖其他数据计算得出的值，且该值不会频繁变化的情况。
Methods是一种方法，它用于定义组件中的函数。Methods中的函数可以在模板中直接调用，也可以在其他方法中调用。Methods适用于那些需要在模板中触发的函数，或者需要在多个方法中共享的函数。
slot是Vue中的一种特殊属性，用于在组件中插入内容。通过使用slot，我们可以在组件的模板中定义一些占位符，然后在使用该组件时，将具体的内容插入到占位符中。slot可以用于实现组件的可复用性和灵活性。
slot的原理是通过组件的插槽机制实现的。当使用组件时，可以在组件标签中插入内容，这些内容会被传递给组件内部的slot，然后在组件的模板中使用slot来展示这些内容。
4、过滤器的作用，如何实现一个过滤器
Vue的过滤器是一种用于格式化数据的功能。它可以在模板中对数据进行处理和转换，以便在页面上显示出符合要求的格式。下面是一个实现Vue过滤器的方法：
1）. 在Vue实例中定义过滤器：
Vue.filter('filterName', function(value) {
// 这里是过滤器的处理逻辑
return processedValue;
});
其中，'filterName'是过滤器的名称，可以根据实际需求自定义。处理逻辑在函数中实现，接受一个参数value，表示需要处理的数据，然后返回处理后的结果processedValue。
2）. 在模板中使用过滤器：
{{ data | filterName }}
其中，data是需要进行过滤的数据，filterName是之前定义的过滤器名称。通过管道符(|)将数据传递给过滤器进行处理，然后将处理后的结果显示在模板中。下面是一个示例，演示如何使用Vue过滤器对数据进行格式化：
Vue.filter('currency', function(value) {
return '$' + value.toFixed(2);
});
var app = new Vue({
el: '#app',
data: {
price: 10.5
}
});
<div id="app">
<p>Formatted Price: {{ price | currency }}</p>
</div>
在上面的示例中，定义了一个名为currency的过滤器，它将传入的值保留两位小数，并在前面添加美元符号。然后，在模板中使用过滤器对price进行格式化显示。
5、如何保存页面的当前的状态
Vue可以通过使用路由的导航守卫和Vuex来保存页面的当前状态。
1). 使用路由的导航守卫：
Vue的路由提供了导航守卫，可以在路由切换时保存和恢复页面的状态。具体步骤如下：
- 在路由配置中定义导航守卫：
const router = new VueRouter({
routes: [...],
beforeEach(to, from, next) {
// 在路由切换前保存页面状态
// 例如，将当前页面的数据保存到Vuex或本地存储中
next();
},
afterEach(to, from) {
// 在路由切换后恢复页面状态
// 例如，从Vuex或本地存储中获取之前保存的数据并恢复页面状态
}
})2). 使用Vuex：
Vuex是Vue的状态管理库，可以用于保存和管理页面的状态。具体步骤如下：
//- 安装Vuex并创建一个store实例：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 在state中定义需要保存的页面状态
// 例如，保存当前页面的数据
currentPageData: {}
},
mutations: {
// 定义mutations来修改state中的数据
// 例如，更新当前页面的数据
updateCurrentPageData(state, data) {
state.currentPageData = data;
}
}
});
//在需要保存状态的组件中使用Vuex：
export default {
computed: {
currentPageData() {
return this.$store.state.currentPageData;
}
},
methods: {
updateCurrentPageData(data) {
this.$store.commit('updateCurrentPageData', data);
}
}
}以上是两种保存页面当前状态的方法，你可以根据具体需求选择适合的方法。
6、常见的事件修饰符及其作用
以下是Vue中常见的事件修饰符及其作用：
1). `.stop`：阻止事件冒泡。当事件触发时，使用`.stop`修饰符可以阻止事件继续向上冒泡，即停止事件传播到父元素。
2). `.prevent`：阻止默认行为。当事件触发时，使用`.prevent`修饰符可以阻止元素的默认行为，例如阻止表单提交或链接跳转。
3). `.capture`：使用事件捕获模式。当事件触发时，使用`.capture`修饰符可以将事件处理程序绑定到父元素上，而不是默认的冒泡模式。
4). `.self`：只有在事件目标自身触发时才触发事件处理程序。当事件触发时，使用`.self`修饰符可以确保事件处理程序只在事件目标自身触发时才执行，而不是在其子元素触发时执行。
5). `.once`：只触发一次事件处理程序。当事件触发时，使用`.once`修饰符可以确保事件处理程序只执行一次，之后将被移除。
6). `.passive`：提高滚动性能。当绑定滚动事件时，使用`.passive`修饰符可以告诉浏览器该事件处理程序不会调用`preventDefault()`，从而提高滚动的性能。
7). `.keyCode`：监听特定按键。当绑定键盘事件时，使用`.keyCode`修饰符可以指定只有特定按键触发时才执行事件处理程序。
8). `.native`：监听组件根元素的原生事件。当在组件上使用自定义事件时，使用`.native`修饰符可以监听组件根元素的原生事件。
7、v-if、v-show、v-html 的原理
v-if、v-show和v-html是Vue.js中常用的指令，用于控制元素的显示和渲染。它们的原理和区别如下：
1). v-if指令：
?? - 原理：v-if指令根据表达式的值来决定是否渲染元素。当表达式为真时，元素会被渲染到DOM中；当表达式为假时，元素会被从DOM中移除。
?? - 区别：v-if指令在条件为假时会完全销毁和重建元素，因此在切换时有较高的切换开销。
2). v-show指令：
?? - 原理：v-show指令也是根据表达式的值来决定元素的显示与隐藏。当表达式为真时，元素会显示；当表达式为假时，元素会隐藏，但并不会从DOM中移除。?? - 区别：v-show指令在切换时只是通过修改元素的display属性来实现显示与隐藏，因此切换开销较小。
3). v-html指令：
?? - 原理：v-html指令用于将数据作为HTML插入到元素中。它会将数据解析为HTML，并将其渲染到元素的内部。
?? - 区别：v-html指令会将数据作为HTML进行解析和渲染，因此需要谨慎使用，以防止XSS攻击。
下面是一个简单的示例，演示了v-if、v-show和v-html的使用：
<template>
<div>
<button @click="toggle">Toggle</button>
<div v-if="show">This is v-if</div>
<div v-show="show">This is v-show</div>
<div v-html="htmlContent"></div>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
htmlContent: '<span style="color: red;">This is v-html</span>'
};
},
methods: {
toggle() {
this.show = !this.show;
}
}
};
</script>8、v-model 可以被用在自定义组件上吗？如果可以，如何使用？
可以使用v-model在自定义组件上进行双向数据绑定。要在自定义组件上使用v-model，需要在组件内部定义一个名为value的prop，并在组件内部使用$emit('input', newValue)来更新value的值。
以下是一个示例，展示了如何在自定义组件上使用v-model：
<template>
<div>
<input :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: ['value']
}
</script>在上面的示例中，我们定义了一个名为value的prop，并在input元素上使用:value绑定了value的值。当input元素的值发生变化时，我们使用$emit('input', $event.target.value)来触发一个名为input的自定义事件，并将新的值作为参数传递给该事件。
使用这个自定义组件时，可以像下面这样使用v-model进行双向数据绑定：
<template>
<div>
<custom-input v-model="message"></custom-input>
<p>Message: {{ message }}</p>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue'
export default {
components: {
CustomInput
},
data() {
return {
message: ''
}
}
}
</script>在上面的示例中，我们使用v-model将message属性与自定义组件的value属性进行双向绑定。当自定义组件的值发生变化时，message属性也会相应地更新。
9、data为什么是一个函数而不是对象
data被设置为一个函数而不是一个对象的原因是因为在组件中，data函数的返回值会被当作组件的初始数据。这样做的好处是可以确保每个组件实例都有自己独立的数据，而不会共享同一个数据对象。如果data是一个对象，那么所有的组件实例都会共享同一个数据对象，这样会导致数据的混乱和不可预测的结果。
通过将data设置为一个函数，我们可以在每个组件实例化时动态地生成一个新的数据对象。这样每个组件实例都有自己独立的数据，可以独立地修改和管理数据，而不会影响其他组件实例。
下面是一个示例，演示了为什么data应该是一个函数而不是一个对象：
// 错误的写法，data是一个对象
data: {
count: 0
}
// 正确的写法，data是一个函数
data() {
return {
count: 0
}
}在这个示例中，如果data是一个对象，那么所有的组件实例都会共享同一个count属性，当一个组件实例修改了count的值，其他组件实例也会受到影响。但是如果data是一个函数，每个组件实例都会生成一个新的count属性，彼此之间不会相互影响。
10、Vue 中给data 中的对象属性添加一个新的属性时会发生什么？如何解決？
当在Vue中给data中的对象属性添加一个新的属性时，新添加的属性不会被Vue实例观察到，也不会触发视图的更新。这是因为Vue在实例化时会将data中的属性转换为getter/setter，从而实现响应式的数据绑定。但是，如果在实例化之后动态添加新的属性，Vue无法检测到这个变化。
为了解决这个问题，可以使用Vue提供的`Vue.set`方法或者`this.$set`方法来添加新的属性。这两个方法都可以实现给data中的对象属性添加新的属性，并且能够触发视图的更新。
下面是一个示例代码：
// 在Vue实例中给data的对象属性添加新的属性
Vue.set(this.dataObject, 'newProperty', 'new value');
// 或者使用this.$set方法
this.$set(this.dataObject, 'newProperty', 'new value');使用`Vue.set`方法或者`this.$set`方法可以确保新添加的属性被Vue实例观察到，并且能够触发视图的更新。
11、vue中封装的数组方法有哪些，其如何实现页面更新
Vue中封装的数组方法有以下几种：
1). push：向数组末尾添加一个或多个元素。
2). pop：删除并返回数组的最后一个元素。
3). shift：删除并返回数组的第一个元素。
4). unshift：向数组的开头添加一个或多个元素。
5). splice：从指定位置删除或替换元素。
6). sort：对数组进行排序。
7). reverse：颠倒数组中元素的顺序。
这些数组方法在Vue中被封装成了响应式的方法，即当使用这些方法修改数组时，Vue会自动检测到数组的变化，并触发页面的更新。Vue通过劫持数组的原型方法，使得这些方法在执行时能够通知Vue进行更新。
例如，当使用push方法向数组中添加元素时，Vue会检测到数组的变化，并重新渲染页面，以反映出数组的最新状态。
下面是一个示例代码，演示了如何使用Vue中封装的数组方法以及如何实现页面更新：
<template>
<div>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
<button @click="addItem">添加元素</button>
</div>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'orange']
};
},
methods: {
addItem() {
this.list.push('grape');
}
}
};
</script>在上述代码中，我们使用了v-for指令来遍历数组list，并将数组中的每个元素渲染为一个li元素。当点击按钮时，调用addItem方法向数组中添加一个元素。由于使用了Vue封装的数组方法push，Vue会自动检测到数组的变化，并重新渲染页面，将新的元素添加到页面中。
12、vue 单页应用与多页应用的区别
Vue单页面应用（SPA）与多页面应用（MPA）的区别主要体现在以下几个方面：
1). 页面加载方式：
?? - SPA：整个应用只有一个HTML页面，页面内容通过异步加载的方式进行更新，用户在应用中进行导航时，只是更新当前页面的部分内容，不需要重新加载整个页面。
?? - MPA：每个页面都有自己的HTML文件，用户在应用中进行导航时，需要重新加载整个页面。
2). 路由管理：
?? - SPA：使用前端路由来管理页面的切换和导航，通过改变URL来加载不同的组件或页面内容。
?? - MPA：使用后端路由来管理页面的切换和导航，通过请求不同的URL来加载不同的HTML页面。
3). 数据交互：
?? - SPA：通过前端的API请求和后端进行数据交互，通常使用AJAX或者Fetch等技术来发送异步请求。
?? - MPA：每个页面都有自己的后端逻辑，数据交互通过页面的表单提交或者后端渲染来实现。
4). 构建方式：
?? - SPA：通常使用前端构建工具（如Vue CLI）来构建和打包整个应用，生成一个静态的HTML文件和一些静态资源文件。
?? - MPA：每个页面都有自己的HTML文件，可以使用前端构建工具来构建每个页面的静态资源文件，也可以使用后端模板引擎来生成每个页面的HTML文件。
5). 开发和维护成本：
?? - SPA：开发和维护一个单页面应用相对较为简单，因为只需要关注一个HTML文件和一些前端组件的开发和调试。
?? - MPA：开发和维护多个页面的应用相对复杂，需要关注每个页面的HTML文件和后端逻辑的开发和调试。
13、 Vue template 到render 的过程
Vue的模板渲染和更新过程可以简单分为以下几个步骤：
1). 解析模板：Vue会将模板解析成AST（抽象语法树）。
2). 编译模板：Vue将AST编译成渲染函数。
3). 创建虚拟DOM：渲染函数执行后会生成虚拟DOM（Virtual DOM）。
4). 更新虚拟DOM：当数据发生变化时，Vue会重新执行渲染函数，生成新的虚拟DOM。
5). 对比差异：Vue会将新旧虚拟DOM进行对比，找出差异。
6). 批量更新：Vue会将差异应用到实际的DOM上，进行批量更新。
在Vue中，模板可以使用两种方式进行渲染：render函数和template。
- render函数：使用render函数可以直接编写JavaScript代码来生成虚拟DOM。这种方式更加灵活，适用于复杂的场景和动态渲染。
- template：使用template可以编写类似HTML的模板语法，Vue会将模板编译成render函数。这种方式更加简洁，适用于简单的场景和静态渲染。
总结起来，Vue的模板渲染和更新过程是通过解析模板、编译模板、创建虚拟DOM、更新虚拟DOM、对比差异和批量更新等步骤完成的。而Vue的渲染方式可以通过render函数和template来实现，render函数更加灵活，template更加简洁。
14、Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？
Vue data 中某一个属性的值发生改变后，视图不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。然后，在下一个事件循环“tick”中，Vue 才会去执行实际的 DOM 更新操作，这样可以避免频繁的 DOM 操作，高性能。
范例：<<引用：它是不会立即同步执行重新渲染。因为Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。 。>>
Vue data 中某一个属性的值发生改变后，视图不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。然后，在下一个事件循环“tick”中，Vue 才会去执行实际的 DOM 更新操作，这样可以避免频繁的 DOM 操作，提高性能。
15、简述mixin、extends 的覆盖逻辑
mixin和extends是两种常见的代码复用方式，用于在面向对象编程中扩展类的功能。它们的覆盖逻辑如下：
1). mixin覆盖逻辑：
?? - 当一个类使用多个mixin时，如果多个mixin中有相同的方法或属性，后面的mixin会覆盖前面的mixin。
?? - 如果一个类同时继承了一个父类和一个mixin，且父类和mixin中有相同的方法或属性，父类的方法或属性会覆盖mixin的方法或属性。
2). extends覆盖逻辑：
?? - 当一个类继承另一个类时，如果子类中定义了与父类相同的方法或属性，子类的方法或属性会覆盖父类的方法或属性。
下面是一个JS自定义混合Mixin函数的示例：
function mixin(target, ...sources) {
Object.assign(target, ...sources);
}
const obj1 = {
foo: 'foo',
};
const obj2 = {
bar: 'bar',
};
mixin(obj1, obj2);
console.log(obj1); // 输出：{ foo: 'foo', bar: 'bar' }
16、描述下Vue自定义指令
Vue自定义指令是一种在Vue应用中扩展HTML元素的能力。通过自定义指令，我们可以在元素上添加自定义行为和功能。自定义指令可以用于处理DOM事件、操作DOM元素、修改元素样式等。
以下是一个示例，展示如何创建一个简单的自定义指令：
// 注册一个全局自定义指令
Vue.directive('highlight', {
bind: function (el, binding) {
// 在元素被绑定时执行的代码
el.style.backgroundColor = binding.value;
},
update: function (el, binding) {
// 在元素更新时执行的代码
el.style.backgroundColor = binding.value;
}
});在上面的示例中，我们创建了一个名为`highlight`的自定义指令。该指令在元素被绑定时将元素的背景颜色设置为指令的值，并在元素更新时更新背景颜色。
使用自定义指令时，我们可以在HTML中通过`v-highlight`来调用该指令，并传递一个值作为指令的参数。例如：
<div v-highlight="'yellow'">这是一个自定义指令示例</div>上述代码将会将`div`元素的背景颜色设置为黄色。
需要注意的是，自定义指令可以是全局的，也可以是局部的。全局指令可以在整个应用中使用，而局部指令只能在指定的组件中使用。
17、子组件可以直接改变父组件的数据吗？
在Vue中，子组件是不能直接修改父组件的数据的。这是因为Vue遵循了单向数据流的原则，父组件向子组件传递数据，子组件可以通过props接收并使用这些数据，但不能直接修改它们。如果子组件需要修改父组件的数据，可以通过触发事件的方式来通知父组件进行相应的修改。
下面是一个示例，演示了如何在Vue中实现子组件修改父组件的数据：
//父组件：
<template>
<div>
<h2>父组件</h2>
<p>父组件的数据：{{ parentData }}</p>
<child-component :childData="parentData" @update-parent-data="updateParentData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: '父组件的初始数据'
};
},
methods: {
updateParentData(newData) {
this.parentData = newData;
}
}
};
</script>
//子组件：
<template>
<div>
<h3>子组件</h3>
<p>子组件的数据：{{ childData }}</p>
<button @click="updateParentData">修改父组件数据</button>
</div>
</template>
<script>
export default {
props: ['childData'],
methods: {
updateParentData() {
const newData = '子组件修改后的数据';
this.$emit('update-parent-data', newData);
}
}
};
</script>在上面的示例中，父组件通过props将parentData传递给子组件，并在子组件中显示。子组件通过点击按钮触发updateParentData方法，该方法通过$emit触发update-parent-data事件，并将新的数据传递给父组件。父组件接收到事件后，调用updateParentData方法来更新parentData的值。
18、vue是如何收集依赖的？
Vue通过依赖收集来追踪数据的变化，并在数据变化时更新相关的视图。依赖收集是Vue实现响应式原理的关键步骤之一。
Vue的依赖收集主要分为两个阶段：组件初始化阶段和运行时阶段。
在组件初始化阶段，Vue会对模板进行解析，找出其中的数据绑定和指令，并创建一个Watcher实例来监听这些数据的变化。Watcher实例会将自身添加到对应数据的依赖列表中。
在运行时阶段，当数据发生变化时，会触发对应数据的setter方法。setter方法会通知依赖列表中的Watcher实例进行更新操作，从而更新相关的视图。
具体来说，Vue的依赖收集过程如下：
1). 在组件初始化阶段，Vue会对模板进行解析，找出其中的数据绑定和指令。
2). 对于每个数据绑定和指令，Vue会创建一个Watcher实例，并将其添加到对应数据的依赖列表中。
3). 当数据发生变化时，会触发对应数据的setter方法。
4). setter方法会通知依赖列表中的Watcher实例进行更新操作。
5). Watcher实例会调用对应的更新函数，更新相关的视图。
通过依赖收集，Vue能够精确地追踪数据的变化，并在数据变化时更新相关的视图，实现了响应式的效果。
21、vue如何监听对象或者数组某个属性的变化
Vue提供了一种称为"响应式"的机制来监听对象或数组某个属性的变化。通过使用Vue的`$watch`方法，可以实现对对象或数组属性的监听。
下面是一个示例，演示了如何使用Vue的`$watch`方法来监听对象或数组属性的变化：
// 创建一个Vue实例
var vm = new Vue({
data: {
obj: {
name: 'John',
age: 25
},
arr: [1, 2, 3]
},
created: function() {
// 监听对象属性的变化
this.$watch('obj.name', function(newVal, oldVal) {
console.log('obj.name发生了变化：', newVal, oldVal);
});
// 监听数组属性的变化
this.$watch('arr', function(newVal, oldVal) {
console.log('arr发生了变化：', newVal, oldVal);
}, { deep: true });
}
});
// 修改对象属性的值
vm.obj.name = 'Tom'; // 输出：obj.name发生了变化： Tom John
// 修改数组属性的值
vm.arr.push(4); // 输出：arr发生了变化： [1, 2, 3, 4] [1, 2, 3]在上面的示例中，我们通过`this.$watch`方法来监听`obj.name`属性和`arr`属性的变化。当`obj.name`属性发生变化时，会触发回调函数并打印新值和旧值；当`arr`属性发生变化时，也会触发回调函数并打印新值和旧值。需要注意的是，对于数组属性的监听，需要设置`deep`选项为`true`，以便深度监听数组的变化。
22、vue模版编译原理
Vue的模板编译原理是将模板字符串转换为渲染函数的过程。在编译过程中，Vue会将模板字符串解析成AST（抽象语法树），然后通过遍历AST生成渲染函数。渲染函数可以直接被执行，生成虚拟DOM，并最终渲染到页面上。
23、对SSR的理解
SSR（服务器端渲染）是指在服务器端将Vue组件渲染成HTML字符串，然后将HTML字符串发送给客户端进行展示。相比于传统的SPA（单页面应用），SSR具有更好的SEO优化、更快的内容到达时间和更好的首屏加载速度等优势。
24、对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（单页面应用）是指在一个页面中加载所有必要的资源，并通过前端路由实现页面的切换和内容的更新。SPA的优点包括前后端分离、用户体验好、开发效率高等；缺点包括首屏加载缓慢、SEO不友好等。
25、template和jsx的有什么分别？
template是Vue中的模板语法，使用HTML标签和Vue的指令来描述页面的结构和逻辑。而JSX是一种JavaScript的语法扩展，可以在JavaScript代码中直接编写HTML结构。它们的区别在于书写方式不同，template更接近于传统的HTML模板，而JSX更接近于JavaScript代码。
26、vue初始化页面闪动问题
Vue初始化页面闪动问题可以通过在页面加载时使用v-cloak指令来解决。v-cloak指令可以在Vue实例编译完成前隐藏元素，直到Vue实例编译完成后再显示元素，从而避免页面闪动。
27、extend 有什么作用
extend是Vue的全局API，用于创建一个继承于Vue的子类。通过extend可以创建一个可复用的组件构造器，可以在多个Vue实例中使用。
28、mixin 和mixins 区别
mixin是Vue中的一个选项，用于混入（合并）组件的选项。通过mixin可以将一些公共的选项、方法、生命周期等混入到多个组件中，实现代码的复用。而mixins是一个数组，可以包含多个mixin对象。
29、created和mounted的区别
created是Vue实例创建完成后调用的生命周期钩子函数，此时Vue实例已经完成了数据观测、属性和方法的运算等初始化工作。而mounted是Vue实例挂载到DOM元素后调用的生命周期钩子函数，此时Vue实例已经完成了模板的编译和渲染，并将其挂载到了页面上。
31、一般在哪个生命周期请求异步数据
一般在mounted生命周期钩子函数中请求异步数据。因为在mounted阶段，Vue实例已经完成了模板的编译和渲染，并将其挂载到了页面上，此时可以进行异步数据的请求。
32、keep-alive 中的生命周期哪些
在使用keep-alive组件包裹的组件中，会有两个额外的生命周期钩子函数activated和deactivated。activated在组件被激活时调用，deactivated在组件被停用时调用。
33、如何获取页面的hash变化
获取页面的hash变化可以使用window对象的hashchange事件来监听。当页面的hash值发生变化时，该事件会被触发，我们可以通过监听该事件来获取页面的hash变化。
window.addEventListener('hashchange', function() {
var hash = window.location.hash;
console.log('当前页面的hash值为：', hash); });34、route和router 的区别
route是指路由的具体配置，包括路径、组件、参数等信息。而router是指路由器，负责管理和控制路由的跳转和导航。
35、如何定义动态路由？如何获取传过来的动态参数？
在Vue-router中，可以通过在路由配置中使用冒号(:)来定义动态路由。例如：
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })在上述例子中，:id表示动态的参数，可以根据实际情况进行替换。获取传过来的动态参数可以通过$route.params来获取。例如：
this.$route.params.id36、vue-router 路由钩子在生命周期的体现
vue-router路由钩子在生命周期的体现是通过在组件的生命周期中定义一些特定的方法来实现的。常用的路由钩子有beforeEach、beforeResolve、afterEach等。这些钩子函数会在路由导航过程中的不同阶段被调用，可以用来进行一些路由导航的控制和处理。
const router = new VueRouter({ routes: [...], });
router.beforeEach((to, from, next) => { // 在路由导航之前执行的逻辑 console.log('beforeEach'); next(); });
router.beforeResolve((to, from, next) => { // 在路由导航之前解析异步组件 console.log('beforeResolve'); next(); });
router.afterEach((to, from) => { // 在路由导航之后执行的逻辑
console.log('afterEach'); });37、vue-router跳转和location.href有什么区别
vue-router跳转和location.href的区别在于vue-router跳转是通过调用router.push或router.replace方法来实现的，而location.href是直接修改浏览器的URL地址来实现跳转。vue-router跳转可以实现单页应用的无刷新跳转，并且可以利用路由钩子进行一些额外的处理，而location.href则是传统的页面跳转方式，会导致页面的刷新。
38、 params和query的区别
query和params都是用来传递参数的，但有一些区别。query参数是通过URL的查询字符串传递的，可以在URL中直接看到，而params参数是通过路由路径中的占位符传递的，不会在URL中显示。
另外，query参数可以传递任意类型的值，而params参数只能传递字符串类型的值。
39、vue-router 导航守卫有哪些
Vue Router提供了多种导航守卫，用于在路由切换过程中进行控制和处理。以下是Vue Router的导航守卫：
1). 全局前置守卫（beforeEach）：在路由切换开始之前调用，可以用来进行全局的权限验证或者其他的全局处理。
2). 全局解析守卫（beforeResolve）：在路由切换开始之前调用，与全局前置守卫类似，但是在所有组件内守卫和异步路由组件被解析之后调用。
3). 全局后置钩子（afterEach）：在路由切换完成之后调用，可以用来进行一些全局的清理工作或者其他的全局处理。
4). 路由独享的守卫（beforeEnter）：在单个路由配置中定义的守卫，只对该路由生效。
5). 组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：在组件内部定义的守卫，用于控制组件的进入、更新和离开。
以上是Vue Router提供的导航守卫，你可以根据需要选择合适的守卫来实现路由切换时的控制和处理。
40、对前端路由的理解
前端路由是指在单页应用（SPA）中，通过改变URL来实现页面之间的切换和导航的一种技术。它允许用户在不刷新整个页面的情况下，通过改变URL来加载不同的内容，从而提供更流畅的用户体验。
前端路由的实现通常依赖于浏览器的History API或Hash（#）来管理URL的变化。当用户点击链接或执行某些操作时，前端路由会拦截URL的变化，并根据URL的不同部分来加载相应的页面内容。这样，用户就可以在不刷新页面的情况下浏览不同的页面。
前端路由的优点包括：
1). 提供更好的用户体验：用户可以在不刷新页面的情况下浏览不同的内容，页面切换更加流畅。
2). 提高应用性能：前端路由可以减少服务器的负载，因为不需要每次都请求完整的页面。
3). 更好的代码组织：前端路由可以将不同的页面逻辑分离，使代码更易于维护和扩展。
前端路由的实现方式有多种，其中最常见的是使用框架提供的路由库，如Vue-Router、React-Router等。这些库提供了一套API和机制，用于定义路由规则、处理URL变化以及加载相应的组件或页面内容。
在Vue-Router中，可以通过定义路由表来配置前端路由。路由表由一组路由对象组成，每个路由对象包含了URL路径、对应的组件以及其他配置信息。当URL发生变化时，Vue-Router会根据路由表的配置来匹配对应的路由，并加载相应的组件。
通过使用前端路由，开发者可以更灵活地控制页面的展示和交互逻辑，提供更好的用户体验和性能。同时，前端路由也为单页应用的开发提供了更多的可能性。
41、vuex的原理
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性。
Vuex的原理可以概括为以下几个关键概念：
1). State（状态）：Vuex使用一个单一的状态树来存储整个应用的状态。这个状态树是响应式的，当状态发生变化时，相关的组件会自动更新。
2). Getters（获取器）：Getters用于从状态树中派生出一些衍生状态，类似于计算属性。它们可以接收状态作为参数，并返回一个新的值。
3). Mutations（变更）：Mutations是唯一允许修改状态的方式。它们是同步的事务，用于改变状态树中的数据。每个Mutation都有一个字符串类型的事件类型和一个回调函数，该回调函数接收当前状态和负载作为参数。
4). Actions（动作）：Actions用于处理异步操作和复杂的业务逻辑。它们可以包含任意异步操作，并通过提交Mutations来改变状态。Actions可以接收一个上下文对象，该对象包含了与Store实例具有相同方法和属性的对象。
5). Modules（模块）：Modules允许将Store分割成多个模块，每个模块都有自己的状态、Getter、Mutation和Action。这样可以更好地组织和管理大型应用程序的状态。
通过以上几个关键概念，Vuex实现了一个单一的数据源，使得状态管理更加简单和可预测。它提供了一种结构化的方式来管理和共享状态，使得不同组件之间的通信更加方便和高效。
42、Vuex中action和mutation的区别
在Vuex中，mutation和action是两个核心概念，用于管理和修改应用程序的状态。它们之间有以下区别：
1). Mutation（变更）：
?? - Mutation是用于修改状态的同步操作。
?? - Mutation必须是同步函数，它会直接修改状态。
?? - Mutation通过提交(commit)来触发，可以在组件中使用`this.$store.commit('mutationName')`来调用。
?? - Mutation的主要作用是跟踪状态的变化，以便在开发工具中进行调试。
2). Action（动作）：
?? - Action是用于执行异步操作或复杂的逻辑。
?? - Action可以包含任意异步操作，例如发送网络请求、访问API等。
?? - Action通过分发(dispatch)来触发，可以在组件中使用`this.$store.dispatch('actionName')`来调用。
?? - Action可以通过调用Mutation来修改状态，但它也可以直接修改状态。
?? - Action可以用于处理多个Mutation的连续操作。
总结：
Mutation用于同步修改状态，而Action用于执行异步操作或复杂的逻辑。在实际开发中，我们通常使用Action来处理异步操作，并在需要时调用Mutation来修改状态。
43、 vuex 和localStorage 的区别
44、 Redux 和 vuex 有什么区别，它们的共同思想
45、为什么要用 Vuex 或者 Redux
46、vuex有哪几种属性？
47、vuex和单纯的全局对象有什么区别？
48、为什么vuex的mutation 中不能做异步操作？
Vuex的mutation中不能做异步操作的原因是为了保证状态的变化是可追踪和可预测的。由于mutation是同步的，可以方便地追踪状态的变化和调试。如果允许在mutation中做异步操作，会导致状态的变化变得不可预测，可能会出现状态不一致的问题。
49、vuex的严格模式是什么，有什么作用，如何开启？
Vuex的严格模式是一种开发模式，用于检测对状态的修改是否是通过mutation进行的。在严格模式下，如果不通过mutation来修改状态，会抛出一个错误。严格模式可以帮助我们更好地遵循Vuex的设计原则，保证状态的一致性和可追踪性。可以通过在创建store时设置strict选项来开启严格模式
50、如何在组件中批量使用Vuex的getter属性
在组件中批量使用Vuex的getter属性可以使用mapGetters辅助函数。mapGetters函数可以将getter映射为组件的计算属性，方便在模板中使用。具体用法如下：
import { mapGetters } from 'vuex'
export default { computed: { ...mapGetters(['getter1', 'getter2']) } }51、vue3.0有什么更新
关于Vue 3.0的更新，以下是一些主要的更新：
52、如何在组件中批量使用Vuex的setter属性
在组件中批量使用Vuex的setter属性，可以通过使用mapMutations辅助函数来实现。首先，在组件中引入mapMutations函数，然后在computed属性中使用该函数将需要的mutation映射到组件的方法中。例如：
import { mapMutations } from 'vuex';
export default {
computed: { ...mapMutations(['SET_NAME', 'SET_AGE']), },
methods: {
// 使用SET_NAME
mutation setName(name) { this.SET_NAME(name); },
// 使用SET_AGE
mutation setAge(age) { this.SET_AGE(age); }, }, };53、如何在组件中重复使用Vuex的mutation
在组件中重复使用Vuex的mutation，可以通过使用mapMutations辅助函数来实现。首先，在组件中引入mapMutations函数，然后在computed属性中使用该函数将需要的mutation映射到组件的方法中。然后，可以在组件的方法中多次调用映射的mutation。例如：
import { mapMutations } from 'vuex';
export default {
computed: { ...mapMutations(['INCREMENT']), },
methods: { // 多次调用INCREMENT
mutation incrementCounter() {
this.INCREMENT();
this.INCREMENT();
this.INCREMENT(); }, }, };54、vue3.0 为什么要用 proxy?
在Vue 3.0中，使用Proxy作为响应式系统的实现方式，主要有以下几个原因：
1).Proxy相比于Vue 2.x中的defineProperty，具有更强大的功能和更好的性能。Proxy可以拦截更多的操作，包括属性的读取、赋值、删除等，而defineProperty只能拦截属性的读取和赋值。
2).Proxy可以直接监听对象的整个属性树，而defineProperty需要遍历对象的每个属性进行设置，对于嵌套对象的监听，Proxy更加高效。
3).Proxy可以监听数组的变化，而defineProperty无法直接监听数组的变化，需要通过hack的方式实现。
4).Proxy可以监听动态新增的属性，而defineProperty只能监听已经存在的属性。
5).Proxy的使用更加灵活，可以通过Reflect对象进行操作的拦截和代理。
55、Composition API与ReactHook很像，区别是什么
Composition API与React Hook的相似之处在于它们都提供了一种更灵活和可组合的方式来处理组件的逻辑。然而，它们之间也存在一些区别：
1).语法不同：Composition API使用了基于函数的API，而React Hook使用了基于钩子函数的API。
2).响应式系统不同：Vue的Composition API内置了响应式系统，可以方便地处理组件的状态和副作用。而React Hook需要使用额外的库（如useState、useEffect等）来处理状态和副作用。
3).组件生命周期不同：Vue的Composition API没有明确的生命周期钩子函数，而是通过使用onMounted、onUpdated等函数来处理组件的生命周期。React Hook则使用了useEffect等钩子函数来处理组件的生命周期。
4).组件间通信不同：Vue的Composition API提供了provide和inject函数来实现组件间的依赖注入，而React Hook则使用了Context API来实现组件间的通信。
5).使用场景不同：Vue的Composition API更适合于大型复杂的组件，可以更好地组织和复用逻辑。React Hook更适合于简单的函数组件，可以更方便地处理状态和副作用。
56、vue 3.0 中的 Vue CompositionAPI?
Vue 3.0中引入了Composition API，它是一种新的API风格，用于更好地组织和复用组件的逻辑。Vue Composition API的主要特点包括：
1).基于函数的API：Composition API使用了基于函数的API，可以将组件的逻辑拆分为多个函数，更加灵活和可组合。
2).逻辑组合：可以通过使用函数来组合和复用逻辑，将相关的逻辑放在一起，提高代码的可读性和可维护性。
3).更好的类型推导：Composition API使用了TypeScript的类型推导，可以更好地支持类型检查和IDE的智能提示。
4).更好的代码组织：可以将相关的逻辑放在一起，提高代码的可读性和可维护性。
5).更好的性能：Composition API使用了Proxy作为响应式系统的实现方式，具有更好的性能和更强大的功能。
57、defineProperty和proxy的区别
defineProperty和Proxy都是用于拦截对象的操作，但它们之间存在一些区别：
1).功能不同：defineProperty只能拦截属性的读取和赋值操作，而Proxy可以拦截更多的操作，包括属性的读取、赋值、删除等。
2).监听数组变化：Proxy可以直接监听数组的变化，而defineProperty无法直接监听数组的变化，需要通过hack的方式实现。
3).动态新增属性：Proxy可以监听动态新增的属性，而defineProperty只能监听已经存在的属性。
4).性能不同：Proxy相比于defineProperty具有更好的性能，特别是在处理嵌套对象和大量属性时，Proxy更加高效。
5).兼容性不同：Proxy是ES6的新特性，不兼容低版本的浏览器，而defineProperty是ES5的特性，兼容性较好。
58、vue3.0常用的U组件库
在Vue 3.0中，常用的UI组件库有以下几个：
1).Element Plus：Element Plus是一套基于Vue 3.0的UI组件库，是对Element UI的升级和重构，提供了丰富的组件和样式，适用于各种类型的项目。
2).Ant Design Vue：Ant Design Vue是一套基于Vue 3.0的UI组件库，是对Ant Design的Vue版本，提供了一套美观、实用的组件和样式。
3).Vant：Vant是一套基于Vue 3.0的移动端UI组件库，提供了丰富的移动端组件和样式，适用于开发移动端应用。
4).PrimeVue：PrimeVue是一套基于Vue 3.0的UI组件库，提供了丰富的组件和样式，适用于各种类型的项目。
5).Vue Material：Vue Material是一套基于Vue 3.0的UI组件库，提供了一套美观、实用的组件和样式。
59、对虚拟DOM的理解？
虚拟DOM是一种将页面上的元素抽象成JavaScript对象的概念。它是为了提高页面渲染性能而被引入的。
虚拟DOM（Virtual DOM）是一种将真实DOM抽象为JavaScript对象的技术。它的主要思想是通过在内存中构建一个虚拟的DOM树来代替直接操作真实的DOM，然后通过比较虚拟DOM树的差异，最终只更新需要更新的部分，从而提高页面的渲染性能。
虚拟DOM的工作原理如下：
1).初始化阶段：通过解析模板或组件的render函数，构建虚拟DOM树。
2).更新阶段：当数据发生变化时，重新构建虚拟DOM树，并与之前的虚拟DOM树进行比较，找出差异。
3).渲染阶段：根据差异，只更新需要更新的部分，将变化应用到真实的DOM上。
虚拟DOM的优势包括：
1).提高性能：通过比较虚拟DOM树的差异，最终只更新需要更新的部分，减少了对真实DOM的操作，提高了页面的渲染性能。
2).跨平台：虚拟DOM是基于JavaScript对象的抽象，可以在不同的平台上运行，如浏览器、服务器等。
3).组件化开发：虚拟DOM可以将组件的结构、样式和行为封装在一起，提供了更好的组件化开发体验。
60、虚拟DOM的解析过程
虚拟DOM的解析过程包括以下几个步骤：
1).创建虚拟DOM树：将页面上的元素抽象成JavaScript对象，形成虚拟DOM树。
2).更新虚拟DOM树：当页面发生变化时，通过比较新旧虚拟DOM树的差异，找出需要更新的部分。
3).生成变更操作：根据差异，生成需要对真实DOM进行的操作，例如添加、删除、修改等。
4).应用变更操作：将生成的变更操作应用到真实DOM上，更新页面的显示。
61、为什么要用虛拟DOM
使用虚拟DOM的好处有以下几点：
1).提高性能：通过将真实DOM操作转换为对虚拟DOM的操作，减少了对真实DOM的直接操作次数，从而提高了页面的渲染性能。
2).简化逻辑：通过对比新旧虚拟DOM树的差异，只更新需要变更的部分，避免了手动操作真实DOM的复杂逻辑。
3).跨平台支持：虚拟DOM是基于JavaScript对象的抽象，可以在不同平台上使用相同的代码逻辑。
62、虚拟DOM真的比真实DOM性能好吗
虚拟DOM相对于直接操作真实DOM来说，可以提高页面的渲染性能。因为虚拟DOM可以通过比较新旧虚拟DOM树的差异，只更新需要变更的部分，避免了对整个真实DOM的操作。但是在某些特定场景下，直接操作真实DOM可能会更高效，例如对于简单的静态页面。
66、虛拟DOM真正意义
虚拟DOM的真正意义在于提高页面的渲染性能和简化开发逻辑。通过将真实DOM操作转换为对虚拟DOM的操作，可以减少对真实DOM的直接操作次数，从而提高页面的渲染性能。同时，通过对比新旧虚拟DOM树的差异，只更新需要变更的部分，简化了开发逻辑。
67、虚拟DOM 常见误区
虚拟DOM的常见误区有以下几点：
1).虚拟DOM一定比真实DOM性能好：虚拟DOM相对于直接操作真实DOM来说，可以提高页面的渲染性能，但并不是在所有情况下都比真实DOM性能好。
2).虚拟DOM就是用来替代真实DOM的：虚拟DOM并不是要完全替代真实DOM，而是通过对比新旧虚拟DOM树的差异，只更新需要变更的部分，简化真实DOM的操作。
3).虚拟DOM一定比直接操作真实DOM更简单：虚拟DOM可以简化开发逻辑，但在某些复杂场景下，对虚拟DOM的操作可能会比直接操作真实DOM更复杂。
68、VDOM 树变数组
将虚拟DOM树转换为数组的过程称为VDOM树变数组。这个过程可以通过遍历虚拟DOM树，将每个节点转换为数组中的一个元素，并按照一定的规则组织起来。
69、为什么虛拟DOM可以提高渲染速度
虚拟DOM可以提高渲染速度的原因有以下几点：
1).减少对真实DOM的操作次数：通过将真实DOM操作转换为对虚拟DOM的操作，可以减少对真实DOM的直接操作次数，从而提高渲染速度。
2).批量更新：虚拟DOM可以通过比较新旧虚拟DOM树的差异，只更新需要变更的部分，避免了对整个真实DOM的操作，从而提高渲染速度。
3).跨平台支持：虚拟DOM是基于JavaScript对象的抽象，可以在不同平台上使用相同的代码逻辑，提高了开发效率。
70、Virtual DoM的优势
Virtual DOM相对于直接操作真实DOM的优势有以下几点：
1).提高性能：通过减少对真实DOM的直接操作次数和批量更新的方式，提高了页面的渲染性能。
2).简化逻辑：通过对比新旧虚拟DOM树的差异，只更新需要变更的部分，简化了开发逻辑。
3).跨平台支持：虚拟DOM是基于JavaScript对象的抽象，可以在不同平台上使用相同的代码逻辑，提高了开发效率。
71.对重排和重绘的理解。列举一个重绘的例子。v-show是重绘吗？
重排（reflow）指的是浏览器根据DOM结构和样式计算元素的几何属性（例如位置、大小等），并确定元素在页面中的布局。当页面的布局发生改变时，浏览器需要重新计算元素的几何属性，这个过程就是重排。重排是一项非常消耗性能的操作，因为它会触发浏览器重新布局整个页面。
重绘（repaint）指的是浏览器根据元素的样式属性重新绘制元素的外观。当元素的样式属性发生改变时，浏览器会重新绘制元素的外观，这个过程就是重绘。重绘的性能开销相对较小，因为它只涉及到元素的外观绘制，而不需要重新计算元素的几何属性。
重绘的例子是改变元素的背景颜色。当我们通过修改元素的背景颜色样式属性时，浏览器会重新绘制元素的背景颜色，但不会触发重新计算元素的几何属性，因此这个操作只会引起重绘，而不会触发重排。
v-show是通过修改元素的display样式属性来控制元素的显示和隐藏。当v-show的值从false变为true时，浏览器会重新绘制元素的外观，但不会触发重新计算元素的几何属性，因此v-show操作只会引起重绘，而不会触发重排。
72.对函数中的this的理解。箭头函数的this指向哪里？setTimeout中的this指向？
函数中的this是指当前执行函数的上下文对象。在普通函数中，this的指向是根据函数的调用方式来确定的。而在箭头函数中，this的指向是根据函数的声明位置来确定的。
箭头函数的this指向是指向函数声明时的父级作用域。这意味着箭头函数中的this与外部作用域中的this是一样的。例如，如果箭头函数是在全局作用域中声明的，那么箭头函数中的this将指向全局对象。
而在setTimeout函数中，函数的执行上下文是在延迟执行的时候确定的。在ES5中，setTimeout函数中的函数的执行上下文是全局对象。而在ES6的箭头函数中，setTimeout函数中的箭头函数的执行上下文与箭头函数声明时的父级作用域的this是一样的。
// 普通函数中的this指向调用者
function normalFunction() {
console.log(this);
}
normalFunction(); // 输出：全局对象
// 箭头函数中的this指向声明时的父级作用域
const arrowFunction = () => {
console.log(this);
}
arrowFunction(); // 输出：全局对象
// setTimeout中的this指向全局对象
setTimeout(function() {
console.log(this);
}, 1000); // 输出：全局对象
// setTimeout中的箭头函数的this指向声明时的父级作用域
setTimeout(() => {
console.log(this);
}, 1000); // 输出：全局对象
73.对jquery和vue框架各自的作用？
jQuery和Vue框架分别有以下作用：
jQuery的作用：
?? - DOM操作：jQuery是一种轻量级的JavaScript库，主要用于简化DOM操作。它提供了简洁的语法和强大的选择器，使得开发者可以更方便地操作和管理网页中的元素。
?? - 事件处理：jQuery提供了丰富的事件处理方法，可以方便地绑定和触发各种事件，例如点击、滚动、鼠标移动等。
?? - 动画效果：jQuery提供了丰富的动画效果方法，可以实现元素的淡入淡出、滑动、展开收起等动态效果。
?? - AJAX请求：jQuery封装了AJAX请求的方法，可以方便地进行异步数据交互，例如获取服务器数据、提交表单等。
Vue框架的作用：
?? - 响应式：Vue是一个响应式框架，它可以自动追踪数据的变化，并实时更新视图。开发者只需要关注数据的变化，而不需要手动操作DOM元素。?? - 组件化：Vue支持组件化开发，可以将一个页面拆分成多个独立的组件进行开发和维护。每个组件都有自己的数据和视图，可以方便地复用和组合。
?? - 插件机制：Vue提供了插件机制，可以方便地扩展其功能。开发者可以根据需求开发自己的插件，并将其集成到Vue中。
?? - 数据流：在Vue中，通过父子组件之间的props和事件传递数据，可以实现组件之间的数据流。这种数据流的管理方式更加清晰和可控。
?? - 模板语法：Vue提供了简洁直观的模板语法，可以方便地描述视图和数据的关系。开发者可以通过模板语法快速构建页面。
74.vue中数据初始化是在哪个函数之前执行，异步是在哪个函数之前执行？
在Vue中，数据初始化是在created钩子函数之后执行的，异步操作是在beforeCreate钩子函数之后执行的。
在Vue实例的生命周期中，beforeCreate钩子函数是在实例被创建之前被调用的，此时实例的data、methods等属性还未被初始化。而created钩子函数是在实例被创建之后被调用的，此时实例的data、methods等属性已经被初始化。
因此，如果你在created钩子函数中执行了访问数据库的方法，那么这些方法会在数据初始化之后被调用。而如果你在beforeCreate钩子函数中执行了异步操作，那么这些异步操作会在数据初始化之前被调用。
请注意，由于异步操作的执行时间不确定，所以在beforeCreate钩子函数中执行的异步操作可能会在created钩子函数中执行的访问数据库的方法之前或之后完成。
75.CSS中如何使添加的样式在当前组件有效？
使用scoped属性,scoped属性可以将样式限定在当前组件的作用域内，不会渗透到子组件中。scoped样式是一种将样式限制在组件范围内的方式，它会自动为组件的样式添加一个唯一的哈希值，以确保样式不会影响到其他组件。CSS模块是一种将样式模块化的方式，它会为每个类名生成一个唯一的哈希值，以确保类名不会重复。
6.有没有尝试项目优化？
以下是一些Vue项目优化的方案：
1). 使用异步组件：将页面分割成多个异步组件，按需加载，减少首次加载时间。
2). 使用路由懒加载：将路由按需加载，减少首次加载时间。
3). 使用CDN加速：将一些常用的第三方库（如Vue、Vue Router、Vuex）通过CDN引入，减少打包体积和加载时间。
4). 使用Webpack的代码分割功能：将项目代码分割成多个小块，按需加载，减少首次加载时间。
5). 使用Vue的keep-alive组件：对于频繁切换的组件，使用keep-alive组件进行缓存，减少组件的销毁和重新创建。
6). 使用Vue的虚拟滚动：对于长列表或大数据量的表格，使用虚拟滚动来优化性能，只渲染可见区域的内容。
7). 使用Vue的异步更新：对于一些不需要立即更新的数据，可以使用Vue的异步更新机制，减少不必要的渲染。
8). 使用Vue的生命周期钩子函数：合理使用Vue的生命周期钩子函数，优化组件的初始化和销毁过程。
9). 使用Vue的computed属性：将一些复杂的计算逻辑放在computed属性中，减少重复计算，提高性能。
10). 使用Vue的v-if和v-show指令：根据实际需求选择合适的指令，减少不必要的DOM操作。
11). 使用Vue的事件优化：合理使用事件修饰符和事件委托，减少事件绑定的数量。
12). 使用Vue的异步组件和动态导入：将一些不常用的组件使用异步组件和动态导入，减少首次加载时间。
77.有没有自己搭建过vue的脚手架？
我没有自己搭建过Vue的脚手架，但是我可以为您介绍一下前端引入Vue.js和使用Vue脚手架的区别。
前端引入Vue.js是指在HTML文件中通过script标签引入Vue.js库文件，然后在JavaScript代码中使用Vue.js的语法和功能来开发前端应用。这种方式需要手动配置项目的结构和构建工具，并且需要手动管理依赖和打包等操作。
而使用Vue脚手架（例如Vue CLI）可以更方便地搭建和管理Vue项目。Vue脚手架提供了一套完整的项目结构和开发工具，包括自动化的构建、热重载、代码分割、模块化等功能。通过命令行工具可以快速创建项目，并且可以通过插件和配置文件来定制项目的特性和功能。使用Vue脚手架可以大大提高开发效率，减少配置和管理的工作量。
总结起来，前端引入Vue.js需要手动配置和管理项目，而使用Vue脚手架可以快速搭建和管理Vue项目，提高开发效率。
78.v-for指令key的作用？
在Vue.js中，v-for指令用于循环渲染列表。在循环渲染时，我们需要为每个循环项提供一个唯一的key值。这个key值的作用是帮助Vue.js识别每个循环项的身份，以便在更新列表时进行高效的DOM操作。如果没有提供key值，Vue.js会使用默认的索引作为key，但这样可能会导致一些问题，例如在列表中插入或删除项时可能会导致错误的渲染。
79.在Vue使用中可能会遇到的问题？
在Vue使用中可能会遇到一些坑，例如在数据更新后立即操作DOM、在计算属性中使用异步操作、在v-for中使用index作为key等。Vue提供了nextTick方法来解决一些异步更新DOM的问题，它会在下次DOM更新循环结束之后执行回调函数，确保操作的是最新的DOM。