美团前端 vue 面试题（边面边更）

<input type="text" v-model.lazy="value"><p>{{value}}</p>

<input type="text" v-model.trim="value">

<input v-model.number="age" type="number">

<div @click="shout(2)">  <button @click.stop="shout(1)">ok</button></div>//只输出1

<form v-on:submit.prevent="onSubmit"></form>

<div @click.capture="shout(1)">    obj1<div @click.capture="shout(2)">    obj2<div @click="shout(3)">    obj3<div @click="shout(4)">    obj4</div></div></div></div>// 输出结构: 1 2 4 3 

<div v-on:click.self="doThat">...</div>

<button @click.once="shout(1)">ok</button>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成  --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div>

<my-component v-on:click.native="doSomething"></my-component>
<!-- 使用.native修饰符来操作普通HTML标签是会令事件失效的 -->

<button @click.left="shout(1)">ok</button><button @click.right="shout(1)">ok</button><button @click.middle="shout(1)">ok</button>

<!-- 只有按键为keyCode的时候才触发 --><input type="text" @keyup.keyCode="shout()">

Vue.config.keyCodes.f2 = 113

//父组件<comp :myMessage.sync="bar"></comp> //子组件this.$emit('update:myMessage',params);

//父亲组件<comp :myMessage="bar" @update:myMessage="func"></comp>func(e){ this.bar = e;}
//子组件jsfunc2(){  this.$emit('update:myMessage',params);}

<input id="uid" title="title1" value="1" :index.prop="index">

<svg :viewBox="viewBox"></svg>

