[Hematemesis] Ringkasan soalan temu bual Vue.js dan analisis jawapan (datang dan kumpulkan)

Artikel ini meringkaskan dan berkongsi beberapa soalan temu bual Vue (dengan analisis jawapan) untuk membantu anda menyusun pengetahuan asas dan meningkatkan rizab pengetahuan Vue anda Adalah berbaloi untuk dikumpulkan, datang dan lihat!

(Mempelajari perkongsian video: tutorial video vue)

1

1.1. Prinsip responsif Vue

Kelas pelaksanaan teras: Pemerhati: Fungsinya adalah untuk menambah pengumpul dan penyetel pada sifat objek untuk pengumpulan kebergantungan dan kemas kini penghantaran
Dep: digunakan untuk mengumpul kebergantungan objek responsif semasa Setiap objek responsif termasuk sub-objek mempunyai contoh Dep ( Di dalam, subs ialah tatasusunan kejadian Watcher). Apabila data berubah, setiap pemerhati akan dimaklumkan melalui dep.notify().
Pemerhati: Objek pemerhati, kejadian terbahagi kepada tiga jenis: pemerhati rendering (pemerhati render), pemerhati atribut yang dikira (pemerhati yang dikira), pemerhati pendengar (pemerhati pengguna)

Hubungan antara Pemerhati dan Dep: dep dibuat seketika dalam pemerhati dan pelanggan ditambahkan ke dep.subs melintasi dep.subs melalui pemberitahuan untuk memberitahu setiap kemas kini pemerhati.

Koleksi kebergantungan: Dalam initState, apabila atribut yang dikira dimulakan, koleksi ketergantungan pemerhati yang dikira akan dicetuskan
Apabila initState, apabila atribut mendengar dimulakan, koleksi ketergantungan pemerhati pengguna dicetuskan
Proses render() mencetuskan koleksi kebergantungan pemerhati render
Apabila pemaparan semula, vm.render() dilaksanakan semula dan langganan pemerhati dalam semua subs akan dialih keluar dan ditetapkan semula.

Kemas kini penghantaran: Data respons diubah suai dalam komponen, mencetuskan logik penetap
Panggil dep.notify()
untuk melintasi semua subs (Watcher instance) , Panggil kaedah kemas kini setiap pemerhati.

