Perkongsian soalan temuduga frekuensi tinggi Vue pada tahun 2023 (dengan analisis jawapan)

Artikel ini meringkaskan beberapa pilihan 2023 yang patut dikumpulkan vueSoalan temu bual frekuensi tinggi (dengan jawapan). Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.

Apakah pengawal navigasi penghala Vue

• Awalan/cangkuk global: beforeEach, beforeResolve, afterEach
• Mengapakah Proksi diterima pakai dalam Vue3.0 dan Object.defineProperty ditinggalkan?

Object.defineProperty sendiri mempunyai keupayaan tertentu untuk memantau perubahan dalam subskrip tatasusunan, tetapi dalam Vue, memandangkan keberkesanan kos prestasi/pengalaman, ciri ini telah ditinggalkan (mengapa Vue tidak dapat Mengesan perubahan tatasusunan). Untuk menyelesaikan masalah ini, selepas pemprosesan dalaman Vue, anda boleh menggunakan kaedah berikut untuk memantau tatasusunan

Memandangkan hanya 7 kaedah di atas digodam, atribut tatasusunan lain tidak dapat dikesan Ya , ia masih mempunyai had tertentu.

Object.defineProperty hanya boleh merampas sifat objek, jadi kita perlu melintasi setiap sifat setiap objek. Dalam Vue 2.x, pemantauan data dicapai dengan melintasi objek data secara rekursif Jika nilai atribut juga merupakan objek, maka traversal mendalam diperlukan. Jelas sekali, ini adalah pilihan yang lebih baik jika objek lengkap boleh dirampas.

Proksi boleh merampas keseluruhan objek dan mengembalikan objek baharu. Proksi bukan sahaja boleh objek proksi, tetapi juga tatasusunan proksi. Anda juga boleh membuat proksi atribut yang ditambah secara dinamik.

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

v-for Why add key

Jika anda tidak menggunakan key, Vue akan menggunakan kaedah yang meminimumkan elemen dinamik dan cuba di tempat sebanyak mungkin Algoritma yang mengubah suai/menggunakan semula elemen daripada jenis yang sama. Kunci adalah satu-satunya tanda untuk vnode dalam Vue Melalui kunci ini, operasi diff kami boleh menjadi lebih tepat dan lebih pantas

Lebih tepat: kerana dengan kunci ia tidak. Penggunaan semula di tempat boleh dielakkan dalam fungsi a.keyNode yang sama === b.perbandingan kekunci. Jadi ia akan menjadi lebih tepat.

Lebih pantas
• : Gunakan keunikan kekunci untuk menjana objek peta untuk mendapatkan nod yang sepadan, yang lebih pantas daripada kaedah traversal

Cara untuk beralih daripada DOM sebenar kepada DOM maya

• melibatkan prinsip penyusunan templat dalam Vue Proses utama ialah:

tukar templat kepada

Tree, menggunakan objek untuk menerangkan sintaks JS sebenar (tukar DOM sebenar kepada DOM maya)

Optimumkan pepohon

• ast ast Kod penjanaan pokok

• Mengapa Vue menggunakan pemaparan tak segerak?

• ast ialah kemas kini peringkat komponen Jika kemas kini tak segerak tidak digunakan, komponen semasa akan dipaparkan semula setiap kali data dikemas kini, demi prestasi,

  akan dikemas kini selepas pusingan kemas kini data ini, mengemas kini paparan secara tidak segerak. Idea teras
.

memberitahu pemerhati untuk mengemas kini, memanggil pemerhati

secara bergilir,

menyahganda pemerhati dan meletakkannya ke dalam baris gilir, nextTick (Vue) menyegarkan baris gilir pemerhati dalam tanda seterusnya ( tak segerak). Vue nextTick

Mengapakah data dalam komponen vue perlu menjadi fungsi? Objek

dep.notify（） subs[i].update ialah jenis rujukan Apabila menggunakan semula komponen, memandangkan objek data semua menghala ke objek data yang sama, apabila data diubah suai dalam satu komponen, data dalam komponen lain yang digunakan semula akan diubah suai pada masa yang sama. masa. ; Apabila menggunakan fungsi yang mengembalikan objek, kerana setiap kali objek baharu (contoh Objek) dikembalikan dan alamat rujukan berbeza, masalah ini tidak akan berlaku. update queueWatcher flushSchedulerQueuePerbezaan antara MVC dan MVVM

MVC

Nama penuh MVC ialah Model View Controller, iaitu model-view (pandangan) - singkatan pengawal, model reka bentuk perisian

