20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)-tajuk utama-php.cn

Artikel ini meringkaskan dan berkongsi 20 Vue soalan temu bual klasik (dengan penjelasan peringkat kod sumber yang terperinci) untuk membantu anda menyusun pengetahuan asas dan meningkatkan rizab pengetahuan Vue anda Perlu dikumpulkan, datang dan ambil satu pandangan!

01-Apakah kaedah komunikasi antara komponen Vue

Vue ialah rangka kerja pembangunan berasaskan komponen, jadi komunikasi data antara komponen adalah sangat penting untuk aplikasi vue. Soalan ini terutamanya menguji kemahiran dan kecekapan asas Vue setiap orang dalam menggunakan API asas Vue. Pengetahuan sempadan lain seperti menyediakan/menyuntik/$attrs menunjukkan keluasan pengetahuan penemuduga.

Pelbagai cara menghantar parameter dalam komponen

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)

Analisis idea:

Ikhtisar semua cara untuk mengetahui
Terangkan senario penggunaan mengikut perhubungan komponen

Contoh jawapan:

1 Terdapat 8 kaedah biasa komponen komunikasi:

props<.>
$on
$anak/$ibu bapa
$pendengar
$root
eventbus
vuex

Beri perhatian kepada beberapa API terbengkalai dalam vue3
https://v3-migration.vuejs.org/breaking-changes/children.html
https://v3-migration.vuejs.org/breaking-changes/listeners-removed. html

https://v3-migration.vuejs.org/breaking-changes/events-api.html#overview

2. Adalah lebih jelas untuk membincangkan komponen komunikasi berdasarkan hubungan antara komponen Sah

Komponen ibu bapa-anak
- /props/$emit/$parent/ref$attrs
Komponen adik beradik
- /$parent/$root/eventbusvuex
merentas Hubungan Hierarki
- /eventbus/vuex provideinject

02-v- Yang manakah mempunyai keutamaan yang lebih tinggi, jika atau v-untuk?

Analisis: Soalan ini menguji akal dan diterangkan secara terperinci dalam dokumen

| v3; juga merupakan soalan latihan yang baik, yang sering ditemui dalam projek. Ia boleh menunjukkan kebolehan dan keupayaan aplikasi penemuduga.

Analisis pemikiran:

Contoh jawapan:

tidak boleh menggunakan v- for dan v-if diletakkan bersama
vue2
, keutamaan v-for adalah lebih tinggi daripada v -jika , meletakkan mereka bersama-sama, ia boleh dilihat daripada fungsi pemaparan output bahawa gelung akan dilaksanakan terlebih dahulu dan kemudian syarat akan dinilai Walaupun kita hanya memberikan sebahagian kecil daripada elemen dalam senarai, kita perlu merentasi keseluruhan senarai setiap kali kami membuat semula, yang akan membandingkan Waste; Di samping itu, perlu diperhatikan bahawa dalam vue3 ia adalah sebaliknya dengan keutamaan yang lebih tinggi daripada v-for, jadi apabila v-if dilaksanakan, pembolehubah yang dipanggilnya belum wujud lagi, yang akan menyebabkan Pengecualian
- menapis item dalam senarai
  (cth. ). Pada masa ini, tentukan atribut yang dikira (seperti ) dan biarkan ia mengembalikan senarai yang ditapis (seperti v-for="user in users" v-if="user.isActive"). activeUsersusers.filter(u=>u.isActive)
- mengelakkan daripada memaparkan senarai
  yang sepatutnya disembunyikan (seperti ). Pada masa ini, alihkan ke elemen bekas (seperti v-for="user in users" v-if="shouldShowUsers", v-if) atau balut dengan lapisan ul. oltemplate
jangan sekali-kali menggunakan
dan pada elemen yang sama pada masa yang sama v-if, jelas sekali ini a Nota Penting. v-for

Tahu sebabnya:

Lakukan ujian Apabila test.html berada pada tahap yang sama, fungsi pemaparan adalah seperti berikut ：