Prinsip: Apabila membuat tika Vue, vue akan merentasi sifat-sifat pilihan data dan menggunakan Object.defineProperty untuk menambah getter dan setter pada sifat untuk merampas bacaan data ( getter digunakan untuk bergantung pada Collection, setter digunakan untuk menghantar kemas kini), dan menjejak kebergantungan secara dalaman, memberitahu perubahan apabila sifat diakses dan diubah suai.
Setiap tika komponen akan mempunyai tika pemerhati yang sepadan, yang akan merekodkan semua atribut data kebergantungan semasa proses pemaparan komponen (pengumpulan kebergantungan, serta tika pemerhati dan pemerhati pengguna yang dikira Kemudian, apabila kebergantungan itu ditukar, setter Kaedah ini akan memberitahu contoh pemerhati yang bergantung pada data ini untuk mengira semula (kemas kini penghantaran), dengan itu memaparkan semula komponen yang berkaitan.

Ringkasan dalam satu ayat: vue.js menggunakan rampasan data digabungkan dengan mod publish-subscribe dan menggunakan Object.defineproperty untuk
rampas penetap dan getter setiap sifat dan terbitkan mesej apabila data berubah kepada pelanggan, cetuskan panggilan balik mendengar respons

1.2 Ciri-ciri Vue.js

Mudah. untuk digunakan: Mudah, mudah dipelajari, Bermula dengan cepat

Fleksibel: (Progresif) Ekosistem yang semakin berkembang yang berskala bebas antara perpustakaan dan rangka kerja yang lengkap.
Cekap: Saiz larian gzip min 20kB; DOM maya yang sangat pantas; pengoptimuman tanpa kebimbangan
Pengikatan dua hala: kecekapan pembangunan tinggi
Perkongsian kod berasaskan komponen
Kejuruteraan projek web untuk meningkatkan kebolehbacaan kestabilan, kebolehselenggaraan

1.3 Prinsip pengikatan dua hala Vue.js

Vue.js 2.0 mengguna pakai rampasan data (mod Proksi) Gabungan. dengan mod penerbit-pelanggan (mod PubSub), Object.defineProperty() digunakan untuk merampas penetap dan getter setiap sifat, menerbitkan mesej kepada pelanggan apabila data berubah dan mencetuskan panggilan balik pendengaran yang sepadan.

Setiap tika komponen mempunyai tika program pemerhati yang sepadan Ia akan merekodkan sifat sebagai kebergantungan semasa proses pemaparan komponen Kemudian, apabila penetap kebergantungan dipanggil, pemerhati akan dimaklumkan untuk mengira semula, menyebabkan yang berkaitan. Komponen dikemas kini.

Vue.js 3.0, meninggalkan Object.defineProperty dan menggunakan Proksi asli ES6 yang lebih pantas (pemintas objek akses, juga dipanggil proksi)

Langkah:

1. Objek data yang perlu diperhatikan dilalui secara rekursif, termasuk atribut objek sub-atribut, dan penetap dan pemeroleh ditambahkan Jika anda menetapkan nilai pada objek ini, penetap akan menjadi dicetuskan, maka anda boleh Mengesan perubahan data
2.kompilasi menghuraikan arahan templat, menggantikan pembolehubah dalam templat dengan data, kemudian memulakan paparan halaman pemaparan, mengikat nod yang sepadan dengan setiap arahan kepada fungsi kemas kini dan menambah pelanggan untuk memantau data Sekali Apabila data berubah, terima pemberitahuan dan kemas kini paparan
3. Pelanggan pemerhati adalah jambatan komunikasi antara Observer dan Compile (dep) apabila ia dibuat seketika ② Ia mesti mempunyai kaedah kemas kini() ③ Apabila dimaklumkan oleh dep.notice() tentang perubahan atribut, ia boleh memanggil kaedah kemas kini()nya sendiri dan mencetuskan panggilan balik yang terikat dalam Compile. akan berjaya dan bersara.
4. MVVM, sebagai pintu masuk kepada pengikatan data, menyepadukan Observer, Compile dan Watcher Ia menggunakan Observer untuk memantau perubahan dalam data modelnya sendiri, menggunakan Compile untuk menghuraikan dan menyusun arahan templat, dan akhirnya menggunakan Watcher untuk merapatkan jurang. antara Observer dan Compile. Jambatan komunikasi untuk mencapai kesan pengikatan dua hala perubahan data -> lihat kemas kini lihat perubahan interaktif (input) -> perubahan model data.

1.4. Bagaimana untuk memantau perubahan dalam nilai hartanah dalam Vue?

Sebagai contoh, anda kini perlu memantau perubahan dalam obj.a dalam data. Anda boleh memantau perubahan dalam atribut objek dalam Vue seperti ini:

watch: {
      obj: {
      	handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }

Atribut dalam mewakili traversal dalam, tetapi menulis dengan cara ini akan memantau semua perubahan atribut obj, yang bukan kesan yang kita inginkan, jadi buat beberapa pengubahsuaian:

watch: {
   'obj.a': {
      	handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

Terdapat kaedah lain, yang boleh dilaksanakan melalui pengiraan Anda hanya perlu:

computed: {
    a1 () {
      return this.obj.a    
      }
}

Gunakan ciri-ciri atribut yang dikira untuk mencapainya pergantungan berubah, ia akan dikira semula nilai baharu.

1.5.Vue.js 3.0 Sebab untuk meninggalkan defineProperty dan menggunakan Proxy

Object.defineProperty defects

1 Pantau tatasusunan sasaran berubah, overhed adalah tinggi. Jadi Vue.js melepaskan pengesanan perubahan subskrip;
2.Object.defineProperty hanya boleh merampas sifat objek, manakala Proksi ialah objek proksi langsung. 3.Object.defineProperty perlu melintasi setiap sifat objek Jika nilai hartanah juga merupakan objek, ia memerlukan traversal yang mendalam. Proksi secara langsung proksi objek dan tidak memerlukan operasi traversal.
4. Object.defineProperty perlu diperhatikan secara manual untuk sifat baharu. vue2 perlu menggunakan vm.$set untuk memastikan sifat yang baru ditambah juga responsif
5. Proksi menyokong 13 operasi pemintasan, yang mentakrifkanProperty tidak mempunyai
6. Proksi ialah standard baharu. Enjin JS akan terus mengoptimumkan Proksi, tetapi pengambil dan penetap pada asasnya tidak lagi akan dioptimumkan dalam cara yang disasarkan

1.6 Perkara yang berlaku apabila atribut baharu ditambahkan pada atribut objek dalam data dalam Vue 2 Apa? Bagaimana untuk menyelesaikannya?

Pandangan tidak segar semula. Ini kerana apabila tika Vue dibuat, sifat baharu tidak diisytiharkan, jadi sifat tersebut tidak ditukar kepada sifat responsif oleh Vue, dan secara semula jadi kemas kini paparan tidak akan dicetuskan dalam kes ini, anda perlu menggunakan global Vue api $set():

this.$set(this.obj, 'new_property', 'new_value')

1.7 Perbezaan antara Computed dan Watch dan senario aplikasi

atribut yang dikira: . bergantung pada nilai atribut lain, dan Nilai yang dikira dicache Hanya jika nilai atribut ia bergantung pada perubahan, nilai yang dikira akan dikira semula pada kali nilai yang dikira diperolehi.
pendengar jam tangan: Ia lebih kepada fungsi pemerhatian, tidak boleh disimpan dalam cache, serupa dengan panggilan balik pemantauan data tertentu Setiap kali data yang dipantau berubah, panggilan balik akan dilaksanakan untuk operasi seterusnya.

Senario aplikasi:

1 Apabila kita perlu melakukan pengiraan berangka dan bergantung pada data lain, pengiraan harus digunakan kerana ciri cache yang dikira boleh digunakan untuk. elakkan Setiap kali nilai diperoleh, ia dikira semula.
2. Apabila kami perlu melakukan operasi tak segerak atau mahal apabila data berubah, kami harus menggunakan jam tangan Menggunakan pilihan jam tangan membolehkan kami melakukan operasi tak segerak (mengakses API), mengehadkan kekerapan kami melakukan operasi dan. Sebelum kami mendapat keputusan akhir, kami menyediakan keadaan perantaraan. Ini adalah perkara yang tidak boleh dilakukan oleh sifat yang dikira.
3. Jika berbilang faktor mempengaruhi satu paparan, gunakan Dikira; jika perubahan dalam satu faktor mempengaruhi berbilang faktor dan paparan lain, gunakan Tontonan; Kaedah

1.dikira: Sifat yang dikira dicache berdasarkan kebergantungan mereka dan hanya akan dinilai semula apabila kebergantungan berkaitannya berubah Untuk kaedah, apabila pemaparan semula berlaku, 2.panggilan kaedah akan sentiasa melaksanakan fungsi

1.9. DOM maya, algoritma berbeza

1 Marilah kita tidak mengendalikan elemen DOM secara langsung, tetapi hanya mengendalikan data untuk memaparkan semula halaman

1.10 Mengapa DOM Maya diperlukan?

1 Ia mempunyai kelebihan merentas platform

2. Ia lambat untuk mengendalikan DOM, tetapi js berjalan dengan cekap. Kita boleh meletakkan operasi perbandingan DOM pada lapisan JS untuk meningkatkan kecekapan.

3. Tingkatkan prestasi pemaparan

1.11. Penapis (Penapis)

Gunakan penapis dalam Vue untuk menapis (format) Data, penapis tidak akan mengubah suai data, tetapi menapis (format) data dan menukar output yang dilihat oleh pengguna (sifat dikira, kaedah, semua memproses paparan output format data dengan mengubah suai data.

Senario penggunaan: Contohnya Perlu untuk memproses format paparan masa, nombor, dsb.;

1.12. : Setara dengan event.stopPropagation() dalam JavaScript, menghalang acara daripada menggelegak;

2)

: Setara dengan event.preventDefault() dalam JavaScript, menghalang pelaksanaan gelagat pratetap (jika acara itu boleh dibatalkan, maka Batalkan acara tanpa menghentikan penyebaran acara selanjutnya); 3) : Apabila elemen menggelegak, elemen dengan pengubah suai ini dicetuskan terlebih dahulu. Jika terdapat berbilang pengubah suai, ia akan dicetuskan dari luar ke dalam. Sebagai contoh, jika p1 bersarang dalam p2, p3 bersarang dalam p3.capture bersarang dalam p4, maka urutan pelaksanaan ialah: p3=》p4=》p2=》p1

4)

: Hanya peristiwa dalam skopnya sendiri akan dicetuskan. Tidak mengandungi elemen kanak-kanak; 5)

: Hanya akan dicetuskan sekali. .stop
.prevent
1.13 Apakah perbezaan antara arahan v-show dan arahan v-if? .capture
.self
v-show .onceHanya mengawal mod paparan elemen

, tukar atribut paparan ke depan dan ke belakang antara

sekat dan tiada

; if akan mengawal Kehadiran atau ketiadaan nod DOM ini. Apabila kita perlu kerap menukar paparan/menyembunyikan elemen, menggunakan v-show akan menjimatkan lebih banyak overhed prestasi apabila kita hanya perlu memaparkan atau menyembunyikannya sekali, menggunakan v-if adalah lebih munasabah.

Bagaimanakah 1.14.v-model dilaksanakan sebenarnya? bersamaan dengan v-bind:value="message" v-on:input="message=e v e n t . t a r g e t . v a l u e " bertindak pada komponen itu pada asasnya ialah gula sintaks untuk komunikasi komponen ibu bapa-anak, dilaksanakan melalui prop dan .emit , yang bersamaan dengan: 1.15.Mengapa data ialah fungsi dan bukannya objek

Objek dalam JavaScript ialah data jenis rujukan Bila berbilang kejadian merujuk kepada Objek yang sama, selagi satu tika beroperasi pada objek ini, data dalam keadaan lain juga akan berubah. Dalam Vue, kami ingin menggunakan semula komponen lebih banyak, jadi setiap komponen perlu mempunyai data sendiri supaya komponen tidak akan mengganggu satu sama lain. Oleh itu, data komponen tidak boleh ditulis dalam bentuk objek, tetapi mesti ditulis dalam bentuk fungsi. Data ditakrifkan dalam bentuk nilai pulangan fungsi, supaya setiap kali kita menggunakan semula komponen, data baru akan dikembalikan, maksudnya, setiap komponen mempunyai ruang data peribadinya sendiri, dan masing-masing mengekalkan data mereka sendiri mengganggu operasi normal komponen lain.

value="message" @input=" $emit('input', $event.target.value)"

1.16 Proses daripada templat Vue untuk memaparkan

1. pokok sintaks abstrak )

