前端一面高频 vue 面试题（边面边更）

<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)// 我是根元素的属性          }        }      }    }  }});

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

{    tag: 'div',                 /*说明这是一个div标签*/    children: [                 /*存放该标签的子节点*/        {            tag: 'a',           /*说明这是一个a标签*/            text: 'click me'    /*标签的内容*/        }    ]}

<div>    <a>click me</a></div>

https://interview2.poetries.top#search

window.addEventListener("hashchange", funcRef, false);

window.history.pushState(null, null, path);window.history.replaceState(null, null, path);

const count = ref(0)console.log(count.value) // 0​count.value++console.log(count.value) // 1
const obj = reactive({ count: 0 })obj.count++

Vue.observable({ count : 1})

new vue({ count : 1})

// 引入vueimport Vue from 'vue// 创建state对象，使用observable让state对象可响应export let state = Vue.observable({  name: '张三',  'age': 38})// 创建对应的方法export let mutations = {  changeName(name) {    state.name = name  },  setAge(age) {    state.age = age  }}

<template>  <div>    姓名：{{ name }}    年龄：{{ age }}    <button @click="changeName('李四')">改变姓名</button>    <button @click="setAge(18)">改变年龄</button>  </div></template>import { state, mutations } from '@/storeexport default {  // 在计算属性中拿到值  computed: {    name() {      return state.name    },    age() {      return state.age    }  },  // 调用mutations里面的方法，更新数据  methods: {    changeName: mutations.changeName,    setAge: mutations.setAge  }}