ƒ anonymous(
) {
with(this){return _c(&#39;div&#39;,{attrs:{"id":"app"}},_l((items),function(item){return (item.isActive)?_c(&#39;div&#39;,{key:item.id},[_v("\n      "+_s(item.name)+"\n    ")]):_e()}),0)}
}

Salin selepas log masuk

Ambil ujian, test-v3.html

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)

Cari jawapan dalam kod sumber

v2: https://github1s.com/vuejs/vue/blob/HEAD/src/compiler/codegen/index.js#L65-L66

v3: https://github1s .com/vuejs/core /blob/HEAD/packages/compiler-core/src/codegen.ts#L586-L587

03 - Terangkan secara ringkas kitaran hayat Vue dan perkara masing-masing peringkat tidak

Soalan yang diperlukan untuk menguji pengetahuan asas Vue.

Idea

Berikan konsep
Senaraikan elemen kitaran hayat Peringkat
Terangkan keseluruhan proses
Digabungkan dengan amalan
Pelanjutan: perubahan vue3

Contoh jawapan

1 Setiap tika komponen Vue akan melalui satu siri langkah permulaan selepas itu dicipta, seperti, Ia memerlukan pemerhatian data, penyusunan templat, memasang contoh pada DOM dan mengemas kini DOM apabila data berubah. Fungsi yang dipanggil cangkuk kitaran hayat dijalankan semasa proses ini untuk memberi pengguna peluang menambah kod mereka sendiri pada peringkat tertentu.

2. Kitaran hayat Vue boleh dibahagikan kepada 8 peringkat secara keseluruhan: sebelum dan selepas penciptaan, sebelum dan selepas dimuatkan, sebelum dan selepas mengemas kini, sebelum dan selepas pemusnahan , serta kitaran hayat beberapa senario khas. Tiga adegan baharu untuk penyahpepijatan dan pemaparan sebelah pelayan telah ditambahkan pada vue3.

< /thead>

Kitaran hayat v2

Kitaran hayat v3

Penerangan

beforeCreate

Apabila contoh komponen dibuat

dibuat< /td>

dibuat

Aplikasi komponen telah dibuat sepenuhnya

sebelumMount

beforeMount

komponen Sebelum dipasang

dilekapkan

Selepas komponen dipasang pada contoh

beforeUpdate

Data komponen berubah, sebelum kemas kini

dikemas kini

Selepas data dikemas kini

sebelum Musnah

生命周期v2	生命周期v3	描述
beforeCreate	beforeCreate	组件实例被创建之初
created	created	组件实例已经完全创建
beforeMount	beforeMount	组件挂载之前
mounted	mounted	组件挂载到实例上去之后
beforeUpdate	beforeUpdate	组件数据发生变化，更新之前
updated	updated	数据数据更新之后
beforeDestroy	beforeUnmount	组件实例销毁之前
destroyed	unmounted	组件实例销毁之后

sebelum Nyahlekap

生命周期v2	生命周期v3	描述
activated	activated	keep-alive 缓存的组件激活时
deactivated	deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	errorCaptured	捕获一个来自子孙组件的错误时被调用
-	renderTracked	调试钩子，响应式依赖被收集时调用
-	renderTriggered	调试钩子，响应式依赖被触发时调用
-	serverPrefetch	ssr only，组件实例在服务器上被渲染前调用

contoh komponen dimusnahkan Sebelum

dimusnahkan

<🎜>dinyahlekapkan<🎜>

Komponen Selepas kejadian dimusnahkan

< th>Kitaran hayat v3< /th>

Kitaran hayat v2	Penerangan
diaktifkan	diaktifkan	komponen cache keep-alive Apabila diaktifkan
dinyahaktifkan	dinyahaktifkan	keep-alive Dipanggil apabila komponen cache dinyahaktifkan
errorCaptured	errorCaptured	Dipanggil semasa menangkap ralat daripada komponen turunan
-	<🎜>renderTracked<🎜>	Cakuk nyahpepijat, dipanggil apabila kebergantungan reaktif dikumpul
-	<🎜>renderTriggered<🎜>	Cakuk nyahpepijat, dipanggil apabila kebergantungan reaktif dicetuskan
-	<🎜 >serverPrefetch <🎜>	ssr sahaja, dipanggil sebelum tika komponen dipaparkan pada pelayan

3、Vue生命周期流程图：

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)

