一、什么時候適合用computed，什么時候適合用watch

1、computed

屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。不可以在data中定義和賦值

2、watch

⑴監聽data屬性中數據的變化

⑵監聽路由router的變化

⑶進行深度監聽，監聽對象的變化

<script>export default {data () {return {group: {data1: '1',data2: '2',data3: '3'}}},watch: {group: {data1: function () {// do something },// deep設為了true 如果修改了這個group中的任何一個屬性，都會執行handler這個方法deep: true},// 有時候我們就想關心這個對象中的某個屬性'group.data3' (newVal) {console.log(newVal)}}} </script>

共同例子：

<template><div class="home"><input type="text" v-model="name" /><button type="button" @click="set">set</button><p>Full name:{{ fullName }}</p><p>first name:{{ firstName }}</p><p>Last Name：{{ lastName }}</p></div> </template> <script>export default {data () {return {name: '',firstName: '',lastName: ''}},watch: {firstName (newValue, OldValue) {console.log(newValue)console.log(OldValue)}},computed: {// 計算屬性相當于data里的屬性// 什么時候執行：初始化顯示/ 相關的data屬性發生變化 fullName: {get () {// 回調函數 當需要讀取當前屬性值是執行，根據相關數據計算并返回當前屬性的值return this.firstName + ' ' + this.lastName},set (val) {// 監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據// val就是fullName3的最新屬性值 console.log(val)const names = val.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}},methods: {set () {this.fullName = this.name}}} </script>

?二、鉤子函數你怎么理解

參考鏈接：https://segmentfault.com/a/1190000013956945?utm_source=channel-newest

三、事件修飾符

參考鏈接：https://www.cnblogs.com/xuqp/p/9406971.html

四、函數防抖和節流

新建utils.js

/*** 函數防抖 (只執行最后一次點擊)* 其原理就第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用該函數時，* 它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。* 然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。* @param fn* @param delay* @returns {Function}* @constructor*/ export const Debounce = (fn, t) => {let delay = t || 500let timerreturn function () { // 返回一個閉包let args = argumentsif (timer) {clearTimeout(timer)}timer = setTimeout(() => {timer = nullfn.apply(this, args)}, delay)} } /*** 函數節流* 規定在一個單位時間內，只能觸發一次函數，如果這個單位時間內觸發多次函數，只有一次生效* 其原理是用時間戳來判斷是否已到回調該執行時間，記錄上次執行的時間戳，然后每次觸發事件執行回調，* 回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，如果是，則執行，并更新上次執行的時間戳，如此循環* @param fn* @param interval* @returns {Function}* @constructor*/ export const Throttle = (fn, t) => {let lastlet timerlet interval = t || 500return function () { // 返回一個函數，形成閉包，持久化變量let args = arguments/*** 記錄當前函數觸發的時間* +new Date()這個操作是將該元素轉換成Number類型* 等同于Date.prototype.getTime()*/let now = +new Date()if (last && now - last < interval) {clearTimeout(timer)timer = setTimeout(() => {// 記錄上一次函數觸發的時間last = now// 修正this指向問題fn.apply(this, args)}, interval)} else {last = nowfn.apply(this, args)}console.log(now)} }

調用

<template><div class="home"><inputclass="search-bar-input"type="text"placeholder="應用搜索"@keyup="appSearch"/></div></div> </template> <script>import { Debounce } from '../utils/utils.js'export default {data () {return {}},methods: {appSearch: Debounce(function(){console.log(1)}, 300)}} </script>

?參考鏈接：https://www.cnblogs.com/fozero/p/11107606.html

五、promise的all方法

參考鏈接：https://www.cnblogs.com/whybxy/p/7645578.html

六、常用的es6語法，比如let、promise、class等等

參考鏈接：https://segmentfault.com/a/1190000004365693

七、vue怎么重置data

Object.assign(this.$data, this.$options.data())

?八、vue遞歸組件

參考鏈接：https://blog.csdn.net/badmoonc/article/details/80380557

九、vue?slot插槽

參考鏈接：https://blog.csdn.net/weixin_41646716/article/details/80450873

轉載于:https://www.cnblogs.com/adbg/p/11341953.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的常用面试题（对应的知识点）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。