前端一面必会 vue 面试题（边面边更）

components:{   AddCustomerSchedule:(resolve)=>import("../components/AddCustomer") // require([]) }

export function ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string ): VNode | Array<VNode> | void {     // async component     let asyncFactory     if (isUndef(Ctor.cid)) {         asyncFactory = Ctor         Ctor = resolveAsyncComponent(asyncFactory, baseCtor) // 默认调用此函数时返回 undefiend         // 第二次渲染时Ctor不为undefined         if (Ctor === undefined) {             return createAsyncPlaceholder( // 渲染占位符 空虚拟节点                 asyncFactory,                 data,                 context,                 children,                 tag             )         }     } }function resolveAsyncComponent ( factory: Function, baseCtor: Class<Component> ): Class<Component> | void {     if (isDef(factory.resolved)) {         // 3.在次渲染时可以拿到获取的最新组件         return factory.resolved     }    const resolve = once((res: Object | Class<Component>) => {         factory.resolved = ensureCtor(res, baseCtor)         if (!sync) {             forceRender(true) //2. 强制更新视图重新渲染         } else {             owners.length = 0         }     })    const reject = once(reason => {         if (isDef(factory.errorComp)) {             factory.error = true forceRender(true)         }     })    const res = factory(resolve, reject)// 1.将resolve方法和reject方法传入，用户调用 resolve方法后     sync = false     return factory.resolved }

<!-- View 层 -->
<div id="app">    <p>{{message}}</p>    <button v-on:click="showMessage()">Click me</button></div>

// ViewModel 层
var app = new Vue({    el: '#app',    data: {  // 用于描述视图状态           message: 'Hello Vue!',     },    methods: {  // 用于描述视图行为          showMessage(){            let vm = this;            alert(vm.message);        }    },    created(){        let vm = this;        // Ajax 获取 Model 层的数据        ajax({            url: '/your/server/data/api',            success(res){                vm.message = res;            }        });    }})

// Model 层
{    "url": "/your/server/data/api",    "res": {        "success": true,        "name": "test",        "domain": "www.baidu.com"    }}

<keep-alive>    <router-view v-if="$route.meta.keepAlive"></router-view></kepp-alive>

{  path: '/',  name: 'xxx',  component: ()=>import('../src/views/xxx.vue'),  meta:{    keepAlive: true // 需要被缓存  }},

function defieneReactive (obj, key, val){  const dep = new Dep();  ...  Object.defineProperty(obj, key, {    ...    get: function reactiveGetter () {      if(Dep.target){        dep.depend();        ...      }      return val    }    ...  })}

class Dep {  static target;  subs;
  constructor () {    ...    this.subs = [];  }  addSub (sub) {    this.subs.push(sub)  }  removeSub (sub) {    remove(this.sub, sub)  }  depend () {    if(Dep.target){      Dep.target.addDep(this)    }  }  notify () {    const subs = this.subds.slice();    for(let i = 0;i < subs.length; i++){      subs[i].update()    }  }}

class Watcher {  getter;  ...  constructor (vm, expression){    ...    this.getter = expression;    this.get();  }  get () {    pushTarget(this);    value = this.getter.call(vm, vm)    ...    return value  }  addDep (dep){        ...    dep.addSub(this)  }  ...}function pushTarget (_target) {  Dep.target = _target}

updateComponent = () => {  vm._update(vm._render())}new Watcher(vm, updateComponent)

// 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) // 进行深度监控

function patch (oldVnode, vnode, hydrating, removeOnly) {     if (isUndef(vnode)) {       if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return     }    let isInitialPatch = false     const insertedVnodeQueue = [] // 定义收集所有组件的insert hook方法的数组 // somthing ...     createElm(         vnode,         insertedVnodeQueue, oldElm._leaveCb ? null : parentElm,         nodeOps.nextSibling(oldElm)     )// somthing...     // 最终会依次调用收集的insert hook     invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);    return vnode.elm}
function createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index ) {     // createChildren 会递归创建儿子组件     createChildren(vnode, children, insertedVnodeQueue) // something... } // 将组件的vnode插入到数组中 function invokeCreateHooks (vnode, insertedVnodeQueue) {     for (let i = 0; i < cbs.create.length; ++i) {         cbs.create[i](emptyNode, vnode)     }    i = vnode.data.hook // Reuse variable     if (isDef(i)) {         if (isDef(i.create)) i.create(emptyNode, vnode)         if (isDef(i.insert)) insertedVnodeQueue.push(vnode)     } } // insert方法中会依次调用mounted方法 insert (vnode: MountedComponentVNode) {     const { context, componentInstance } = vnode     if (!componentInstance._isMounted) {         componentInstance._isMounted = true         callHook(componentInstance, 'mounted')     } }function invokeInsertHook (vnode, queue, initial) {     // delay insert hooks for component root nodes, invoke them after the // element is really inserted     if (isTrue(initial) && isDef(vnode.parent)) {         vnode.parent.data.pendingInsert = queue     } else {         for (let i = 0; i < queue.length; ++i) {             queue[i].data.hook.insert(queue[i]); // 调用insert方法         }     } }
Vue.prototype.$destroy = function () {     callHook(vm, 'beforeDestroy')     // invoke destroy hooks on current rendered tree     vm.__patch__(vm._vnode, null) // 先销毁儿子     // fire destroyed hook     callHook(vm, 'destroyed') }

// 1.组件的渲染流程 调用Vue.component -> Vue.extend -> 子类 -> new 子类// Vue.extend 根据用户定义产生一个新的类function Vue() {}function Sub() { // 会将data存起来    this.data = this.constructor.options.data();}Vue.extend = function(options) {    Sub.options = options; // 静态属性    return Sub;}let Child = Vue.extend({    data:()=>( { name: 'zf' })});
// 两个组件就是两个实例, 希望数据互不感染let child1 = new Child();let child2 = new Child();
console.log(child1.data.name);child1.data.name = 'poetry';console.log(child2.data.name);
// 根不需要 任何的合并操作   根才有vm属性 所以他可以是函数和对象  但是组件mixin他们都没有vm 所以我就可以判断 当前data是不是个函数

// 源码位置 src/core/global-api/extend.jsexport function initExtend (Vue: GlobalAPI) {  Vue.extend = function (extendOptions: Object): Function {    extendOptions = extendOptions || {}    const Super = this    const SuperId = Super.cid    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})    if (cachedCtors[SuperId]) {      return cachedCtors[SuperId]    }
    const name = extendOptions.name || Super.options.name    if (process.env.NODE_ENV !== 'production' && name) {      validateComponentName(name)    }
    const Sub = function VueComponent (options) {      this._init(options)    }    // 子类继承大Vue父类的原型    Sub.prototype = Object.create(Super.prototype)    Sub.prototype.constructor = Sub    Sub.cid = cid++    Sub.options = mergeOptions(      Super.options,      extendOptions    )    Sub['super'] = Super
    // For props and computed properties, we define the proxy getters on    // the Vue instances at extension time, on the extended prototype. This    // avoids Object.defineProperty calls for each instance created.    if (Sub.options.props) {      initProps(Sub)    }    if (Sub.options.computed) {      initComputed(Sub)    }
    // allow further extension/mixin/plugin usage    Sub.extend = Super.extend    Sub.mixin = Super.mixin    Sub.use = Super.use
    // create asset registers, so extended classes    // can have their private assets too.    ASSET_TYPES.forEach(function (type) {      Sub[type] = Super[type]    })    // enable recursive self-lookup    if (name) {       Sub.options.components[name] = Sub // 记录自己 在组件中递归自己  -> jsx    }
    // keep a reference to the super options at extension time.    // later at instantiation we can check if Super's options have    // been updated.    Sub.superOptions = Super.options    Sub.extendOptions = extendOptions    Sub.sealedOptions = extend({}, Sub.options)
    // cache constructor    cachedCtors[SuperId] = Sub    return Sub  }}

<template>    <div>      <ul>         <li v-for="value in obj" :key="value"> {{value}} </li>       </ul>       <button @click="addObjB">添加 obj.b</button>    </div></template>
<script>    export default {        data () {           return {               obj: {                   a: 'obj.a'               }           }        },       methods: {           addObjB () {               this.obj.b = 'obj.b'               console.log(this.obj)           }       }   }</script>

addObjB () (   this.$set(this.obj, 'b', 'obj.b')   console.log(this.obj)}

this.$nextTick(() => {    // 获取数据的操作...})

<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)}