文章详细阐述了Vue.js中计算属性与method的区别，MVVM模式的工作原理，Vuex和Pinia状态管理库的不同，Vue3中toRef()和toRefs()的使用，Vue2和Vue3的watch机制对比，以及Vue2和Vue3路由的差异。此外，还讨论了Vue2和Vue3的生命周期理解，以及Vue的路由实现。
目录
一、计算属性与method区别？
1.计算属性拥有缓存，只有当它依赖的数据发生变化的时候才会重新渲染；函数只要调用就会执行。
2.计算属性本质为一个属性，必须要返回一个结果，函数就是一个单纯的函数，可以没有返回值。
二、关于MVVM的理解
MVVM 是一种前端开发的架构模式，是 Model-View-ViewModel 的简称。它把应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel），通过数据绑定的方式将三者联系起来，实现了视图和数据的分离。
在 MVVM 模式中，视图是用户界面（UI），视图模型是表达视图的状态和行为的抽象（ViewModel），而模型则是处理业务逻辑和数据持久化的部分。视图和视图模型之间通过数据绑定来实现双向绑定，当视图发生变化时，视图模型会自动更新数据，反之亦然。而视图模型和模型之间通常是通过服务或 RESTful 接口进行通信的。
MVVM 模式的优点包括：
- 视图和数据的分离，使得代码更易读、维护和测试。
- 数据绑定可以自动更新视图，避免手动操作 DOM 造成的性能问题。
- 代码复用和模块化，视图模型和模型可以在多个视图中重复使用。
当然，MVVM 也有一些缺点，比如需要学习新的框架和技术，一定程度上增加了学习成本；同时，MVVM 模式也可能增加项目的复杂性，因为它是一种非常结构化的设计模式，需要仔细考虑视图、视图模型和模型之间的关系。
总之，MVVM 是一种前端开发的架构模式，通过数据绑定实现视图和数据的分离，让代码更易读、维护和测试。在使用 MVVM 模式时需要考虑到其优缺点，选择适合自己项目的技术和框架。
三、Vuex和Pinia的区别
Vuex和Pinia都是Vue.js的状态管理库，主要用于在大型应用中管理应用的状态、数据和逻辑。他们的作用类似，但在实现方式和使用方法上存在区别。
1.实现方式
Vuex是一个基于发布/订阅模式的状态管理库，他是通过集中存储、操作和访问应用程序状态的方式来解决应用程序中的状态管理问题。Vuex的store具有唯一性，可以被组件任意访问，从而共享应用程序状态。
Pinia 则是一个未来友好型的状态管理库。它和 Vuex 不同，使用了 Vue 3 中新的响应式 API以及 Composition API 的特性。Pinia 也支持集中存储、操作和访问应用程序状态，但是与 Vuex 相比，在实现方式上更加简单、轻量化。
2.组件化
在 Vuex 中，开发人员可以使用辅助函数 mapState、 mapMutations.mapActions和 mapGetters 等来辅助组件获取 store 中的状态、mutation.action 和 getter 等，从而更轻松地进行状态管理。同时，Vuex 也提供了丰富的插件机制，可以很容易地扩展功能。
而在 Pinia 中，所有的状态逻辑都由 store 托管，每一个 store 实例都是一个独立的逻辑单元，对外提供了自己的状态、操作和访问方式。这种方式使得Pinia 的状态库更为轻量化和组件化。3.依赖注入
Pinia 还支持依赖注入机制，在 Vue 3 中使用 Composition API模式下可以更加便捷地处理依赖关系。
使用 Pinia 时，我们可以在 setup 函数中通过 useStore0 函数来获取 store，而不必将 store 注册为全局的 Vue 组件。这种方式使得组件和 store 更加独立对于大型应用来说，依赖关系更加清晰，代码结构更加清晰易懂。总之，Vuex 和 Pinia 都是非常优秀的 Vue.is 状态管理库，对于不同的开发场景和需求，可以选择合适的状态库来进行开发。如果是 Vue 2.x 的项目，建议使用 Vuex;而如果正在开发 Vue 3.x 的项目，可以选择使用 Pinia。
四、Vue3中toRef()和toRefs()区别
在 Vue.js 3 中，toRef 和 toRefs 都是用于创建一个响应式的引用，让我们可以在模板或 JavaScript 代码中访问一个响应式对象或 ref 对象的值。两者的使用场景略有不同，下面分别介绍它们之间的区别。
- toRef
toRef 的作用是将一个 reactive 对象中的某个属性转化为一个 ref 对象，这样就可以在非响应式的环境中使用这个属性的响应式特性。toRef 接收两个参数：第一个参数为 reactive 对象，第二个参数为属性名。
例如，假设我们有一个 reactive 对象 user，其中包含 name 和 age 两个属性：
const user = reactive({ name: 'Alice', age: 18 });如果要将 user 对象的 name 属性转化为 ref 对象，可以使用 toRef 来实现：
const nameRef = toRef(user, 'name');此时，nameRef 的值将和 user.name 的值保持同步，当 user.name 发生变化时，nameRef 的值也会跟着变化。
需要注意的是，toRef 创建的是一个只读的 ref 对象，无法直接修改其值。如果想要修改响应式数据请通过修改被转换的 reactive 对象来实现。
2.toRefs
toRefs 的作用是将一个 reactive 对象中所有的属性都转换为 ref 对象，并返回一个对象。toRefs 接收一个参数，即 reactive 对象。
例如，假设我们有一个 reactive 对象 user，其中包含 name 和 age 两个属性：
js const user = reactive({ name: 'Alice', age: 18 });如果要将 user 对象中的所有属性都转化为 ref 对象，可以使用 toRefs 来实现：
const userRefs = toRefs(user);此时，userRefs 对象包含了两个 ref 对象，即
userRefs.name和userRefs.age。当 user 中的属性发生变化时，对应的 ref 对象的值也会跟着变化。需要注意的是，toRefs 创建的是可读写的 ref 对象，并且其返回的对象是一个浅层响应式对象，如果要深度监听响应式数据变化，请使用 ref 或 reactive。同时，修改 userRefs 对象中的属性值不会直接修改响应式数据，需要通过修改转换前的 reactive 对象来实现。
总之，toRef 和 toRefs 都是用于创建响应式引用的工具函数，toRef 可以将 reactive 对象中的某个属性转化为 ref 对象，toRefs 可以将整个 reactive 对象转化为包含所有属性的 ref 对象。它们的主要区别在于使用场景和返回值类型不同。
五、Vue3和Vue2watch的区别
在 Vue.js 中，watch 是一种响应式的侦听器，用于监听响应式数据的变化，并在数据变化时触发回调函数执行某些操作。在 Vue 2 和 Vue 3 中，watch 的实现方式略有不同，下面分别介绍它们之间的区别。
- Vue 2 中的 watch
在 Vue 2 中，watch 可以使用对象或者字符串两种方式来定义：
- 对象方式：可以同时监听多个属性的变化，可以设置 deep、immediate 等选项；
- 字符串方式：只能监听单个属性的变化，不能设置选项。
Vue 2 的 watch 原理是通过 Object.defineProperty() 或 Proxy 来实现的。当 watched data 发生变化时，会触发一个更新函数，该函数会进行异步批处理，执行多次数据变化的回调函数。
- Vue 3 中的 watch
在 Vue 3 中，watch 的实现方式也是基于 Object.defineProperty()，但是在语法上有所不同。Vue 3 中引入了一个新的 API——watchEffect，它可以自动侦听响应式数据的变化并执行相应操作。与 Vue 2 不同，Vue 3 的 watch 不再支持字符串形式的写法，只能使用对象形式。
与 Vue 2 的 watch 相比，Vue 3 的 watch 具有以下优点：
- watchEffect 是一种立即执行的 watch，可以避免 watcher 懒初始化时被跳过的问题，从而更准确地侦听响应式数据的变化；
- Vue 3 的 watch 支持 new API，可以使用 watch(source, callback, options) 的形式来定义 watch；
- Vue 3 中引入了一个新的选项——flush，可以控制更新函数触发的时机，提高性能。
总之，Vue 3 的 watch 和 Vue 2 的 watch 在语法上有所不同，Vue 3 引入了 watchEffect 和 new API，并支持 flush 选项，可以更精确地控制更新函数的触发时机，提高性能。
六、Vue3和Vue2路由区别
Vue.js 2 和 Vue.js 3 的路由机制有所不同，在以下几个方面有所差异。
- 路由模式
Vue.js 2 支持 hash 模式和 history 模式两种路由模式。其中，hash 模式使用 URL 的 hash（#）部分来模拟整个 URL 的变化，从而实现页面切换的效果；history 模式则不需要使用 hash，可以使用 HTML5 标准的 History API 来控制 URL 和页面间的切换。
Vue.js 3 仍然支持这两种路由模式，但是在默认情况下，使用的是 history 模式。这也意味着，在 Vue.js 3 中，如果要进行 history 模式的路由跳转，需要服务器端配置支持来避免出现 404 错误。
- 路由组件注册
在 Vue.js 2 中，我们通常需要将路由组件通过 Vue.component() 或者 import() 方式来进行注册，例如：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const Foo = () => import('./Foo.vue') const Bar = () => import('./Bar.vue') export default new Router({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] })而在 Vue.js 3 中，我们可以通过 defineAsyncComponent() 和 defineComponent() 等函数来定义异步组件和普通组件，并在路由配置中直接使用，例如：
import { defineAsyncComponent, defineComponent } from 'vue' import { createRouter, createWebHistory } from 'vue-router' const Foo = defineAsyncComponent(() => import('./Foo.vue')) const Bar = defineComponent({ template: `<div>bar</div>` }) const router = createRouter({ history: createWebHistory(), routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) export default routerVue.js 2 中的路由守卫分为全局守卫、路由独享守卫、组件内守卫三种类型。Vue.js 3 的路由守卫与之类似，但是在语法上有所不同。
在 Vue.js 3 中，我们可以通过 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子函数来进行路由守卫的操作。而且，为了方便使用，这些钩子函数支持直接使用 async/await 等异步语法。
例如，下面是一个使用异步钩子实现的路由守卫：
const Foo = defineAsyncComponent(() => import('./Foo.vue')) export default { routes: [ { path: '/foo', component: Foo, beforeEnter: async (to, from, next) => { await someAsyncFunction() next() } } ] }总之，Vue.js 2 和 Vue.js 3 的路由机制在语法和用法上都有所不同，在使用时需要具体分析其特点和使用方式。
七、对于vue2生命周期的理解？
Vue.js 生命周期指的是组件实例在创建、挂载、更新和销毁过程中触发的一系列钩子函数，它们允许我们在特定时刻添加自定义代码来修改组件的行为。Vue.js 生命周期可以分为以下三个不同的阶段：
- 创建阶段
beforeCreate: 在实例被创建之初调用，此时实例的 data、methods 等属性都还未初始化。created: 在实例初次创建完成后调用，此时实例已经完成了数据状态的初始化，但尚未挂载到 HTML 文档中。
- 挂载阶段
beforeMount: 在挂载开始前被调用，此时模板编译已经完成，并且将要把生成的模板内容替换到 DOM 中。mounted: 在挂载完成后被调用，此时组件已经被渲染成 HTML 将被插入到页面中。
- 更新阶段
beforeUpdate: 当组件需要被重新渲染时（比如有关联的数据变化），会触发这个钩子函数，在重新渲染之前执行。updated: 在重新渲染完成后被调用，此时组件已经被重新渲染成 HTML 代码并重新插入到页面中。
- 销毁阶段
beforeDestroy: 当组件被销毁时，会触发这个钩子函数，在组件销毁前执行。destroyed: 在组件被销毁后被调用，此时组件已经从页面中移除并且所有的事件监听和定时器都已被删除。在 Vue.js 中，组件的生命周期钩子函数提供了一种在组件各个阶段进行自定义操作的方式，可以让我们在适当的时候执行特定的代码。掌握 Vue.js 生命周期的使用方法有助于我们更好地开发和维护 Vue.js 应用程序。
八、vue3的生命周期理解？
Vue 3.x 的生命周期钩子函数相比于 Vue 2.x 有一些变化，主要是为了提高性能和简化 API。下面是 Vue 3.x 中的生命周期钩子函数：
- 创建阶段
beforeCreate: 在实例被创建之初调用，此时实例的 data、methods 等属性都还未初始化。created: 在实例初次创建完成后调用，该钩子函数中可以访问到组件的所有装饰器（decorators）和依赖项（injects），但此时组件尚未挂载。
- 挂载阶段
beforeMount: 在挂载开始前被调用，此时模板编译已经完成，并且将要把生成的模板内容替换到 DOM 中。mounted: 在挂载完成后被调用，此时组件已经被渲染成 HTML 将被插入到页面中。注意：在 Vue 3.x 中这个钩子函数不再保证所有子组件都已经挂载完毕。
- 更新阶段
beforeUpdate: 当组件需要被重新渲染时（比如有关联的数据变化），会触发这个钩子函数，在重新渲染之前执行。updated: 在重新渲染完成后被调用，此时组件已经被重新渲染成 HTML 代码并重新插入到页面中。
- 卸载阶段
beforeUnmount: 当组件被销毁时，会触发这个钩子函数，在组件卸载前执行。unmounted: 在组件被销毁后被调用，此时组件已经从页面中移除并且所有的事件监听和定时器都已被删除。Vue 3.x 不再提供
beforeDestroy和destroyed钩子函数，而是改为使用beforeUnmount和unmounted。这是由于 Vue 3.x 引入了一种新的 API：teleport，可以让我们更方便地重用组件，而不是直接销毁它们。
九、Vue的路由实现：hash模式 和 history模式原理
Vue 的路由实现主要有两种模式：hash 模式和 history 模式。
- Hash 模式
Hash 模式是 Vue Router 默认的路由模式。在这种模式下，URL 的结构为
http://localhost/#/path。其中，#符号后面的内容被称为 hash，它不会被包含在 http 请求中，因此对于后端来说是无效的。在前端，我们可以通过window.location.hash来获取当前 URL 中的 hash 值，并通过注册hashchange事件监听 hash 值的变化，从而实现路由跳转。Vue Router 使用了浏览器的history.pushState()方法，将路由地址保存在浏览器地址栏的 hash 中，从而实现了前端路由。
- History 模式
History 模式也被称为 HTML5 模式，它使用了 HTML5 History API 中的
pushState()和replaceState()方法来实现前端路由。在这种模式下，URL 的结构为http://localhost/path，不再需要#符号。在 history 模式下，浏览器发起的 http 请求中包含了路由信息，但由于在前端路由切换时并不需要向后端发起请求，因此我们需要在服务器端配置一个 fallback 页面，确保在出现 404 错误时能够正确地返回主页或其他正确的页面。在 Vue Router 中，可以通过配置
mode属性来选择使用哪种路由模式，例如：const router = new VueRouter({ mode: 'history', // 路由模式 routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] })总的来说，Hash 模式和 History 模式都是前端路由的实现方式，它们在使用上略有不同，开发者在选择时需要根据自己的项目需求进行选择。
十、vue路由的钩子函数有哪些
在 Vue Router 中，路由钩子函数可以帮助我们执行一些特定的操作，例如：路由跳转时的数据验证、权限控制、页面切换的动画效果等等。Vue Router 提供了多种路由钩子函数，下面是常用的几个：
全局前置守卫
beforeEach
beforeEach函数是全局前置守卫，它会在每次路由跳转之前都进行拦截。我们可以通过这个函数来实现用户登录验证、权限控制等功能。router.beforeEach((to, from, next) => { // to: Route: 即将要进入的目标路由对象 // from: Route: 当前导航正要离开的路由 // next: Function: 必须调用该方法来 resolve 这个钩子 // 判断用户是否已经登录 if (!checkUserLogin()) { // 如果用户未登录，则跳转到登录页 next({ path: '/login', // 保存当前用户访问的路由地址，登录后直接跳转 query: { redirect: to.fullPath } }) } else { next() // 放行 } })全局后置钩子
afterEach
afterEach函数是全局后置钩子，它会在每次路由跳转完成之后执行，通常用于页面跳转后的状态更新、埋点等操作。router.afterEach((to, from) => { // to: Route: 当前导航所在的目标路由对象 // from: Route: 当前导航正要离开的路由对象 // 埋点 sendPageViewEvent(to.path) })路由独享守卫
beforeEnter
beforeEnter函数可以在路由级别上进行拦截，只对当前路由生效。这个函数与全局前置守卫beforeEach的功能类似，但只作用于当前路由。onst router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // to: Route: 即将要进入的目标路由对象 // from: Route: 当前导航正要离开的路由 // next: Function: 必须调用该方法来 resolve 这个钩子 // 判断用户是否有权限访问当前路由 if (!checkUserPermission()) { // 如果没有权限，则跳转到无权访问页面 next('/unauthorized') } else { next() // 放行 } } }, // ... ] })组件内路由守卫
除了全局前置守卫和路由独享守卫外，Vue Router 还提供了组件内路由守卫
beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。它们分别在组件实例进入、更新和离开路由时被调用。const Foo = { // ... beforeRouteEnter(to, from, next) { // 在进入路由之前被调用 // 对于异步组件，此钩子函数在组件被解析之后才会被调用 // ... next() }, beforeRouteUpdate(to, from, next) { // 在路由跳转时组件被复用时被调用 // 例如：List 组件在 /list1 路由下被渲染，在 /list2 路由下再次被渲染，并且 /list1 和 /list2 使用了同一个 List 组件时，此函数会被调用。 // ... next() }, beforeRouteLeave(to, from, next) { // 在离开当前路由时被调用 // 可以用于保存组件状态、防止误操作等 // ... next() } }以上仅是常用的几个路由钩子函数，Vue Router 中还有一些其他的钩子函数，如全局解析守卫
beforeResolve，用于在路由解析过程中进行拦截；错误处理钩子onError，用于捕获路由跳转过程中出现的错误等。
十一、$route和$router的区别
在 Vue.js 应用中，$route 和 $router 都是 Vue Router 提供的实例对象，用于获取和操作当前页面的路由信息和路由对象。它们的区别如下：
$route 是一个表示当前路由信息的只读对象，包含了当前页面的路径、参数、查询参数等信息。我们可以从 $route 中获取当前路由的详细信息，并据此进行不同的操作。
$router 是一个用于跳转路由的钩子函数集合，它包含了路由跳转相关的方法和属性，如
push、replace、go等方法，以及currentRoute属性等。我们可以通过 $router 来跳转页面、控制页面跳转栈、获取当前路由信息等。$route 可以进行数据访问和使用，但不能更改路由地址。
$router 可以更改当前路由地址，但不能直接访问 $route 的属性。
因此，$route 用于获取当前路由信息，而 $router用于进行路由跳转和管理。一般来说，$router用于进行路由跳转和管理。一般来说，$router 更常用，它可以让我们方便地进行路由跳转、控制页面跳转栈等操作。而 $route 则在一些特定场景下使用较多，如进行路由拦截、动态加载组件等。
十二、如何让CSS只在当前组件起作用？
在 Vue.js 中，我们可以使用
scoped特性来让 CSS 样式只在当前组件中起作用。使用scoped特性时，Vue 会自动为组件中的每个样式添加一个唯一的属性来作为选择器限制样式的作用域，这样就可以避免全局样式的污染。下面是使用
scoped特性的示例：<template> <div class="foo"> <h1>Scoped Style Demo</h1> </div> </template> <style scoped> .foo h1 { color: red; } </style>在上面的代码中，
scoped特性被应用于<style>标签上，这意味着样式仅适用于当前组件。在.foo h1样式规则中，scoped特性将为该样式添加一个独特的属性，以确保其仅在当前组件中生效。实际上，Vue 在处理
scoped样式时会将组件的 DOM 结构解析成 AST（抽象语法树）并生成一个唯一的属性选择器，并将该属性应用到组件的所有元素上，从而确保样式仅对当前组件有效。需要注意的是，当使用
scoped特性时，组件间的样式不会互相干扰。也就是说，父组件和子组件中的相同选择器是不会互相影响的，因为它们都有各自独立的作用域。
十三、keep-alive标签的作用？
<keep-alive></keep-alive>是 Vue.js 提供的一个抽象组件，它的主要作用是在组件切换时缓存组件实例，以避免重复渲染和数据丢失。在应用中使用<keep-alive></keep-alive>标签包裹需要缓存的组件，Vue 会将这些组件实例缓存起来，下次切换到该组件时直接从缓存中读取，而不需要重新创建和渲染组件。使用
<keep-alive></keep-alive>能够提高应用性能，尤其对于经常被使用但数据变化不频繁的组件，例如：菜单、标签页等。下面是一个示例，使用
<keep-alive></keep-alive>包裹一个动态组件：<template> <div> <button @click="toggle">Toggle Display</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> import Foo from './Foo.vue' import Bar from './Bar.vue' export default { components: { Foo, Bar }, data() { return { currentComponent: 'Foo', show: true } }, methods: { toggle() { this.currentComponent = this.currentComponent === 'Foo' ? 'Bar' : 'Foo' } } } </script>在上面的代码中，我们使用
<keep-alive></keep-alive>包裹了一个动态组件，并在按钮点击事件中切换currentComponent的值。当currentComponent值变化时，<keep-alive></keep-alive>会根据实例的componentOptions缓存组件实例，并将缓存的实例保存在内存中。这样，下次再切换到该组件时，Vue.js 会直接从缓存中读取组件实例并重新渲染，而不需要重新创建和挂载组件实例。需要注意的是，在使用
<keep-alive></keep-alive>缓存组件时，可能会导致一些副作用，例如：钩子函数不会每次触发、组件状态被保留等。因此，在使用<keep-alive></keep-alive>时需要仔细考虑组件的实际情况以及对应的生命周期函数、状态等。
十四、vue中使用插件？
在 Vue 中使用插件需要以下几个步骤：
创建插件
首先需要编写一个 Vue 插件，插件是一个对象，它可以拥有
install方法，在此方法中可以注册全局组件、指令、混入等功能，例如：const myPlugin = { install(Vue, options) { // 注册全局组件 Vue.component('my-component', { /* ... */ }) // 注册全局指令 Vue.directive('my-directive', { /* ... */ }) // 注册全局混入 Vue.mixin({ /* ... */ }) // 添加实例方法 Vue.prototype.$myMethod = function() { // ... } } }注册插件
在创建好插件后，需要将其注册到 Vue 中。可以通过
Vue.use()方法来注册插件，例如：import Vue from 'vue' import MyPlugin from './my-plugin' Vue.use(MyPlugin, { option: 'value' })在上面的代码中，我们通过
Vue.use()方法注册了MyPlugin插件，并传递了一个选项对象。此时，插件中的install方法会被调用，全局组件、指令、混入等功能也会被注册到 Vue 中。使用插件
当我们注册好插件后，就可以在任何组件中使用插件提供的全局组件、指令、混入等功能。例如，在组件中使用插件提供的实例方法：
export default { created() { this.$myMethod() } }在上面的代码中，我们可以通过
this.$myMethod()调用插件提供的实例方法。总的来说，在 Vue 中使用插件的步骤包括创建插件、注册插件和使用插件。在使用插件时需要注意插件所提供的功能以及对应的调用方式。插件是对 Vue 功能的扩展，能够帮助我们更快地开发应用，但也需要谨慎选择和使用。
十五、对vue SSR理解？
Vue SSR（Server-Side Rendering，即服务端渲染）是 Vue 官方提供的一种解决方案，它利用 Node.js 在服务端将 Vue 组件渲染成 HTML 字符串，然后将这些 HTML 字符串发送给浏览器，使得浏览器可以更快、更友好地展示页面。
在传统的单页面应用（SPA）中，所有的操作都是在客户端完成的，因此首次加载时需要下载大量 JavaScript 和 CSS 文件来渲染页面，导致页面速度较慢、SEO 不友好。而 Vue SSR 可以在服务端将组件渲染成 HTML 字符串，直接将渲染好的 HTML 字符串返回给浏览器，使得首屏加载时间变得更快、SEO 更加友好。
使用 Vue SSR 需要注意以下几点：
服务器端渲染需要 Node.js 环境的支持，因此需要在服务器上安装 Node.js 和相关依赖；
服务端渲染需要对组件和页面的结构进行调整，例如：将组件中的一些异步请求转移到服务器端，在服务器端将数据预取并填充到组件中；
在使用 Vue SSR 时，需要有一定的了解和掌握对应的概念、技术和工具，例如：Vue 的服务端渲染原理、路由、状态管理等。
需要注意的是，Vue SSR 并不是适用于所有场景的解决方案，对于一些交互较为复杂的页面，使用 Vue SSR 可能会带来一定的开发和维护成本。因此，在选择是否使用 Vue SSR 时需要根据实际情况进行权衡和选择。
十六、vue2和vue3的响应式原理？
Vue 2 的响应式原理基于 Object.defineProperty() API，它通过拦截对象的 getter 和 setter 方法来实现数据劫持。具体地，在初始化 Vue 实例时，Vue 会递归遍历 data 对象中的所有属性，并使用 Object.defineProperty() 方法将这些属性转换成 getter 和 setter。当修改 data 中的数据时，Vue 会自动检测到并通知相关的组件进行更新。
而 Vue 3 的响应式原理则基于 ES6 的 Proxy API，在初始化时使用 Proxy 对象直接代理了整个 data 对象，以此来实现对数据的监听。与 Vue 2 不同，Vue 3 的响应式原理可以在嵌套对象和数组等更复杂的数据结构上产生更高效的响应式更新，同时还支持对 Map 和 Set 等其他类型的响应式监听。
总体来说，Vue 3 的响应式原理相对于 Vue 2 更为高效和灵活，但需要注意的是 Vue 3 的语法和一些用法都与 Vue 2 不同，开发者需要注意兼容性问题和学习新的语法规则。
扫一扫
6049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