export function callHook(vm, hook) {  // 依次执行生命周期对应的方法  const handlers = vm.$options[hook];  if (handlers) {    for (let i = 0; i < handlers.length; i++) {      handlers[i].call(vm); //生命周期里面的this指向当前实例    }  }}
// 调用的时候Vue.prototype._init = function (options) {  const vm = this;  vm.$options = mergeOptions(vm.constructor.options, options);  callHook(vm, "beforeCreate"); //初始化数据之前  // 初始化状态  initState(vm);  callHook(vm, "created"); //初始化数据之后  if (vm.$options.el) {    vm.$mount(vm.$options.el);  }};

<script>    // Vue.options 中会存放所有全局属性
    // 会用自身的 + Vue.options 中的属性进行合并    // Vue.mixin({    //     beforeCreate() {    //         console.log('before 0')    //     },    // })    debugger;    const vm = new Vue({        el: '#app',        beforeCreate: [            function() {                console.log('before 1')            },            function() {                console.log('before 2')            }        ]    });    console.log(vm);</script>

export function callHook(vm, hook) {  // 依次执行生命周期对应的方法  const handlers = vm.$options[hook];  if (handlers) {    for (let i = 0; i < handlers.length; i++) {      handlers[i].call(vm); //生命周期里面的this指向当前实例    }  }}
// 调用的时候Vue.prototype._init = function (options) {  const vm = this;  vm.$options = mergeOptions(vm.constructor.options, options);  callHook(vm, "beforeCreate"); //初始化数据之前  // 初始化状态  initState(vm);  callHook(vm, "created"); //初始化数据之后  if (vm.$options.el) {    vm.$mount(vm.$options.el);  }};
// 销毁实例实现Vue.prototype.$destory = function() {     // 触发钩子    callHook(vm, 'beforeDestory')    // 自身及子节点    remove()     // 删除依赖    watcher.teardown()     // 删除监听    vm.$off()     // 触发钩子    callHook(vm, 'destoryed')}

get () {     pushTarget(this) // 先将当前依赖放到 Dep.target上     let value     const vm = this.vm     try {         value = this.getter.call(vm, vm)     } catch (e) {         if (this.user) {             handleError(e, vm, `getter for watcher "${this.expression}"`)         } else {             throw e         }     } finally {         if (this.deep) { // 如果需要深度监控         traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法     }popTarget() }

// 指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx`
// -- 将值传到指令中`v-xxx="value"`  
// -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"``v-xxx="'string'"` 
// -- 传参数（`arg`），如`v-bind:class="className"``v-xxx:arg="value"` 
// -- 使用修饰符（`modifier`）`v-xxx:arg.modifier="value"` 

// 全局注册注册主要是用过Vue.directive方法进行注册// Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {  // 当被绑定的元素插入到 DOM 中时……  inserted: function (el) {    // 聚焦元素    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能  }})
// 局部注册通过在组件options选项中设置directive属性directives: {  focus: {    // 指令的定义    inserted: function (el) {      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能    }  }}
// 然后你可以在模板中任何元素上使用新的 v-focus property，如下：
<input v-focus />

<div v-demo="{ color: 'white', text: 'hello!' }"></div><script>    Vue.directive('demo', function (el, binding) {    console.log(binding.value.color) // "white"    console.log(binding.value.text)  // "hello!"    })</script>

// 1.设置v-throttle自定义指令Vue.directive('throttle', {  bind: (el, binding) => {    let throttleTime = binding.value; // 防抖时间    if (!throttleTime) { // 用户若不设置防抖时间，则默认2s      throttleTime = 2000;    }    let cbFun;    el.addEventListener('click', event => {      if (!cbFun) { // 第一次执行        cbFun = setTimeout(() => {          cbFun = null;        }, throttleTime);      } else {        event && event.stopImmediatePropagation();      }    }, true);  },});// 2.为button标签设置v-throttle自定义指令<button @click="sayHello" v-throttle>提交</button>

const LazyLoad = {    // install方法    install(Vue,options){       // 代替图片的loading图        let defaultSrc = options.default;        Vue.directive('lazy',{            bind(el,binding){                LazyLoad.init(el,binding.value,defaultSrc);            },            inserted(el){                // 兼容处理                if('InterpObserver' in window){                    LazyLoad.observe(el);                }else{                    LazyLoad.listenerScroll(el);                }
            },        })    },    // 初始化    init(el,val,def){        // src 储存真实src        el.setAttribute('src',val);        // 设置src为loading图        el.setAttribute('src',def);    },    // 利用InterpObserver监听el    observe(el){        let io = new InterpObserver(entries => {            let realSrc = el.dataset.src;            if(entries[0].isIntersecting){                if(realSrc){                    el.src = realSrc;                    el.removeAttribute('src');                }            }        });        io.observe(el);    },    // 监听scroll事件    listenerScroll(el){        let handler = LazyLoad.throttle(LazyLoad.load,300);        LazyLoad.load(el);        window.addEventListener('scroll',() => {            handler(el);        });    },    // 加载真实图片    load(el){        let windowHeight = document.documentElement.clientHeight        let elTop = el.getBoundingClientRect().top;        let elBtm = el.getBoundingClientRect().bottom;        let realSrc = el.dataset.src;        if(elTop - windowHeight<0&&elBtm > 0){            if(realSrc){                el.src = realSrc;                el.removeAttribute('src');            }        }    },    // 节流    throttle(fn,delay){        let timer;         let prevTime;        return function(...args){            let currTime = Date.now();            let context = this;            if(!prevTime) prevTime = currTime;            clearTimeout(timer);
            if(currTime - prevTime > delay){                prevTime = currTime;                fn.apply(context,args);                clearTimeout(timer);                return;            }
            timer = setTimeout(function(){                prevTime = Date.now();                timer = null;                fn.apply(context,args);            },delay);        }    }
}export default LazyLoad;