4、结合实践：

beforeCreate：通常用于插件开发中执行一些初始化任务

created：组件初始化完毕，可以访问各种数据，获取接口数据等

mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等。

beforeUpdate：此时view层还未更新，可用于获取更新前各种状态

updated：完成view层的更新，更新后，所有状态已是最新

beforeunmount：实例被销毁前调用，可用于一些定时器或订阅的取消

unmounted：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器

可能的追问

setup和created谁先执行？
setup中为什么没有beforeCreate和created？

知其所以然

vue3中生命周期的派发时刻：

https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentOptions.ts#L554-L555

vue2中声明周期的派发时刻：

https://github1s.com/vuejs/vue/blob/HEAD/src/core/instance/init.js#L55-L56

04-能说一说双向绑定使用和原理吗？

题目分析：

双向绑定是vue的特色之一，开发中必然会用到的知识点，然而此题还问了实现原理，升级为深度考查。

思路分析：

给出双绑定义
双绑带来的好处
在哪使用双绑
使用方式、使用细节、vue3变化
原理实现描述

回答范例：

vue中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图中变化能改变该值。
v-model是语法糖，默认情况下相当于:value和@input。使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。
通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。
通过<input v-model="xxx">的方式将xxx的值绑定到表单元素value上；对于checkbox，可以使用true-value和false-value指定特殊的值，对于radio可以使用value指定特殊的值；对于select可以通过options元素的value设置特殊的值；还可以结合.lazy,.number,.trim对v-mode的行为做进一步限定；v-model用在自定义组件上时又会有很大不同，vue3中它类似于sync修饰符，最终展开的结果是modelValue属性和update:modelValue事件；vue3中我们甚至可以用参数形式指定多个不同的绑定，例如v-model:foo和v-model:bar，非常强大！
v-model是一个指令，它的神奇魔法实际上是vue的编译器完成的。我做过测试，包含v-model的模板，转换为渲染函数之后，实际上还是是value属性的绑定以及input事件监听，事件回调函数中会做相应变量更新操作。编译器根据表单元素的不同会展开不同的DOM属性和事件对，比如text类型的input和textarea会展开为value和input事件；checkbox和radio类型的input会展开为checked和change事件；select用value作为属性，用change作为事件。

可能的追问：

v-model和sync修饰符有什么区别
自定义组件使用v-model如果想要改变事件名或者属性名应该怎么做

知其所以然：

测试代码，test.html

观察输出的渲染函数：

// <input type="text" v-model="foo">
_c(&#39;input&#39;, { 
  directives: [{ name: "model", rawName: "v-model", value: (foo), expression: "foo" }], 
  attrs: { "type": "text" }, 
  domProps: { "value": (foo) }, 
  on: { 
    "input": function ($event) { 
      if ($event.target.composing) return; 
      foo = $event.target.value 
    } 
  } 
})

Salin selepas log masuk

// <input type="checkbox" v-model="bar">
_c(&#39;input&#39;, { 
  directives: [{ name: "model", rawName: "v-model", value: (bar), expression: "bar" }], 
  attrs: { "type": "checkbox" }, 
  domProps: { 
    "checked": Array.isArray(bar) ? _i(bar, null) > -1 : (bar) 
  }, 
  on: { 
    "change": function ($event) { 
      var $$a = bar, $$el = $event.target, $$c = $$el.checked ? (true) : (false); 
      if (Array.isArray($$a)) { 
        var $$v = null, $$i = _i($$a, $$v); 
        if ($$el.checked) { $$i < 0 && (bar = $$a.concat([$$v])) } 
        else { 
          $$i > -1 && (bar = $$a.slice(0, $$i).concat($$a.slice($$i + 1))) } 
      } else { 
        bar = $$c 
      } 
    } 
  } 
})

