常见经典 vue 面试题（面试必问）

<router-link to="/about">Go to About</router-link>

// literal string pathrouter.push('/users/1')​// object with pathrouter.push({ path: '/users/1' })​// named route with params to let the router build the urlrouter.push({ name: 'user', params: { username: 'test' } })

[v-cloak] {    display: none;}

<template>{{fullName}}</template>export default {    data(){        return {            firstName: 'zhang',            lastName: 'san',        }    },    computed:{        fullName: function(){            return this.firstName + ' ' + this.lastName        }    }}

<template>{{fullName}}</template>export default {    data(){        return {            firstName: 'zhang',            lastName: 'san',            fullName: 'zhang san'        }    },    watch:{        firstName(val) {            this.fullName = val + ' ' + this.lastName        },        lastName(val) {            this.fullName = this.firstName + ' ' + val        }    }}

const count = ref(1)const plusOne = computed(() => count.value + 1)

const state = reactive({ count: 0 })watch(  () => state.count,  (count, prevCount) => {    /* ... */  })

// src/core/observer:45;
// 渲染watcher  /  computed watcher  /  watchconst vm = new Vue({    el: '#app',    data: {        firstname:'张',        lastname:'三'    },    computed:{ // watcher  =>   firstname lastname        // computed 只有取值时才执行
        // Object.defineProperty .get        fullName(){ // firstName lastName 会收集fullName计算属性            return this.firstname + this.lastname        }    },    watch:{        firstname(newVal,oldVal){            console.log(newVal)        }    }});
setTimeout(() => {    debugger;    vm.firstname = '赵'}, 1000);

// 初始化statefunction initState (vm: Component) {  vm._watchers = []  const opts = vm.$options  if (opts.props) initProps(vm, opts.props)  if (opts.methods) initMethods(vm, opts.methods)  if (opts.data) {    initData(vm)  } else {    observe(vm._data = {}, true /* asRootData */)  }
  // 初始化计算属性  if (opts.computed) initComputed(vm, opts.computed) 
  // 初始化watch  if (opts.watch && opts.watch !== nativeWatch) {     initWatch(vm, opts.watch)  }}
// 计算属性取值函数function createComputedGetter (key) {  return function computedGetter () {    const watcher = this._computedWatchers && this._computedWatchers[key]    if (watcher) {      if (watcher.dirty) { // 如果值依赖的值发生变化，就会进行重新求值        watcher.evaluate(); // this.firstname lastname      }      if (Dep.target) { // 让计算属性所依赖的属性 收集渲染watcher        watcher.depend()      }      return watcher.value    }  }}
// watch的实现Vue.prototype.$watch = function (    expOrFn: string | Function,    cb: any,    options?: Object  ): Function {    const vm: Component = this    debugger;    if (isPlainObject(cb)) {      return createWatcher(vm, expOrFn, cb, options)    }    options = options || {}    options.user = true    const watcher = new Watcher(vm, expOrFn, cb, options) // 创建watcher，数据更新调用cb    if (options.immediate) {      try {        cb.call(vm, watcher.value)      } catch (error) {        handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)      }    }    return function unwatchFn () {      watcher.teardown()    }}

<template><div>  请输入firstName：  <input type="text" v-model="firstName"></div><div>  请输入lastName：  <input type="text" v-model="lastName"></div><div>  请输入obj.text：  <input type="text" v-model="obj.text"></div> <div> 【obj.text】 {{obj.text}} </div></template>
<script>import {ref, reactive, watch, watchEffect} from 'vue'export default {  name: "HelloWorld",  props: {    msg: String,  },  setup(props,content){    let firstName = ref('')    let lastName = ref('')    let obj= reactive({      text:'hello'    })    watchEffect(()=>{      console.log('触发了watchEffect');      console.log(`组合后的名称为：${firstName.value}${lastName.value}`)    })    return{      obj,      firstName,      lastName    }  }};</script>