export function observe (value: any, asRootData: ?boolean): Observer | void {  if (!isObject(value) || value instanceof VNode) {    return  }  let ob: Observer | void  // 判断是否存在__ob__响应式属性  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {    ob = value.__ob__  } else if (    shouldObserve &&    !isServerRendering() &&    (Array.isArray(value) || isPlainObject(value)) &&    Object.isExtensible(value) &&    !value._isVue  ) {    // 实例化Observer响应式对象    ob = new Observer(value)  }  if (asRootData && ob) {    ob.vmCount++  }  return ob}

export class Observer {    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()        this.vmCount = 0        def(value, '__ob__', this)        if (Array.isArray(value)) {            if (hasProto) {                protoAugment(value, arrayMethods)            } else {                copyAugment(value, arrayMethods, arrayKeys)            }            this.observeArray(value)        } else {            // 实例化对象是一个对象，进入walk方法            this.walk(value)        }}

walk (obj: Object) {    const keys = Object.keys(obj)    // 遍历key，通过defineReactive创建响应式对象    for (let i = 0; i < keys.length; i++) {        defineReactive(obj, keys[i])    }}

export function defineReactive (  obj: Object,  key: string,  val: any,  customSetter?: ?Function,  shallow?: boolean) {  const dep = new Dep()
  const property = Object.getOwnPropertyDescriptor(obj, key)  if (property && property.configurable === false) {    return  }
  // cater for pre-defined getter/setters  const getter = property && property.get  const setter = property && property.set  if ((!getter || setter) && arguments.length === 2) {    val = obj[key]  }
  let childOb = !shallow && observe(val)  // 接下来调用Object.defineProperty()给对象定义响应式属性  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactiveGetter () {      const value = getter ? getter.call(obj) : val      if (Dep.target) {        dep.depend()        if (childOb) {          childOb.dep.depend()          if (Array.isArray(value)) {            dependArray(value)          }        }      }      return value    },    set: function reactiveSetter (newVal) {      const value = getter ? getter.call(obj) : val      /* eslint-disable no-self-compare */      if (newVal === value || (newVal !== newVal && value !== value)) {        return      }      /* eslint-enable no-self-compare */      if (process.env.NODE_ENV !== 'production' && customSetter) {        customSetter()      }      // #7981: for accessor properties without setter      if (getter && !setter) return      if (setter) {        setter.call(obj, newVal)      } else {        val = newVal      }      childOb = !shallow && observe(newVal)      // 对观察者watchers进行通知,state就成了全局响应式对象      dep.notify()    }  })}

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

// 将模板编译为render函数const { render, staticRenderFns } = compileToFunctions(template,options//省略}, this)

constast = parse(template.trim(), options)

optimize(ast,options)

const code = generate(ast, options)

<div id="app"></div><script>    let vm = new Vue({        el: '#app',        template: `<div>            // <span>hello world</span> 是静态节点            <span>hello world</span>                // <p>{{name}}</p> 是动态节点            <p>{{name}}</p>        </div>`,        data() {          return { name: 'test' }        }    });</script>

export function compileToFunctions(template) {  // 我们需要把html字符串变成render函数  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法  // 很多库都运用到了ast 比如 webpack babel eslint等等  let ast = parse(template);  // 2.优化静态节点：对ast树进行标记,标记静态节点    if (options.optimize !== false) {      optimize(ast, options);    }
  // 3.通过ast 重新生成代码  // 我们最后生成的代码需要和render函数一样  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本  let code = generate(ast);  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值  let renderFn = new Function(`with(this){return ${code}}`);  return renderFn;}

<div id="app">{{name}}</div><script>    const vm = new Vue({        data(){            return {name:'poetries'}        },        el: '#app',        beforeCreate(){            // 数据观测(data observer) 和 event/watcher 事件配置之前被调用。            console.log('beforeCreate');        },        created(){            // 属性和方法的运算， watch/event 事件回调。这里没有$el            console.log('created')        },        beforeMount(){            // 相关的 render 函数首次被调用。            console.log('beforeMount')        },        mounted(){            // 被新创建的 vm.$el 替换            console.log('mounted')        },        beforeUpdate(){            //  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。            console.log('beforeUpdate')        },        updated(){            //  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。            console.log('updated')        },        beforeDestroy(){            // 实例销毁之前调用 实例仍然完全可用            console.log('beforeDestroy')        },        destroyed(){             // 所有东西都会解绑定，所有的事件监听器会被移除            console.log('destroyed')        }    });    setTimeout(() => {        vm.name = 'poetry';        setTimeout(() => {            vm.$destroy()          }, 1000);    }, 1000);</script>

export default {  setup() {    // mounted    onMounted(() => {      console.log('Component is mounted!')    })  }}

import { ref } from "vue"export default {  // setup函数是组合api的入口函数，注意在组合api中定义的变量或者方法，要在template响应式需要return{}出去  setup(){    let count = ref(1)    function myFn(){      count.value +=1    }    return {count,myFn}  },
}

### 说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢
#### 一、为什么要划分
使用`vue`构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高
在划分项目结构的时候，需要遵循一些基本的原则：
* 文件夹和文件夹内部文件的语义一致性* 单一入口/出口* 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用* 公共的文件应该以绝对路径的方式从根目录引用* `/src` 外的文件不应该被引入
**文件夹和文件夹内部文件的语义一致性**
我们的目录结构都会有一个文件夹是按照路由模块来划分的，如`pages`文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹
这样做的好处在于一眼就从 `pages`文件夹看出这个项目的路由有哪些
**单一入口/出口**
举个例子，在`pages`文件夹里面存在一个`seller`文件夹，这时候`seller` 文件夹应该作为一个独立的模块由外部引入，并且 `seller/index.js` 应该作为外部引入 seller 模块的唯一入口
```javascript// 错误用法import sellerReducer from 'src/pages/seller/reducer'
// 正确用法import { reducer as sellerReducer } from 'src/pages/seller'

// 正确用法import styles from './index.module.scss'// 错误用法import styles from 'src/pages/seller/index.module.scss'

// 错误用法import Input from '../../components/input'// 正确用法import Input from 'src/components/input'

project│  .browserslistrc│  .env.production│  .eslintrc.js│  .gitignore│  babel.config.js│  package-lock.json│  package.json│  README.md│  vue.config.js│  yarn-error.log│  yarn.lock│├─public│      favicon.ico│      index.html│|-- src    |-- components        |-- input            |-- index.js            |-- index.module.scss    |-- pages        |-- seller            |-- components                |-- input                    |-- index.js                    |-- index.module.scss            |-- reducer.js            |-- saga.js            |-- index.js            |-- index.module.scss        |-- buyer            |-- index.js        |-- index.js

my-vue-test:.│  .browserslistrc│  .env.production│  .eslintrc.js│  .gitignore│  babel.config.js│  package-lock.json│  package.json│  README.md│  vue.config.js│  yarn-error.log│  yarn.lock│├─public│      favicon.ico│      index.html│└─src    ├─apis //接口文件根据页面或实例模块化    │      index.js    │      login.js    │    ├─components //全局公共组件    │  └─header    │          index.less    │          index.vue    │    ├─config //配置（环境变量配置不同passid等）    │      env.js    │      index.js    │    ├─contant //常量    │      index.js    │    ├─images //图片    │      logo.png    │    ├─pages //多页面vue项目，不同的实例    │  ├─index //主实例    │  │  │  index.js    │  │  │  index.vue    │  │  │  main.js    │  │  │  router.js    │  │  │  store.js    │  │  │    │  │  ├─components //业务组件    │  │  └─pages //此实例中的各个路由    │  │      ├─amenu    │  │      │      index.vue    │  │      │    │  │      └─bmenu    │  │              index.vue    │  │    │  └─login //另一个实例    │          index.js    │          index.vue    │          main.js    │    ├─scripts //包含各种常用配置，工具函数    │  │  map.js    │  │    │  └─utils    │          helper.js    │    ├─store //vuex仓库    │  │  index.js    │  │    │  ├─index    │  │      actions.js    │  │      getters.js    │  │      index.js    │  │      mutation-types.js    │  │      mutations.js    │  │      state.js    │  │    │  └─user    │          actions.js    │          getters.js    │          index.js    │          mutation-types.js    │          mutations.js    │          state.js    │    └─styles //样式统一配置        │  components.less        │        ├─animation        │      index.less        │      slide.less        │        ├─base        │      index.less        │      style.less        │      var.less        │      widget.less        │        └─common                index.less                reset.less                style.less                transition.less

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

<!-- single element --><span v-once>This will never change: {{msg}}</span><!-- the element have children --><div v-once>  <h1>comment</h1>  <p>{{msg}}</p></div><!-- component --><my-component v-once :comment="msg"></my-component><!-- `v-for` directive --><ul>  <li v-for="i in list" v-once>{{i}}</li></ul>

<script setup>import { ref } from 'vue'​const msg = ref('Hello World!')</script>​<template>  <h1 v-once>{{ msg }}</h1>  <input v-model="msg"></template>

// ...return (_ctx, _cache) => {  return (_openBlock(), _createElementBlock(_Fragment, null, [    // 从缓存获取vnode    _cache[0] || (      _setBlockTracking(-1),      _cache[0] = _createElementVNode("h1", null, [        _createTextVNode(_toDisplayString(msg.value), 1 /* TEXT */)      ]),      _setBlockTracking(1),      _cache[0]    ),// ...

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {  isActive: true,  hasError: false}

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data: {  activeClass: 'active',  errorClass: 'text-danger'}

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {  activeColor: 'red',  fontSize: 30}

<div v-bind:style="[styleColor, styleSize]"></div>
data: {  styleColor: {     color: 'red'   },  styleSize:{     fontSize:'23px'  }}