Salin selepas log masuk

// <select v-model="baz">
//     <option value="vue">vue</option>
//     <option value="react">react</option>
// </select>
_c(&#39;select&#39;, { 
  directives: [{ name: "model", rawName: "v-model", value: (baz), expression: "baz" }], 
  on: { 
    "change": function ($event) { 
      var $$selectedVal = Array.prototype.filter.call(
        $event.target.options, 
        function (o) { return o.selected }
      ).map(
        function (o) { 
          var val = "_value" in o ? o._value : o.value; 
          return val 
        }
      ); 
      baz = $event.target.multiple ? $$selectedVal : $$selectedVal[0] 
    } 
  } 
}, [
  _c(&#39;option&#39;, { attrs: { "value": "vue" } }, [_v("vue")]), _v(" "), 
  _c(&#39;option&#39;, { attrs: { "value": "react" } }, [_v("react")])
])

Salin selepas log masuk

05-Vue中如何扩展一个组件

此题属于实践题，考察大家对vue常用api使用熟练度，答题时不仅要列出这些解决方案，同时最好说出他们异同。

答题思路：

按照逻辑扩展和内容扩展来列举，
- 逻辑扩展有：mixins、extends、composition api；
- 内容扩展有slots；
分别说出他们使用方法、场景差异和问题。
作为扩展，还可以说说vue3中新引入的composition api带来的变化

回答范例：

常见的组件扩展方法有：mixins，slots，extends等

混入mixins是分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

// 复用代码：它是一个配置对象，选项和组件里面一样
const mymixin = {
   methods: {
      dosomething(){}
   }
}
// 全局混入：将混入对象传入
Vue.mixin(mymixin)

// 局部混入：做数组项设置到mixins选项，仅作用于当前组件
const Comp = {
   mixins: [mymixin]
}

Salin selepas log masuk

插槽主要用于vue组件中的内容分发，也可以用于组件扩展。
子组件Child
```
<div>
  <slot>这个内容会被父组件传递的内容替换</slot>
</div>
```
Salin selepas log masuk
父组件Parent
```
<div>
   <Child>来自老爹的内容</Child>
</div>
```
Salin selepas log masuk
如果要精确分发到不同位置可以使用具名插槽，如果要使用子组件中的数据可以使用作用域插槽。

组件选项中还有一个不太常用的选项extends，也可以起到扩展组件的目的

// 扩展对象
const myextends = {
   methods: {
      dosomething(){}
   }
}
// 组件扩展：做数组项设置到extends选项，仅作用于当前组件
// 跟混入的不同是它只能扩展单个对象
// 另外如果和混入发生冲突，该选项优先级较高，优先起作用
const Comp = {
   extends: myextends
}

Salin selepas log masuk

混入的数据和方法不能明确判断来源且可能和当前组件内变量产生命名冲突，vue3中引入的composition api，可以很好解决这些问题，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用，增强代码的可读性和维护性。例如：
```
// 复用逻辑1
function useXX() {}
// 复用逻辑2
function useYY() {}
// 逻辑组合
const Comp = {
   setup() {
      const {xx} = useXX()
      const {yy} = useYY()
      return {xx, yy}
   }
}
```
Salin selepas log masuk

可能的追问

Vue.extend方法你用过吗？它能用来做组件扩展吗？

知其所以然

mixins原理：

https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiCreateApp.ts#L232-L233
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentOptions.ts#L545

slots原理：

https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentSlots.ts#L129-L130
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1373-L1374
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/helpers/renderSlot.ts#L23-L24

06-子组件可以直接改变父组件的数据么，说明原因

分析

这是一个实践知识点，组件化开发过程中有个单项数据流原则，不在子组件中修改父组件是个常识问题。

参考文档：https://staging.vuejs.org/guide/components/props.html#one-way-data-flow

思路

讲讲单项数据流原则，表明为何不能这么做
举几个常见场景的例子说说解决方案
结合实践讲讲如果需要修改父组件状态应该如何做

回答范例

所有的 prop 都使得其父子之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器控制台中发出警告。
```
const props = defineProps([&#39;foo&#39;])
// ❌ 下面行为会被警告, props是只读的!
props.foo = &#39;bar&#39;
```
Salin selepas log masuk
实际开发过程中有两个场景会想要修改一个属性：
- **这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。**在这种情况下，最好定义一个本地的 data，并将这个 prop 用作其初始值：
```
const props = defineProps([&#39;initialCounter&#39;])
const counter = ref(props.initialCounter)
```
  Salin selepas log masuk
- **这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
```
const props = defineProps([&#39;size&#39;])
// prop变化，计算属性自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())
```
  Salin selepas log masuk
实践中如果确实想要改变父组件属性应该emit一个事件让父组件去做这个变更。注意虽然我们不能直接修改一个传入的对象或者数组类型的prop，但是我们还是能够直接改内嵌的对象或属性。

07-Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？

分析

综合实践题目，实际开发中经常需要面临权限管理的需求，考查实际应用能力。

权限管理一般需求是两个：页面权限和按钮权限，从这两个方面论述即可。

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)