2. Optimumkan nod statik. Jika ia adalah nod statik, DOM yang mereka hasilkan tidak akan berubah, yang sangat mengoptimumkan kemas kini templat masa jalan.

3. Hasilkan fungsi pemaparan. Nilai pulangan pemaparan ialah VNode, iaitu nod DOM maya Vue, yang mengandungi (nama label, nod anak, teks, dll.)

1.17 .Templat Vue untuk membuat proses

Panggil kaedah parse untuk menukar templat kepada ast (pokok sintaks abstrak)

Optimumkan nod statik. Jika ia adalah nod statik, DOM yang mereka hasilkan tidak akan berubah, yang sangat mengoptimumkan kemas kini templat masa jalan.

Hasilkan fungsi pemaparan Nilai pulangan pemaparan ialah VNode ialah nod DOM maya Vue, yang mengandungi (nama label, nod anak, teks, dll.)

1.18.axios是什么

易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。

1.19.sass是什么？如何在vue中安装和使用？

sass是一种CSS预编译语言安装和使用步骤如下。

1.用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
2.在 webpack.config.js中配置sass加载程序。

1.20.Vue.js页面闪烁

Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下

1.21.如何解决数据层级结构太深的问题

在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码: , 可以使用vm.$set手动定义一层数据:

vm.$set("demo"，a.b.c.d)

