腾讯二面 vue 面试题总结

function observer(value) { // proxy reflect    if (typeof value === 'object' && typeof value !== null)    for (let key in value) {        defineReactive(value, key, value[key]);    }}
function defineReactive(obj, key, value) {    observer(value);    Object.defineProperty(obj, key, {        get() { // 收集对应的key 在哪个方法（组件）中被使用            return value;        },        set(newValue) {            if (newValue !== value) {                observer(newValue);                value = newValue; // 让key对应的方法（组件重新渲染）重新执行            }        }    })}let obj1 = { school: { name: 'poetry', age: 20 } };observer(obj1);console.log(obj1)

class Observer {  // 观测值  constructor(value) {    this.walk(value);  }  walk(data) {    // 对象上的所有属性依次进行观测    let keys = Object.keys(data);    for (let i = 0; i < keys.length; i++) {      let key = keys[i];      let value = data[key];      defineReactive(data, key, value);    }  }}// Object.defineProperty数据劫持核心 兼容性在ie9以及以上function defineReactive(data, key, value) {  observe(value); // 递归关键  // --如果value还是一个对象会继续走一遍odefineReactive 层层遍历一直到value不是对象才停止  //   思考？如果Vue数据嵌套层级过深 >>性能会受影响  Object.defineProperty(data, key, {    get() {      console.log("获取值");
      //需要做依赖收集过程 这里代码没写出来      return value;    },    set(newValue) {      if (newValue === value) return;      console.log("设置值");      //需要做派发更新过程 这里代码没写出来      value = newValue;    },  });}export function observe(value) {  // 如果传过来的是对象或者数组 进行属性劫持  if (    Object.prototype.toString.call(value) === "[object Object]" ||    Array.isArray(value)  ) {    return new Observer(value);  }}

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

export default function initExtend(Vue) {  let cid = 0; //组件的唯一标识  // 创建子类继承Vue父类 便于属性扩展  Vue.extend = function (extendOptions) {    // 创建子类的构造函数 并且调用初始化方法    const Sub = function VueComponent(options) {      this._init(options); //调用Vue初始化方法    };    Sub.cid = cid++;    Sub.prototype = Object.create(this.prototype); // 子类原型指向父类    Sub.prototype.constructor = Sub; //constructor指向自己    Sub.options = mergeOptions(this.options, extendOptions); //合并自己的options和父类的options    return Sub;  };}

├── plugins│   └── modal│       ├── Content.tsx // 维护 Modal 的内容，用于 h 函数和 jsx 语法│       ├── Modal.vue // 基础组件│       ├── config.ts // 全局默认配置│       ├── index.ts // 入口│       ├── locale // 国际化相关│       │   ├── index.ts│       │   └── lang│       │       ├── en-US.ts│       │       ├── zh-CN.ts│       │       └── zh-TW.ts│       └── modal.type.ts // ts类型声明相关

<Teleport to="body" :disabled="!isTeleport">    <div v-if="modelValue" class="modal">        <div             class="mask"             :style="style"             @click="maskClose && !loading && handleCancel()"             ></div>        <div class="modal__main">            <div class="modal__title line line--b">                <span>{{ title || t("r.title") }}</span>                <span                      v-if="close"                      :title="t('r.close')"                      class="close"                      @click="!loading && handleCancel()"                      >✕</span                    >            </div>            <div class="modal__content">                <Content v-if="typeof content === 'function'" :render="content" />                <slot v-else>                    {{ content }}                </slot>            </div>            <div class="modal__btns line line--t">                <button :disabled="loading" @click="handleConfirm">                    <span class="loading" v-if="loading"> ❍ </span>{{ t("r.confirm") }}                </button>                <button @click="!loading && handleCancel()">                    {{ t("r.cancel") }}                </button>            </div>        </div>    </div></Teleport>

<div class="modal__content">    <Content v-if="typeof content==='function'"             :render="content" />    <slot v-else>        {{content}}    </slot></div>

// 默认插槽<Modal v-model="show"       title="演示 slot">    <div>hello world~</div></Modal>
// 字符串<Modal v-model="show"       title="演示 content"       content="hello world~" />

$modal.show({  title: '演示 h 函数',  content(h) {    return h(      'div',      {        style: 'color:red;',        onClick: ($event: Event) => console.log('clicked', $event.target)      },      'hello world ~'    );  }});

$modal.show({  title: '演示 jsx 语法',  content() {    return (      <div        onClick={($event: Event) => console.log('clicked', $event.target)}      >        hello world ~      </div>    );  }});

import Modal from './Modal.vue';const ComponentClass = Vue.extend(Modal);const instance = new ComponentClass({ el: document.createElement("div") });document.body.appendChild(instance.$el);

import Modal from './Modal.vue';const container = document.createElement('div');const vnode = createVNode(Modal);render(vnode, container);const instance = vnode.component;document.body.appendChild(container);

export default {    install(vue) {       vue.prototype.$create = create    }}

export default {    install(app) {        app.config.globalProperties.$create = create    }}

// Modal.vuesetup(props, ctx) {  let instance = getCurrentInstance(); // 获得当前组件实例  onBeforeMount(() => {    instance._hub = {      'on-cancel': () => {},      'on-confirm': () => {}    };  });
  const handleConfirm = () => {    ctx.emit('on-confirm');    instance._hub['on-confirm']();  };  const handleCancel = () => {    ctx.emit('on-cancel');    ctx.emit('update:modelValue', false);    instance._hub['on-cancel']();  };
  return {    handleConfirm,    handleCancel  };}

app.config.globalProperties.$modal = {   show({}) {     /* 监听 确定、取消 事件 */   }}

// index.tsapp.config.globalProperties.$modal = {    show({        /* 其他选项 */        onConfirm,        onCancel    }) {        /* ... */
        const { props, _hub } = instance;
        const _closeModal = () => {            props.modelValue = false;            container.parentNode!.removeChild(container);        };        // 往 _hub 新增事件的具体实现        Object.assign(_hub, {            async 'on-confirm'() {            if (onConfirm) {                const fn = onConfirm();                // 当方法返回为 Promise                if (fn && fn.then) {                    try {                        props.loading = true;                        await fn;                        props.loading = false;                        _closeModal();                    } catch (err) {                        // 发生错误时，不关闭弹框                        console.error(err);                        props.loading = false;                    }                } else {                    _closeModal();                }            } else {                _closeModal();            }        },            'on-cancel'() {                onCancel && onCancel();                _closeModal();            }    });}};

<template>  <child :msg="message"></child></template>
<script>import child from './child.vue';export default {  components: {    child  },  data () {    return {      message: 'father message';    }  }}</script>

<template>    <div>{{msg}}</div></template>
<script>export default {  props: {    msg: {      type: String,      required: true    }  }}</script>

// 父组件Parent.vue：<Child :changeMsgFn="changeMessage">methods: {    changeMessage(){        this.message = 'test'    }}

// 子组件Child.vue：<button @click="changeMsgFn">props:['changeMsgFn']

<template>    <child @msgFunc="func"></child></template>
<script>import child from './child.vue';export default {    components: {        child    },    methods: {        func (msg) {            console.log(msg);        }    }}</script>

<template>    <button @click="handleClick">点我</button></template>
<script>export default {    props: {        msg: {            type: String,            required: true        }    },    methods () {        handleClick () {          //........          this.$emit('msgFunc');        }    }}</script>

export default {  data() {    return {      title: '我是父组件',      name: 'poetry'    }  },  methods: {    say() {      alert(1)    }  },  // provide属性 能够为后面的后代组件/嵌套的组件提供所需要的变量和方法  provide() {    return {      message: '我是祖先组件提供的数据',      name: this.name, // 传递属性      say: this.say    }  }}

<template>  <p>曾孙组件</p>  <p>{{message}}</p></template><script>export default {  // inject 注入/接收祖先组件传递的所需要的数据即可   //接收到的数据 变量 跟data里面的变量一样 可以直接绑定到页面 {{}}  inject: [ "message","say"],  mounted() {    this.say();  },};</script>

<!-- parent.vue --><template><div>  <child1></child1>     <child2></child2>   <button @click="clickChild">$children方式获取子组件值</button></div></template><script>import child1 from './child1'import child2 from './child2'export default {  data(){    return {      total: 108    }  },  components: {    child1,    child2    },  methods: {    funa(e){      console.log("index",e)    },    clickChild(){      console.log(this.$children[0].msg);      console.log(this.$children[1].msg);    }  }}</script>

<!-- child1.vue --><template>  <div>    <button @click="parentClick">点击访问父组件</button>  </div></template><script>export default {  data(){    return {      msg:"child1"    }  },  methods: {    // 访问父组件数据    parentClick(){      this.$parent.funa("xx")      console.log(this.$parent.total);    }  }}</script>

<!-- child2.vue --><template>  <div>    child2  </div></template><script>export default {  data(){    return {     msg: 'child2'    }  }}</script>

// 父组件Parent.vue：<Child :name="name" :age="age"/>
// 子组件Child.vue：<GrandChild v-bind="$attrs" />
// 孙子组件GrandChild<p>姓名：{{$attrs.name}}</p><p>年龄：{{$attrs.age}}</p>

// 父组件Parent.vue：<Child :name="name" :age="age" @changeNameFn="changeName"/>
// 子组件Child.vue：<button @click="$listeners.changeNameFn"></button>

// 父组件Parent.vue：<Child ref="childComp"/><button @click="changeName"></button>changeName(){    console.log(this.$refs.childComp.age);    this.$refs.childComp.changeAge()}
// 子组件Child.vue：data(){    return{        age:20    }},methods(){    changeAge(){        this.age=15  }}

// Bus.js
// 创建一个中央时间总线类  class Bus {    constructor() {      this.callbacks = {};   // 存放事件的名字    }    $on(name, fn) {      this.callbacks[name] = this.callbacks[name] || [];      this.callbacks[name].push(fn);    }    $emit(name, args) {      if (this.callbacks[name]) {        this.callbacks[name].forEach((cb) => cb(args));      }    }  }  
// main.js  Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  // 另一种方式  Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能  

<template>    <button @click="toBus">子组件传给兄弟组件</button></template>
<script>export default{    methods: {    toBus () {      this.$bus.$emit('foo', '来自兄弟组件')    }  }}</script>

export default {  data() {    return {      message: ''    }  },  mounted() {    this.$bus.$on('foo', (msg) => {      this.message = msg    })  }}

var vm = new Vue({  el: "#app",  data() {    return {      rootInfo:"我是根元素的属性"    }  },  methods: {    alerts() {      alert(111)    }  },  components: {    com1: {      data() {        return {          info: "组件1"        }      },      template: "<p>{{ info }} <com2></com2></p>",      components: {        com2: {          template: "<p>我是组件1的子组件</p>",          created() {            this.$root.alerts()// 根组件方法            console.log(this.$root.rootInfo)// 我是根元素的属性          }        }      }    }  }});

<router-view></router-view>

Vue.component('functional',{ // 构造函数产生虚拟节点的    functional:true, // 函数式组件 // data={attrs:{}}    render(h){        return h('div','test')    }})const vm = new Vue({    el: '#app'})

// functional componentif (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件  return createFunctionalComponent(Ctor, propsData, data, context, children)}
// extract listeners, since these needs to be treated as// child component listeners instead of DOM listenersconst listeners = data.on // 处理事件// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on = data.nativeOn // 处理原生事件
// install component management hooks onto the placeholder nodeinstallComponentHooks(data) // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）

<div id="app">{{user.name}} {{user.age}}</div><div id="app"></div><script>    // 1. 依赖收集的特点：给每个属性都增加一个dep属性，dep属性会进行收集，收集的是watcher    // 2. vue会给每个对象也增加一个dep属性    const vm = new Vue({        el: '#app',        data: { // vm._data              user: {name:'poetry'}        }    });    // 对象的话：调用defineReactive在user对象上定义一个age属性，增加到响应式数据中，触发对象本身的watcher，ob.dep.notify()更新     // 如果是数组 通过调用 splice方法，触发视图更新    vm.$set(vm.user, 'age', 20); // 不能给根属性添加，因为给根添加属性 性能消耗太大，需要做很多处理
    // 修改肯定是同步的 -> 更新都是一步的  queuewatcher</script>

// src/core/observer/index.js 44export class Observer { // new Observer(value)  value: any;  dep: Dep;  vmCount: number; // number of vms that have this object as root $data
  constructor (value: any) {    this.value = value    this.dep = new Dep() // 给所有对象类型增加dep属性  }}

// src/core/observer/index.js 201export function set (target: Array<any> | Object, key: any, val: any): any {  // 1.是开发环境 target 没定义或者是基础类型则报错  if (process.env.NODE_ENV !== 'production' &&    (isUndef(target) || isPrimitive(target))  ) {    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)  }  // 2.如果是数组 Vue.set(array,1,100); 调用我们重写的splice方法 (这样可以更新视图)  if (Array.isArray(target) && isValidArrayIndex(key)) {    target.length = Math.max(target.length, key)    // 利用数组的splice变异方法触发响应式      target.splice(key, 1, val)    return val  }  // 3.如果是对象本身的属性，则直接添加即可  if (key in target && !(key in Object.prototype)) {    target[key] = val // 直接修改属性值      return val  }  // 4.如果是Vue实例 或 根数据data时 报错,（更新_data 无意义）  const ob = (target: any).__ob__  if (target._isVue || (ob && ob.vmCount)) {    process.env.NODE_ENV !== 'production' && warn(      'Avoid adding reactive properties to a Vue instance or its root $data ' +      'at runtime - declare it upfront in the data option.'    )    return val  }  // 5.如果不是响应式的也不需要将其定义成响应式属性  if (!ob) {    target[key] = val    return val  }  // 6.将属性定义成响应式的  defineReactive(ob.value, key, val)  // 通知视图更新  ob.dep.notify()  return val}

<input v-model="sth" /><!-- 等同于 --><input :value="sth" @input="sth = $event.target.value" />

//Parent<template>  {{num}}  <Child v-model="num"></template>export default {  data(){    return {      num: 0    }  }}
//Child<template>  <div @click="add">Add</div></template>export default {  props: ['value'], // 属性必须为value  methods:{    add(){      // 方法名为input      this.$emit('input', this.value + 1)    }  }}

const VueTemplateCompiler = require('vue-template-compiler'); const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></el- checkbox>'); 
// 观察输出的渲染函数：// with(this) { //     return _c('el-checkbox', { //         model: { //             value: (check), //             callback: function ($$v) { check = $$v }, //             expression: "check" //         } //     }) // }

// 源码位置 core/vdom/create-component.js line:155
function transformModel (options, data: any) {     const prop = (options.model && options.model.prop) || 'value'     const event = (options.model && options.model.event) || 'input'     ;(data.attrs || (data.attrs = {}))[prop] = data.model.value     const on = data.on || (data.on = {})     const existing = on[event]     const callback = data.model.callback     if (isDef(existing)) {         if (Array.isArray(existing) ? existing.indexOf(callback) === -1 : existing !== callback ) {            on[event] = [callback].concat(existing)         }     } else {         on[event] = callback     } }

const VueTemplateCompiler = require('vue-template-compiler'); const ele = VueTemplateCompiler.compile('<input v-model="value"/>');
// with(this) { //     return _c('input', { //         directives: [{ name: "model", rawName: "v-model", value: (value), expression: "value" }], //         domProps: { "value": (value) },//         on: {"input": function ($event) { //             if ($event.target.composing) return;//             value = $event.target.value//         }//         }//     })// }

if (el.component) {     genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime     return false } else if (tag === 'select') {     genSelect(el, value, modifiers) } else if (tag === 'input' && type === 'checkbox') {     genCheckboxModel(el, value, modifiers) } else if (tag === 'input' && type === 'radio') {     genRadioModel(el, value, modifiers) } else if (tag === 'input' || tag === 'textarea') {     genDefaultModel(el, value, modifiers) } else if (!config.isReservedTag(tag)) {     genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime     return false }

inserted (el, binding, vnode, oldVnode) {     if (vnode.tag === 'select') { // #6903     if (oldVnode.elm && !oldVnode.elm._vOptions) {         mergeVNodeHook(vnode, 'postpatch', () => {             directive.componentUpdated(el, binding, vnode)         })     } else {         setSelected(el, binding, vnode.context)     }    el._vOptions = [].map.call(el.options, getValue)     } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {         el._vModifiers = binding.modifiers         if (!binding.modifiers.lazy) {             el.addEventListener('compositionstart', onCompositionStart)             el.addEventListener('compositionend', onCompositionEnd)             // Safari < 10.2 & UIWebView doesn't fire compositionend when             // switching focus before confirming composition choice             // this also fixes the issue where some browsers e.g. iOS Chrome            // fires "change" instead of "input" on autocomplete.             el.addEventListener('change', onCompositionEnd) /* istanbul ignore if */             if (isIE9) {                 el.vmodel = true             }        }    }}

<template></template><script>export default{     ...}</script><style></style>

<template id="testComponent">     // 组件显示的内容    <div>component!</div>   </template>
Vue.component('componentA',{     template: '#testComponent'      template: `<div>component</div>`  // 组件内容少可以通过这种形式})

MyPlugin.install = function (Vue, options) {  // 1. 添加全局方法或 property  Vue.myGlobalMethod = function () {    // 逻辑...  }
  // 2. 添加全局资源  Vue.directive('my-directive', {    bind (el, binding, vnode, oldVnode) {      // 逻辑...    }    ...  })
  // 3. 注入组件选项  Vue.mixin({    created: function () {      // 逻辑...    }    ...  })
  // 4. 添加实例方法  Vue.prototype.$myMethod = function (methodOptions) {    // 逻辑...  }}

Vue.component('my-component-name', { /* ... */ })

const component1 = {...} // 定义一个组件
export default {    components:{        component1   // 局部注册    }}

Vue.use(插件名字,{ /* ... */} )