思路

权限管理需求分析：页面和按钮权限
权限管理的实现方案：分后端方案和前端方案阐述
说说各自的优缺点

回答范例

权限管理一般需求是页面权限和按钮权限的管理
具体实现的时候分后端和前端两种方案：
前端方案会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组，需要认证的页面在其路由的meta中添加一个roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes(accessRoutes)方式动态添加路由即可。
后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息
按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。
纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸！

知其所以然

路由守卫

https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/permission.js#L13-L14

路由生成

https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/store/modules/permission.js#L50-L51

动态追加路由

https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/permission.js#L43-L44

可能的追问

类似Tabs这类组件能不能使用v-permission指令实现按钮权限控制？

<el-tabs> 
  <el-tab-pane label="⽤户管理" name="first">⽤户管理</el-tab-pane> 
	<el-tab-pane label="⻆⾊管理" name="third">⻆⾊管理</el-tab-pane>
</el-tabs>

Salin selepas log masuk

服务端返回的路由信息如何添加到路由器中？

// 前端组件名和组件映射表
const map = {
  //xx: require(&#39;@/views/xx.vue&#39;).default // 同步的⽅式
  xx: () => import(&#39;@/views/xx.vue&#39;) // 异步的⽅式
}
// 服务端返回的asyncRoutes
const asyncRoutes = [
  { path: &#39;/xx&#39;, component: &#39;xx&#39;,... }
]
// 遍历asyncRoutes，将component替换为map[component]
function mapComponent(asyncRoutes) {
  asyncRoutes.forEach(route => {
    route.component = map[route.component];
    if(route.children) {
      route.children.map(child => mapComponent(child))
    }
	})
}
mapComponent(asyncRoutes)

Salin selepas log masuk

08 - 说一说你对vue响应式理解？

分析

这是一道必问题目，但能回答到位的比较少。如果只是看看一些网文，通常没什么底气，经不住面试官推敲，但像我们这样即看过源码还造过轮子的，回答这个问题就会比较有底气啦。

答题思路：

啥是响应式？
为什么vue需要响应式？
它能给我们带来什么好处？
vue的响应式是怎么实现的？有哪些优缺点？
vue3中的响应式的新变化

回答范例：

所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。
Mengambil vue sebagai contoh, melalui responsif data ditambah DOM maya dan algoritma tampalan, pembangun hanya perlu mengendalikan data dan mengambil berat tentang perniagaan, tanpa perlu berurusan dengan operasi DOM yang menyusahkan, sekali gus meningkatkan kecekapan pembangunan. ., Kurangkan kesukaran pembangunan.
Respons data dalam vue2 akan diproses secara berbeza mengikut jenis data Jika ia adalah objek , gunakan Object.defineProperty() untuk menentukan pemintasan data. Apabila data diakses atau diubah, kami merasakan dan bertindak balas; jika ia adalah tatasusunan , kami mengatasi 7 kaedah perubahan prototaip objek tatasusunan supaya kaedah ini boleh memberikan pemberitahuan kemas kini tambahan dan bertindak balas. Mekanisme ini menyelesaikan masalah responsif data dengan sangat baik, tetapi ia juga mempunyai beberapa kelemahan dalam penggunaan sebenar: contohnya, rekursif traversal semasa permulaan akan menyebabkan kehilangan prestasi apabila menambah atau memadam atribut, pengguna perlu menggunakan Vue.set/delete sahaja API khas boleh berkuat kuasa masalah seperti struktur data Peta dan Set baharu yang dijana dalam es6 tidak disokong.
Untuk menyelesaikan masalah ini, vue3 telah menulis semula bahagian pelaksanaan ini: menggunakan proksi Proksi ES6 untuk bertindak balas kepada data, ia mempunyai banyak faedah, pengalaman pengaturcaraan adalah konsisten, tidak perlu Menggunakan API khas, prestasi permulaan dan penggunaan memori telah dipertingkatkan dengan banyaknya, kerana kod pelaksanaan responsif diekstrak ke dalam pakej kereaktifan bebas, kami boleh menggunakannya dengan lebih fleksibel, dan sambungan pihak ketiga lebih fleksibel untuk dibangunkan.

Tahu sebabnya

responsif vue2:

https://github1s.com/vuejs/vue/blob/HEAD/src/core/observer/index.js#L135-L136

vue3 responsif:

https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/reactive.ts#L89-L90
https:/ /github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/ref.ts#L67-L68

09 - kata Beritahu saya anda pemahaman tentang DOM maya?

Analisis

Hampir semua rangka kerja sedia ada memperkenalkan DOM maya untuk mengabstraksikan DOM sebenar, iaitu apa yang semua orang tahu sekarang VNode dan VDOM , jadi mengapa kita perlu memperkenalkan DOM maya? Jawab sahaja soalan ini!

Idea

Apakah itu vdom
Faedah memperkenalkan vdom
Cara vdom dijana dan bagaimana ia menjadi dom
Peranan
dalam perbezaan seterusnya

Contoh jawapan

JavaScriptDom maya, seperti namanya, ialah objek dom maya, yang dengan sendirinya ialah objek
, tetapi Ia menerangkan struktur pandangan melalui atribut yang berbeza.
Dengan memperkenalkan vdom kita boleh mendapat faedah berikut:
Abstrak nod elemen sebenar ke dalam VNode, mengurangkan bilangan operasi dom langsung secara berkesan, dengan itu menambah baik program prestasi
Memudahkan pelaksanaan merentas platform
Bagaimana untuk menjana vdom? Dalam vue, kami sering menulis templat untuk komponen Templat ini akan disusun menjadi fungsi pemaparan oleh pengkompil Dalam proses pemasangan seterusnya, fungsi pemaparan akan dipanggil, dan objek yang dikembalikan ialah dom maya. Tetapi mereka bukan DOM sebenar lagi, jadi mereka akan ditukar lagi menjadi DOM dalam proses tampalan seterusnya.

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)

Selepas proses pemasangan selesai, program vue memasuki proses kemas kini. Jika beberapa data responsif berubah, ia akan menyebabkan komponen dipaparkan semula Pada masa ini, vdom baharu akan dijana dan perubahan akan diperoleh dengan membezakan hasil pemaparan terakhir, sekali gus menukarnya kepada jumlah minimum DOM. operasi dan kemas kini yang cekap.

Tahu sebabnya

definisi vnode: <🎜>

https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L127-L128

Perhatikan fungsi pemaparan: 21-vdom/test - render-v3.html

Buat vnode:

createElementBlock:

https://github1s.com/vuejs/core/blob/HEAD / packages/runtime-core/src/vnode.ts#L291-L292

createVnode:

https://github1s.com/vuejs/core/blob/ HEAD /packages/runtime-core/src/vnode.ts#L486-L487

Masa panggilan pertama:

https://github1s.com/vuejs/core / blob/HEAD/packages/runtime-core/src/apiCreateApp.ts#L283-L284

lekapkan:

https://github1s.com/vuejs/core/blob / HEAD/packages/runtime-core/src/renderer.ts#L1171-L1172

Nyahpepijat proses pemasangan: mountComponent

21-vdom/test-render-v3.html

10 - Adakah anda faham algoritma diff?

Analisis

Soalan yang diperlukan, yang melibatkan prinsip kemas kini Vue, secara perbandingan menguji kedalaman pemahaman.

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci)