1.22.在 Vue. js开发环境下调用API接口，如何避免跨域

config/ index.js内对 proxyTable项配置代理。

1.23.批量异步更新策略

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
换句话说，只要观察到数据变化，就会自动开启一个队列，并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和 DOM 操作。

1.24.vue 的 nextTick 方法的实现原理

1.vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
2.microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕

1.25.Vue 组件 data 为什么必须是函数 ?

因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染。
所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

1.26.v-if和v-for一起使用的弊端及解决办法

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

解决办法：

1.在v-for的外层或内层包裹一个元素来使用v-if
2.用computed处理

1.27.vue常用指令

1.v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
2.v-bind 动态绑定 作用： 及时对页面的数据进行更改
3.v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
4.v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
5.v-show 显示内容 （同angular中的ng-show）
6.v-hide 隐藏内容（同angular中的ng-hide）
7.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
8.v-else-if 必须和v-if连用
9.v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
10.v-text 解析文本
11.v-html 解析html标签
12.v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
13.v-once 进入页面时 只渲染一次 不在进行渲染
14.v-cloak 防止闪烁
15.v-pre 把标签内部的元素原位输出

1.28. 组件传值方式有哪些

1.父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
2.子传父：子组件通过 this.$emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调
3.其他方式：通过创建一个bus，进行传值
4.使用Vuex

1.30.vue中 key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM

1.31.为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty？

Object.defineProperty 本身有一定的监控到数组下标变化的能力,但是在 Vue 中,从性能/体验的性价比考虑,尤大大就弃用了这个特性(Vue 为什么不能检测数组变动 )。为了解决这个问题,经过 vue 内部处理后可以使用以下几种方法来监听数组

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

由于只针对了以上 7 种方法进行了 hack 处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。

Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。
Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

1.32.谈一谈 nextTick 的原理

JS 运行机制

JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤:

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度。 消息队列中存放的是一个个的任务（task）。 规范中规定 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task 结束后，都要清空所有的 micro task。

for (macroTask of macroTaskQueue) {
  // 1. Handle current MACRO-TASK
  handleMacroTask();

  // 2. Handle all MICRO-TASK
  for (microTask of microTaskQueue) {
    handleMicroTask(microTask);
  }}

在浏览器环境中 :