Model (model): Ia adalah bahagian aplikasi yang digunakan untuk memproses logik data aplikasi. Biasanya objek model bertanggungjawab untuk mengakses data dalam pangkalan data

Paparan: Ia adalah bahagian aplikasi yang mengendalikan paparan data. Biasanya paparan dibuat berdasarkan data model Pengawal: Ia adalah bahagian aplikasi yang mengendalikan interaksi pengguna. Biasanya pengawal bertanggungjawab untuk membaca data daripada paparan, mengawal input pengguna dan menghantar data kepada model

Idea MVC: Satu penerangan ayat ialah Pengawal bertanggungjawab untuk memaparkan Data model menggunakan Paparan Dalam erti kata lain Ia adalah untuk menetapkan data Model kepada Paparan dalam Pengawal.

• MVVM
• MVVM menambah kelas VM baharu
• ViewModel 层：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

注意：Vue 并没有完全遵循 MVVM 的思想 这一点官网自己也有说明

那么问题来了 为什么官方要说 Vue 没有完全遵循 MVVM 思想呢？

• 严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ？你能说说如下代码的实现原理么？

1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题

• Vue使用了Object.defineProperty实现双向数据绑定

• 在初始化实例时对属性执行 getter/setter 转化

• 属性必须在data对象上存在才能让Vue将它转换为响应式的（这也就造成了Vue无法检测到对象属性的添加或删除）

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2）接下来我们看看框架本身是如何实现的呢?

Vue 源码位置：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；

• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，

• 最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理

defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。

相关代码如下

import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import { isObject } from "./util"; // 工具方法