Berfikir

Apakah yang dilakukan oleh algoritma diff
Keperluan itu
Apabila ia dilaksanakan
Kaedah pelaksanaan khusus
Lebih tinggi: Mari kita bincangkan tentang pengoptimuman dalam vue3

Contoh jawapan

1. Algoritma diff dalam Vue dipanggil algoritma tampalan, yang diubah suai daripada Snabbdom Jika DOM maya hendak ditukar kepada DOM sebenar, ia perlu ditukar melalui kaedah tampalan.

2 Pada mulanya, setiap kebergantungan dalam paparan Vue1.x mempunyai fungsi kemas kini yang sepadan dengannya, yang boleh dikemas kini dengan tepat, DOM maya dan sokongan algoritma penampalan tidak diperlukan Vue1.x tidak dapat membawa aplikasi yang lebih besar; dalam Vue 2.x, untuk mengurangkan butiran Watcher, setiap komponen hanya mempunyai satu Watcher yang sepadan dengannya mengubah dan mengemas kininya dengan cekap.

3 Saat diff dilaksanakan dalam Vue ialah apabila data responsif berubah dalam komponen mencetuskan contoh untuk melaksanakan fungsi kemas kininya. dan kemudian laksanakan fungsi tampalan dan masukkan Bandingkan DOM maya lama dan baharu untuk mencari perubahan, dan akhirnya menukarnya kepada operasi DOM yang sepadan.