常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate

常见的 micro task 有 MutationObsever 和 Promise.then

异步更新队列

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。
然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
在 vue2.5 的源码中，macrotask 降级的方案依次是：setImmediate、MessageChannel、setTimeout

vue 的 nextTick 方法的实现原理:

vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕
考虑兼容问题,vue 做了 microtask 向 macrotask 的降级方案

1.33.谈谈 Vue 事件机制,手写on,off,emit,once

Vue 事件机制 本质上就是 一个 发布-订阅 模式的实现。

class Vue {
  constructor() {
    //  事件通道调度中心
    this._events = Object.create(null);
  }
  $on(event, fn) {
    if (Array.isArray(event)) {
      event.map(item => {
        this.$on(item, fn);
      });
    } else {
      (this._events[event] || (this._events[event] = [])).push(fn);
    }
    return this;
  }
  $once(event, fn) {
    function on() {
      this.$off(event, on);
      fn.apply(this, arguments);
    }
    on.fn = fn;
    this.$on(event, on);
    return this;
  }
  $off(event, fn) {
    if (!arguments.length) {
      this._events = Object.create(null);
      return this;
    }
    if (Array.isArray(event)) {
      event.map(item => {
        this.$off(item, fn);
      });
      return this;
    }
    const cbs = this._events[event];
    if (!cbs) {
     return this;
    }
    if (!fn) {
      this._events[event] = null;
      return this;
    }
    let cb;
    let i = cbs.length;
    while (i--) {
      cb = cbs[i];
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1);
        break;
      }
    }
    return this;
  }
  $emit(event) {
    let cbs = this._events[event];
    if (cbs) {
      const args = [].slice.call(arguments, 1);
      cbs.map(item => {
        args ? item.apply(this, args) : item.call(this);
      });
    }
    return this;
  }}

1.34.vue-router有哪几种导航钩子？

三种:

一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

1.35.vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

1.36 Apakah perbezaan antara MVVM dan MVC? Bagaimanakah ia berbeza daripada rangka kerja lain (jquery)? Senario yang manakah digunakan?

MVVM dan MVC kedua-duanya adalah idea reka bentuk Perkara utama ialah Pengawal dalam MVC berkembang menjadi ViewModel terutamanya memaparkan lapisan paparan melalui data dan bukannya nod operasi, yang menyelesaikan masalah dalam MVC. Sebilangan besar operasi DOM mengurangkan prestasi pemaparan halaman dan kelajuan pemuatan yang perlahan, menjejaskan pengalaman pengguna. Terutamanya digunakan dalam senario dengan banyak operasi data.
Senario: Senario dengan banyak operasi data, lebih mudah

1.37 Mari kita bincangkan tentang pemahaman anda tentang kompilasi templat Vue.js

Ringkasnya, ia ditukar menjadi pepohon AST terlebih dahulu, dan kemudian fungsi pemaparan yang terhasil mengembalikan VNODE (nod DOM maya syarikat Vue)
Langkah terperinci:

Pertama, lulus Pengkompil menyusun templat ke dalam pepohon sintaks AST (pokok sintaks abstrak ialah perwakilan pokok struktur sintaks abstrak kod sumber Kompilasi ialah nilai pulangan createCompiler, yang digunakan untuk mencipta pengkompil). Bertanggungjawab untuk menggabungkan pilihan.
Kemudian, AST akan dijana (proses menukar pepohon sintaks AST kepada rentetan fungsi pemaparan) untuk mendapatkan fungsi pemaparan Nilai pulangan pemaparan ialah VNode ialah nod DOM maya bagi Vue mengandungi (nama label, nod anak , teks, dll.)

1.38. ?

Jawapan: Apabila membungkus komponen dinamik, kejadian komponen tidak aktif akan dicache, terutamanya digunakan untuk mengekalkan keadaan komponen atau mengelakkan pemaparan semula;
Gunakan: Halaman mudah
Cache:
Tiada caching:

1.39 Perbezaan antara vue dan tindak balas

Mata yang sama: kedua-duanya menggalakkan komponen dan mempunyai konsep 'props' mempunyai alat pembinaan sendiri Reat dan Vue hanya mempunyai rangka rangka kerja, dan fungsi lain seperti penghalaan dan pengurusan keadaan adalah komponen yang dipisahkan daripada rangka kerja.

Perbezaan: React: aliran data sehala, sintaks - JSX, dalam React anda perlu menggunakan kaedah setState() untuk mengemas kini keadaan. Vue: pengikatan data dua hala, sintaks – HTML, objek keadaan tidak diperlukan, data diuruskan dalam objek Vue oleh atribut data. Sesuai untuk aplikasi kecil, tetapi tidak sesuai untuk aplikasi besar.