watchEffect(()=>{  console.log('触发了watchEffect');  // 这里我们不使用firstName.value/lastName.value ，相当于是监控整个ref,对应第四点上面的结论  console.log(`组合后的名称为：${firstName}${lastName}`)})

watchEffect(()=>{  console.log('触发了watchEffect');  console.log(obj);})

let obj = reactive({  text:'hello'})watchEffect(()=>{  console.log('触发了watchEffect');  console.log(obj.text);})

let obj= reactive({  text:'hello'})// watch是惰性执行， 默认初始化之后不会执行，只有值有变化才会触发，可通过配置参数实现默认执行watch(obj, (newValue, oldValue) => {  // 回调函数  console.log('触发监控更新了new',  newValue);  console.log('触发监控更新了old',  oldValue);},{  // 配置immediate参数，立即执行，以及深层次监听  immediate: true,  deep: true})

const count = ref(0)​watchEffect(() => console.log(count.value))// -> logs 0​count.value++// -> logs 1

const state = reactive({ count: 0 })watch(  () => state.count,  (count, prevCount) => {    /* ... */  })

export function watchEffect(  effect: WatchEffect,  options?: WatchOptionsBase): WatchStopHandle {  return doWatch(effect, null, options)}

export function watch<T = any, Immediate extends Readonly<boolean> = false>(  source: T | WatchSource<T>,  cb: any,  options?: WatchOptions<Immediate>): WatchStopHandle {  return doWatch(source as any, cb, options)}

function createKeyToOldIdx(children, beginIdx, endIdx) {  let i, key;  const map = {};  for (i = beginIdx; i <= endIdx; ++i) {    key = children[i].key;    if (isDef(key)) map[key] = i;  }  return map;}

// 定义 Router  class Router {      constructor () {          this.routes = {}; // 存放路由path及callback          this.currentUrl = '';  
        // 监听路由change调用相对应的路由回调          window.addEventListener('load', this.refresh, false);          window.addEventListener('hashchange', this.refresh, false);      }  
    route(path, callback){          this.routes[path] = callback;      }  
    push(path) {          this.routes[path] && this.routes[path]()      }  }  
// 使用 router  window.miniRouter = new Router();  miniRouter.route('/', () => console.log('page1'))  miniRouter.route('/page2', () => console.log('page2'))  
miniRouter.push('/') // page1  miniRouter.push('/page2') // page2  

// 定义 Router  class Router {      constructor () {          this.routes = {};          this.listerPopState()      }  
    init(path) {          history.replaceState({path: path}, null, path);          this.routes[path] && this.routes[path]();      }  
    route(path, callback){          this.routes[path] = callback;      }  
    push(path) {          history.pushState({path: path}, null, path);          this.routes[path] && this.routes[path]();      }  
    listerPopState () {          window.addEventListener('popstate' , e => {              const path = e.state && e.state.path;              this.routers[path] && this.routers[path]()          })      }  }  
// 使用 Router  
window.miniRouter = new Router();  miniRouter.route('/', ()=> console.log('page1'))  miniRouter.route('/page2', ()=> console.log('page2'))  
// 跳转  miniRouter.push('/page2')  // page2  

// Vue.setVue.set(vm.items, indexOfItem, newValue)// vm.$set，Vue.set的一个别名vm.$set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)

let oldArray = Object.create(Array.prototype);['shift', 'unshift', 'push', 'pop', 'reverse','sort'].forEach(method => {    oldArray[method] = function() { // 这里可以触发页面更新逻辑        console.log('method', method)        Array.prototype[method].call(this,...arguments);    }});let arr = [1,2,3];arr.__proto__ = oldArray;arr.unshift(4);

// 拿到数组原型拷贝一份const arrayProto = Array.prototype // 然后将arrayMethods继承自数组原型// 这里是面向切片编程思想（AOP）--不破坏封装的前提下，动态的扩展功能export const arrayMethods = Object.create(arrayProto) const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ]
methodsToPatch.forEach(function (method) { // 重写原型方法     const original = arrayProto[method] // 调用原数组的方法 
    def(arrayMethods, method, function mutator (...args) {         // 这里保留原型方法的执行结果        const result = original.apply(this, args)         // 这句话是关键        // this代表的就是数据本身 比如数据是{a:[1,2,3]} 那么我们使用a.push(4)  this就是a  ob就是a.__ob__ 这个属性就是上段代码增加的 代表的是该数据已经被响应式观察过了指向Observer实例        const ob = this.__ob__ 
        // 这里的标志就是代表数组有新增操作        let inserted        switch (method) {             case 'push':             case 'unshift':                 inserted = args                 break             case 'splice':                 inserted = args.slice(2)                 break         }        // 如果有新增的元素 inserted是一个数组 调用Observer实例的observeArray对数组每一项进行观测        if (inserted) ob.observeArray(inserted) 
        ob.dep.notify() // 当调用数组方法后，手动通知视图更新 
        return result     }) })
this.observeArray(value) // 进行深度监控

Object.defineProperty(obj, prop, descriptor)
// obj 要定义属性的对象// prop 要定义或修改的属性的名称// descriptor 要定义或修改的属性描述符
Object.defineProperty(obj,"name",{  value:"poetry", // 初始值  writable:true, // 该属性是否可写入  enumerable:true, // 该属性是否可被遍历得到（for...in， Object.keys等）  configurable:true, // 定该属性是否可被删除，且除writable外的其他描述符是否可被修改  get: function() {},  set: function(newVal) {}})

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, // 当修改属性时调用此方法};

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, // 当修改属性时调用此方法};