import { Message } from 'ant-design-vue';
const vCopy = { //  /*    bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置    el: 作用的 dom 对象    value: 传给指令的值，也就是我们要 copy 的值  */  bind(el, { value }) {    el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到    el.handler = () => {      if (!el.$value) {      // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意        Message.warning('无复制内容');        return;      }      // 动态创建 textarea 标签      const textarea = document.createElement('textarea');      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域      textarea.readOnly = 'readonly';      textarea.style.position = 'absolute';      textarea.style.left = '-9999px';      // 将要 copy 的值赋给 textarea 标签的 value 属性      textarea.value = el.$value;      // 将 textarea 插入到 body 中      document.body.appendChild(textarea);      // 选中值并复制      textarea.select();      // textarea.setSelectionRange(0, textarea.value.length);      const result = document.execCommand('Copy');      if (result) {        Message.success('复制成功');      }      document.body.removeChild(textarea);    };    // 绑定点击事件，就是所谓的一键 copy 啦    el.addEventListener('click', el.handler);  },  // 当传进来的值更新的时候触发  componentUpdated(el, { value }) {    el.$value = value;  },  // 指令与元素解绑的时候，移除事件绑定  unbind(el) {    el.removeEventListener('click', el.handler);  },};
export default vCopy;

<div ref="a" id="bg" v-drag></div>
  directives: {    drag: {      bind() {},      inserted(el) {        el.onmousedown = (e) => {          let x = e.clientX - el.offsetLeft;          let y = e.clientY - el.offsetTop;          document.onmousemove = (e) => {            let xx = e.clientX - x + "px";            let yy = e.clientY - y + "px";            el.style.left = xx;            el.style.top = yy;          };          el.onmouseup = (e) => {            document.onmousemove = null;          };        };      },    },  }

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

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}

// 判断两个vnode的标签和key是否相同 如果相同 就可以认为是同一节点就地复用function isSameVnode(oldVnode, newVnode) {  return oldVnode.tag === newVnode.tag && oldVnode.key === newVnode.key;}
// 根据key来创建老的儿子的index映射表  类似 {'a':0,'b':1} 代表key为'a'的节点在第一个位置 key为'b'的节点在第二个位置function makeIndexByKey(children) {  let map = {};  children.forEach((item, index) => {    map[item.key] = index;  });  return map;}// 生成的映射表let map = makeIndexByKey(oldCh);

let obj = { name: 'poetry', age: 20 };
class Dep {    constructor() {      this.subs = [] // subs [watcher]    }    depend() {      this.subs.push(Dep.target)    }    notify() {      this.subs.forEach(watcher => watcher.update())    }}Dep.target = null;observer(obj); // 响应式属性劫持
// 依赖收集  所有属性都会增加一个dep属性，// 当渲染的时候取值了 ，这个dep属性 就会将渲染的watcher收集起来// 数据更新 会让watcher重新执行
// 观察者模式
// 渲染组件时 会创建watcherclass Watcher {    constructor(render) {      this.get();    }    get() {      Dep.target = this;      render(); // 执行render      Dep.target = null;    }    update() {      this.get();    }}const render = () => {    console.log(obj.name); // obj.name => get方法}
// 组件是watcher、计算属性是watchernew Watcher(render);
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) {    // 创建一个dep    let dep = new Dep();
    // 递归观察子属性    observer(value);
    Object.defineProperty(obj, key, {        get() { // 收集对应的key 在哪个方法（组件）中被使用            if (Dep.target) { // watcher                dep.depend(); // 这里会建立 dep 和watcher的关系            }            return value;        },        set(newValue) {            if (newValue !== value) {                observer(newValue);                value = newValue; // 让key对应的方法（组件重新渲染）重新执行                dep.notify()            }        }    })}
// 模拟数据获取，触发getterobj.name = 'poetries'
// 一个属性一个dep，一个属性可以对应多个watcher（一个属性可以在任何组件中使用、在多个组件中使用）// 一个dep 对应多个watcher // 一个watcher 对应多个dep （一个视图对应多个属性）// dep 和 watcher是多对多的关系

<!-- 正常父传子 --><Son :a="num" :b="num2" />
<!-- 加上sync之后的父传子 --><Son :a.sync="num" :b.sync="num2" />
<!-- 它等价于 --><Son   :a="num"   :b="num2"   @update:a="val=>num=val"   @update:b="val=>num2=val" />
<!-- 相当于多了一个事件监听，事件名是update:a, --><!-- 回调函数中，会把接收到的值赋值给属性绑定的数据项中。 -->

<com1 v-model="num"></com1><!-- 等价于 --><com1 :value="num" @input="(val)=>num=val"></com1>

[v-cloak] {    display: none;}

this.$set(this.arr, 0, "OBKoro1"); // 改变数组this.$set(this.obj, "c", "OBKoro1"); // 改变对象

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