1.40 Memahami kitaran hayat vue?

Rujuk artikel tuan: nota vue - pembelajaran kedua dan pemahaman kitaran hayat

beforeCreate ialah yang pertama dicetuskan selepas Vue baharu( ) Cangkuk, data dan kaedah pada data, kaedah, pengiraan dan jam tangan tidak boleh diakses dalam peringkat semasa.

createdBerlaku selepas instance dibuat Pemerhatian data telah selesai pada peringkat semasa, iaitu, data boleh digunakan dan menukar data di sini tidak akan mencetuskan fungsi yang dikemas kini. Anda boleh melakukan beberapa pemerolehan data awal Anda tidak boleh berinteraksi dengan Dom pada peringkat semasa Jika anda perlu, anda boleh mengakses Dom melalui vm.$nextTick.

beforeMount berlaku sebelum dipasang, sebelum itu templat templat telah diimport ke dalam fungsi pemaparan untuk penyusunan. Pada peringkat semasa, Dom maya telah dibuat dan akan mula membuat persembahan. Perubahan pada data juga boleh dibuat pada masa ini, dan kemas kini tidak akan dicetuskan.

mountedBerlaku selepas pemasangan selesai Pada peringkat semasa, Dom sebenar dipasang, data terikat dua hala, nod Dom boleh diakses dan atribut $refs digunakan untuk. mengendalikan Dom.

sebelum Kemas kini berlaku sebelum kemas kini, iaitu, data responsif dikemas kini dan dom maya dicetuskan sebelum pemaparan semula Anda boleh menukar data dalam peringkat semasa tanpa menyebabkan pemaparan semula.

updatedBerlaku selepas kemas kini selesai, dan komponen Dom dalam peringkat semasa telah dikemas kini. Berhati-hati untuk mengelak daripada menukar data pada masa ini kerana ini boleh mengakibatkan gelung kemas kini yang tidak terhingga.

beforeDestroyBerlaku sebelum contoh dimusnahkan. Contoh boleh digunakan sepenuhnya pada peringkat semasa. Kami boleh melakukan kerja penamat pasca pemprosesan pada masa ini, seperti mengosongkan pemasa.

destroyed berlaku selepas instance dimusnahkan Pada masa ini, hanya shell dom yang tinggal. Komponen telah dibongkar, pengikatan data telah dialih keluar, pendengar telah dialih keluar dan semua kejadian kanak-kanak telah dimusnahkan.

1.41 Mari kita bincangkan tentang algoritma pembezaan pemapar Vue2.x dan Vue3.x masing-masing

Ringkasnya, algoritma pembezaan mempunyai proses berikut

<. .> 3. Bandingkan kes di mana terdapat nod anak (beza teras)

3. Bandingkan nod anak secara rekursif

Kerumitan masa Beza biasa antara dua pokok ialah O(n^3), tetapi dalam situasi sebenar kami jarang mengalihkan DOM merentasi tahap, jadi Vue mengoptimumkan Beza Dari O(n^3) -> O(n), hanya apabila kedua-dua yang lama dan baharu kanak-kanak mempunyai berbilang nod anak, algoritma Diff teras perlu digunakan untuk perbandingan tahap yang sama.

Algoritma Perbezaan teras Vue2 menggunakan algoritma perbandingan dua hujung Pada masa yang sama, ia membandingkan dari kedua-dua hujung kanak-kanak lama dan baharu, menggunakan nilai kunci untuk mencari nod boleh guna semula, dan kemudian melakukan. operasi berkaitan. Berbanding dengan algoritma React's Diff, dalam keadaan yang sama, ia boleh mengurangkan bilangan nod mudah alih, mengurangkan kehilangan prestasi yang tidak perlu dan lebih elegan.

Vue3.x melukis pada
algoritma ivi dan algoritma inferno

menentukan jenis VNode semasa menciptanya dan menggunakan operasi bit untuk menentukan jenis VNode semasa pemasangan /patch process Type, digabungkan dengan algoritma Diff teras atas dasar ini, meningkatkan prestasi berbanding Vue2.x. (Pelaksanaan sebenar boleh dilihat bersama kod sumber Vue3.x.)

Algoritma ini juga menggunakan idea pengaturcaraan dinamik untuk menyelesaikan urutan rekursif terpanjang.

1.42 Apakah pengoptimuman prestasi yang telah anda lakukan untuk Vue?

Fasa pengekodan