4. Proses tampalan ialah proses rekursif, mengikut strategi perbandingan depth-first, sama lapisan; adalah daripada jenis yang sama, jika berbeza, padam dan buat semula

- 5. Kemas kini strategi yang diperkenalkan dalam vue3: Susun secara berkala mengoptimumkan patchFlag, blok, dsb.

Tahu sebabnya

kod kunci tampalanhttps: //github1s.com/vuejs/core/blob/HEAD/packages/runtime- core/src/renderer.ts#L354-L355

Nyahpepijat test-v3.html

11 - Apakah ciri baharu vue3 yang anda tahu

Analisis

Ciri baharu yang paling penting yang disenaraikan di tapak web rasmi: https ://v3-migration.vuejs.org/

Iaitu, yang berikut:

20 soalan temu bual klasik Vue (dengan penjelasan peringkat kod sumber terperinci) API Komposisi

gula sintaks API Komposisi SFC

Di atas ialah API berkaitan, dan terdapat banyak ciri rangka kerja yang tidak boleh ditinggalkan.

Contoh jawapan

1. Ciri baharu Vue3 pada tahap api terutamanya termasuk: API Komposisi, sintaks API Komposisi SFC gula, Pintu penghantaran Teleport, Serpihan, Pilihan Pancaran, pemapar tersuai, pembolehubah CSS SFC, Suspense2 Selain itu, Vue3.0 juga mempunyai banyak peningkatan yang menarik perhatian pada peringkat rangka kerja: <🎜. >

Lebih pantas

Penulisan semula DOM maya

Pengoptimuman pengkompil: promosi statik, patchFlags, blok, dll.