阿里前端面试问到的 vue 问题

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

Vue.mixin({  beforeCreate() {    // ...逻辑        // 这种方式会影响到每个组件的 beforeCreate 钩子函数  },});

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

1. 数据驱动页面，提供响应式的试图组件2. 都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范3. 数据流动单向，都支持服务器的渲染SSR4. 都有支持native的方法，react有React native， vue有wexx

 1.数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的 2.数据渲染：大规模的数据渲染，react更快 3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目 4.开发风格：react推荐做法jsx + inline style把html和css都写在js了      vue是采用webpack + vue-loader单文件组件格式，html, js, css同一个文件

export function set (target: Array<any> | Object, key: any, val: any): any {  // target 为数组    if (Array.isArray(target) && isValidArrayIndex(key)) {    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误    target.length = Math.max(target.length, key)    // 利用数组的splice变异方法触发响应式      target.splice(key, 1, val)    return val  }  // key 已经存在，直接修改属性值    if (key in target && !(key in Object.prototype)) {    target[key] = val    return val  }  const ob = (target: any).__ob__  // target 本身就不是响应式数据, 直接赋值  if (!ob) {    target[key] = val    return val  }  // 对属性进行响应式处理  defineReactive(ob.value, key, val)  ob.dep.notify()  return val}

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

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

{    "url": "/your/server/data/api",    "res": {        "success": true,        "name": "IoveC",        "domain": "www.cnblogs.com"    }}

// 指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `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;          };        };      },    },  }