1 Minimumkan data dalam data akan menambah getter dan setter, dan 2.watcher
yang sepadan akan menjadi. dikumpul. .v-if dan v-for tidak boleh digunakan bersama
4. Jika anda perlu menggunakan v-for untuk mengikat acara pada setiap elemen, gunakan proksi acara
5. Halaman SPA menggunakan keep- komponen caching hidup
6. Dalam lebih banyak kes, gunakan v-if dan bukannya v-show
7. Kunci dijamin unik
8. Gunakan penghalaan untuk memuatkan malas dan komponen tak segerak
9. Anti -goncang dan pendikit
10. Import modul pihak ketiga atas permintaan
11. Tatal senarai panjang ke kawasan yang boleh dilihat dan muatkan secara dinamik
12. Pemuatan imej yang malas

SEO pengoptimuman

1. Prapemarahan
2. SSR pemampatan sisi pelayan

Pengoptimuman pembungkusan

1 . 🎜>

Pengalaman pengguna


1. Skrin rangka

2.PWA

Anda juga boleh menggunakan cache (cache pelanggan, cache pelayan) pengoptimuman, dayakan pemampatan gzip pada pelayan, dsb.

1.43 Mari kita bincangkan tentang prinsip pelaksanaan penghalaan cincang dan penghalaan sejarah Nilai

sebenarnya ialah perkara selepas # dalam URL.

sebenarnya dilaksanakan menggunakan API yang disediakan dalam HTML5, terutamanya

dan

. location.hash

1.44 Memahami halaman tunggal SPA, apakah kelebihan dan kekurangannya historyhistory.pushState()history.replaceState()SPA (aplikasi satu halaman) hanya memuatkan HTML yang sepadan apabila halaman Web dimulakan , JavaScript dan CSS

Setelah halaman dimuatkan, SPA tidak akan memuat semula atau melompat halaman disebabkan oleh operasi pengguna

Sebaliknya, ia menggunakan mekanisme penghalaan untuk merealisasikan transformasi kandungan HTML dan interaksi antara UI dan pengguna untuk elakkan memuatkan semula Halaman Kelebihan:

1 Pengalaman pengguna adalah baik dan pantas Perubahan kandungan tidak memerlukan memuatkan semula keseluruhan halaman, mengelakkan lompatan yang tidak perlu dan rendering berulang
2 , Berdasarkan. perkara di atas, SPA mempunyai tekanan yang agak kecil pada pelayan
3. Tanggungjawab bahagian hadapan dan bahagian belakang dipisahkan dan seni binanya jelas pemprosesan

Kelemahan:

1 Pemuatan awal memakan masa: Untuk merealisasikan fungsi dan kesan paparan aplikasi web satu halaman, JavaScript dan CSS perlu dimuatkan secara seragam semasa memuatkan halaman, dan beberapa halaman dimuatkan atas permintaan

2. Maju ke hadapan Pengurusan penghalaan belakang: Memandangkan aplikasi satu halaman memaparkan semua kandungan pada satu halaman,

anda tidak boleh menggunakan fungsi ke hadapan dan ke belakang penyemak imbas. Semua penukaran halaman memerlukan pengurusan tindanan anda sendiri

3. SEO adalah sukar: kerana Semua kandungan digantikan secara dinamik dan dipaparkan pada satu halaman, jadi ia mempunyai kelemahan semula jadi dalam SEO

1.45. Bagaimana untuk menggunakan komponen tersuai dalam.vue.cli? Adakah anda mengalami sebarang masalah?

Langkah 1: Buat fail komponen baharu (indexPage.vue) dalam direktori komponen Skrip mestilah

Langkah 2: Buat komponen baharu pada halaman anda perlu gunakan (komponen ): Langkah 3: Suntikan ia ke dalam atribut komponen sub-komponen vue,

Langkah 4: Gunakannya dalam paparan templat,

Contohnya, dinamakan indexPage, Apabila menggunakannya, index-pageexport default {}
import indexPage from ‘@/components/indexPage.vue’
1.46 Bagaimana untuk melaksanakan pemuatan atas permintaan dengan tetapan webpack untuk vuecomponents:{indexPage}

webpack menyediakan

Laksanakan pemuatan atas permintaan. Pada masa lalu, laluan diperkenalkan melalui import, tetapi kini ia diperkenalkan melalui definisi const.

Kaedah pengenalan tanpa pemuatan halaman atas permintaan:

Kaedah pengenalan dengan pemuatan halaman atas permintaan:

二、组件 Component

2.1.vue中如何编写可复用的组件 （编写组件的原则）

以组件功能命名
只负责ui的展示和交互动画，不要在组件里与服务器打交道（获取异步数据等）
可复用组件不会因组件使用的位置、场景而变化。尽量减少对外部条件的依赖。

2.2.如何让CSS只在当前组件中起作用？

在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性即可

2.3.keep-alive是什么？

如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

两个重要属性，include 缓存组件名称，exclude 不需要缓存的组件名称。