export function reactive(target) {
  // 根据不同参数创建不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
  if (!isObject(target)) {
    return target;
  }
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {
  return function get(target, key, receiver) {
    // 对获取的值进行放射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
      // 如果获取的值是对象类型，则返回当前对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {
  return function set(target, key, value, receiver) {
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
      console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
      console.log("属性值被修改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
  get, // 当获取属性时调用此方法
  set, // 当修改属性时调用此方法
};

Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

• 生成AST树
• 优化
• codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

MVVM的优缺点?

优点:

• 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑
• 提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
• ⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放

缺点:

• Pepijat sukar untuk dinyahpepijat: Kerana mod pengikatan dua hala, apabila anda melihat pengecualian dalam antara muka, mungkin terdapat pepijat dalam kod Paparan anda atau mungkin terdapat masalah dalam kod Model. Pengikatan data membolehkan pepijat di satu lokasi dipindahkan dengan cepat ke lokasi lain, menjadikannya tidak mudah untuk mengesan lokasi masalah asal. Di samping itu, pengisytiharan pengikatan data ditulis secara mustahak dalam templat Lihat, dan kandungan ini tidak boleh diganggu dan dinyahpepijat
• Model dalam modul besar juga akan menjadi sangat besar, walaupun ia digunakan Ia adalah mudah untuk digunakan dan ia adalah mudah untuk memastikan konsistensi data Jika ia disimpan untuk masa yang lama, lebih banyak memori akan digunakan jika memori tidak dikeluarkan
• Untuk aplikasi grafik yang besar, keadaan paparan agak kecil. . Jika terdapat banyak, kos membina dan menyelenggara ViewModel agak tinggi.

Selepas nilai sifat dalam data Vue berubah, adakah paparan itu akan dipaparkan semula secara serentak dengan serta-merta?

tidak melakukan pemaparan semula serta-merta secara serentak. Responsif Vue tidak bermakna DOM berubah serta-merta selepas data berubah, tetapi DOM dikemas kini mengikut strategi tertentu. Vue mengemas kini DOM secara tak segerak. Selagi ia mendengar perubahan data, Vue akan membuka baris gilir dan menampan semua perubahan data yang berlaku dalam gelung peristiwa yang sama.

Jika pemerhati yang sama dicetuskan beberapa kali, ia hanya akan ditolak ke dalam baris gilir sekali. Penyahduaan ini semasa penimbalan adalah penting untuk mengelakkan pengiraan dan operasi DOM yang tidak perlu. Kemudian, dalam tanda gelung acara seterusnya, Vue mengepam baris gilir dan melaksanakan kerja sebenar (pendua).

algoritma diff

Kerumitan masa: Algoritma diff lengkap bagi pokok ialah kerumitan masa O(n*3）, dilakukan oleh vue Optimumkan dan tukar kepada O(n).

Fahami:

• Kemas kini minimum, key adalah penting. Ini boleh menjadi pengecam unik nod ini, memberitahu algoritma diff bahawa ia adalah nod DOM yang sama sebelum dan selepas perubahan

  • Sambungan v-for Mengapa perlu ada key? Tanpa key ia akan menjadi Penggunaan Semula yang ganas, contohnya, hanya alihkan nod atau tambah nod (ubah suai DOM Menambah key hanya akan mengalihkan atau mengurangkan DOM).
• Hanya nod maya yang sama akan dibandingkan secara terperinci, jika tidak, nod lama akan dipadamkan secara ganas dan yang baharu akan dimasukkan.
• Hanya perbandingan dalam lapisan yang sama akan dilakukan dan perbandingan merentas lapisan tidak akan dilakukan.

Strategi pengoptimuman algoritma beza: empat carian hit, empat penunjuk

1. lama sebelum dan baharu sebelum (bandingkan permulaan dahulu, kemudian masukkan dan pemadaman nod)
2. Lama selepas dan baharu selepas (nisbah akhir, sebelum pemasukan atau pemadaman)
3. Lama sebelum dan baharu selepas (nisbah kepala dan ekor, ini berlaku , melibatkan nod bergerak, maka nod yang ditunjuk oleh hadapan baru akan dipindahkan ke belakang yang lama) Nod, sebelum beralih ke yang lama)
4. ---Jika anda dapat memahami soalan di atas dengan jelas, anda pada asasnya O---

Konsep mudah berikut, Anda mesti tiada masalah?

Kelebihan Vue

Rangka kerja yang ringan : hanya memfokuskan pada lapisan paparan, iaitu koleksi pandangan yang membina data Saiznya hanya beberapa dozen

; mudah difahami dan dipelajari;
• kbPengikatan data dua hala: mengekalkan
Ciri, ia lebih mudah dalam operasi data; enkapsulasi dan penggunaan semula
• , dan mempunyai kelebihan unik dalam membina aplikasi satu halaman; data untuk menyelesaikan operasi berkaitan;
• DOM Maya: angular Operasi Ia sangat intensif prestasi Ia tidak lagi menggunakan nod operasi
asli, yang membebaskan operasi
• , tetapi. operasi khusus masih react tetapi dengan cara lain; html
kelajuan berjalan Lebih cepat: Berbanding dengan
• , ia juga beroperasi secara maya
dari segi prestasi,
• mempunyai kelebihan yang hebat. domdomdomdomApakah fungsi cangkuk penghalaan vue-router dan apakah perintah pelaksanaan
• reactProses pelaksanaan cangkuk penghalaan ialah: pengawal global, pengawal penghalaan, Pengawal komponen domvue
Proses penghuraian navigasi lengkap:

Navigasi dicetuskan.

Panggil pengawal beforeRouteLeave dalam komponen yang dinyahaktifkan.

• Panggil global sebelumSetiap pengawal.

• Panggil pengawal beforeRouteUpdate (2.2) dalam komponen yang digunakan semula.

• Panggil sebelumEnter dalam konfigurasi penghalaan.

• Selesaikan komponen penghalaan tak segerak.

• Panggil beforeRouteEnter dalam komponen yang diaktifkan.

• Panggil pengawal global beforeResolve (2.5).

• Navigasi disahkan.

• Panggil cangkuk afterEach global.

• Cetuskan kemas kini DOM.

• 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

Vue.js的template编译

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

$nextTick 是什么？

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

说说Vue的生命周期吧

什么时候被调用？

• beforeCreate ：实例初始化之后，数据观测之前调用
• created：实例创建万之后调用。实例完成：数据观测、属性和方法的运算、 watch/event 事件回调。无 $el .
• beforeMount：在挂载之前调用，相关 render 函数首次被调用
• mounted：了被新创建的vm.$el替换，并挂载到实例上去之后调用改钩子。
• beforeUpdate：数据更新前调用，发生在虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。
• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。
• beforeDestroy：实例销毁前调用，实例仍然可用。
• destroyed：实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器和所有子实例都会被移除

每个生命周期内部可以做什么？

• created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。
• mounted：实例已经挂载完成，可以进行一些DOM操作。
• beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。
• updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。
• destroyed：可以执行一些优化操作，清空计时器，解除绑定事件。

ajax放在哪个生命周期？：一般放在 mounted 中，保证逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。 什么时候使用beforeDestroy？：当前页面使用 $on ，需要解绑事件。清楚定时器。解除事件绑定， scroll mousemove 。

Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

我们查看对应的 Vue 源码：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；
• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Perkongsian soalan temuduga frekuensi tinggi Vue pada tahun 2023 (dengan analisis jawapan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!