2.4.如何在 Vue. js动态插入图片

对“src”属性插值将导致404请求错误。应使用 v-bind:src （简写:src）格式代替。

2.5.父子组件的生命周期顺序(可参照上方图解)

加载渲染过程：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程：父beforeUpdate->父updated
销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

三、Vuex

3.1.vuex的核心概念

1.state => 基本数据
2.getters => 从基本数据派生的数据
3.mutations => 修改数据，同步
4.actions => 修改数据，异步 (Action 提交的是 mutation，而不是直接变更状态)
5.modules => 模块化Vuex

3.2.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。
Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，通过 Getter暴露给 view层的组件或者页面，页面监测到状态改变于是更新页面。如果你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 能够更好的帮助我们管理组件外部的状态，一般可以运用在购物车、登录状态、播放等场景中。

3.3.多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块

1.公共的数据部分可以提升至和他们最近的父组件，由父组件派发
2.公共数据可以放到vuex中统一管理，各组件分别获取

3.4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

1.如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

2.如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

3.5.Vuex中如何异步修改状态

actions与mutations作用类似，都是可以对状态进行修改。不同的是actions是异步操作的。

actions是可以调用Mutations里的方法的。

const actions={
	addActions(context){
		context.commit('add',10);//调用mutations中的方法
		setTimeout(()=>{context.commit('reduce')},5000)
	//	setTimeOut(()=>{context.commit('reduce')},3000);
		console.log('我比reduce提前执行');
	},
	
	reduceActions({commit}){
		commit('reduce');
	}}

3.6.Vuex中actions和mutations的区别

Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }})

Action Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }})

3.7.怎么在组件中批量使用Vuex的state状态？

使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex' export default{ computed:{ ...mapState(['price','number']) } }

3.8.Vuex中状态是对象时，使用时要注意什么？

对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变state里面的状态，是不允许，所以先用深度克隆复制对象，再修改。

四、Router

4.1.vue-router 路由模式有几种

1.Hash: 使用 URL 的 hash 值来作为路由。支持所有浏览器。 带#。如：http://localhost:8080/#/pageA。改变hash，浏览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联起来了。
2.History: 以来 HTML5 History API 和服务器配置。参考官网中 HTML5 History 模式，不带#， 如：http://localhost:8080/ 正常的而路径，并没有#。基于HTML5的 pushState、replaceState实现
3.Abstract: 支持所有 javascript 运行模式。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

4.2.vue-router如何定义嵌套路由

通过children 数组：

const router = new VueRouter({
  routes: [
    {
      path: "/parentPage",
      component: testPage,
      children: [
        {
          path: "/childrenA",
          component: childrenComponentA,
        },
        {
          path: "/childrenB",
          component: childrenComponentB,
        },
      ],
    },
    {
      // 其他和parentPage平级的路由
    },
  ],});

4.3.vue-router有哪几种导航钩子？

1.全局导航钩子：router.beforeEach(to,from,next)
2.组件内的钩子beforeRouteEnter (to, from, next) beforeRouteUpdate (to, from, next) beforeRouteLeave (to, from, next)
3.单独路由独享组件 beforeEnter: (to, from, next)

参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

4.4. $ route和$ router的区别

1、$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

1.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径如"/foo/bar"。
2. $route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。
3. $route.query 一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有$route.query.user == 1， 如果没有查询参数，则是个空对象
4. $route.hash 当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串
5. $route.fullPath 完成解析后的 URL，包含查询参数和hash的完整路径。
6. $route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7. $route.name 当前路径名字
8. $ route.meta 路由元信息

2、$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

实例方法：

1）、push

1.字符串this.$router.push('home')
2. 对象this.$router.push({path:'home'})
3. 命名的路由this.$router.push({name:'user',params:{userId:123}})
4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})
push方法其实和是等同的。
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

2）、go
页面路由跳转
前进或者后退this.$router.go(-1) // 后退

3）、replace
push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录

4.5.路由之间跳转的方式

1.声明式（标签跳转）
2.编程式（ js跳转）

4.6.active-class是哪个组件的属性

vue-router 模块 的router-link组件

4.7.vue-router实现路由懒加载(动态加载路由)

把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，      
      component:() = import('../views/home')
	}
  ]})

4.8.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/：id
使用router对象的params id

面试官:我难道问不倒这小子了?(面试官持续懵逼中) 对大家有帮助的话三连呀~ 持续更新

【Tutorial video berkaitan yang disyorkan: Tutorial pengenalan Vuejs, Bermula dengan bahagian hadapan web]

Atas ialah kandungan terperinci [Hematemesis] Ringkasan soalan temu bual Vue.js dan analisis jawapan (datang dan kumpulkan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!