关于前端:自我检验熬夜总结50个Vue知识点全都会你就是神

前言

大家好，我是林三心，这几天产生了很多事（具体是啥我就不说了），这些事，吓得我把我这些年收藏的 Vue 知识点 都拿进去整顿了一遍，巴不得能多总结出一道是一道，我拿出了我的笔记，并且使劲回顾，终于悟出了这 50 道 知识点（咱不要太俗哈，不叫面试题，咱叫知识点）

光荣黄金

1. Vue 的长处？Vue 的毛病？

长处：渐进式，组件化，轻量级，虚构 dom，响应式，单页面路由，数据与视图离开

毛病：单页面不利于 seo，不反对 IE8 以下，首屏加载工夫长

2. 为什么说 Vue 是一个渐进式框架？

渐进式：艰深点讲就是，你想用啥你就用啥，咱也不强求你。你想用 component 就用，不必也行，你想用 vuex 就用，不必也能够

3. Vue 跟 React 的异同点？

相同点：

• 1. 都应用了虚构 dom
• 2. 组件化开发
• 3. 都是单向数据流(父子组件之间，不倡议子批改父传下来的数据)
• 4. 都反对服务端渲染

不同点：

• 1.React 的 JSX，Vue 的 template
• 2. 数据变动，React 手动(setState)，Vue 主动(初始化已响应式解决，Object.defineProperty)
• 3.React 单向绑定，Vue 双向绑定
• 4.React 的 Redux，Vue 的 Vuex

4. MVVM 是什么？和 MVC 有何区别呢？

MVC

• Model(模型)：负责从数据库中取数据
• View(视图)：负责展现数据的中央
• Controller(控制器)：用户交互的中央，例如点击事件等等
• 思维：Controller 将 Model 的数据展现在 View 上
  

MVVM

• VM：也就是 View-Model，做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，行将后端传递的数据转化成所看到的页面。实现的形式是：数据绑定。二是将【视图】转化成【模型】，行将所看到的页面转化成后端的数据。实现的形式是：DOM 事件监听。
• 思维：实现了 View 和 Model 的主动同步，也就是当 Model 的属性扭转时，咱们不必再本人手动操作 Dom 元素，来扭转 View 的显示，而是扭转属性后该属性对应 View 层显示会主动扭转（对应 Vue 数据驱动的思维）
  

区别

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不必再用选择器操作 DOM 元素。因为在 MVVM 中，View 不晓得 Model 的存在，Model 和 ViewModel 也察看不到 View，这种低耦合模式进步代码的可重用性

Vue 是不是 MVVM 框架？

Vue 是 MVVM 框架，然而不是严格合乎 MVVM，因为 MVVM 规定 Model 和 View 不能间接通信，而 Vue 的 ref 能够做到这点

5. Vue 和 JQuery 的区别在哪？为什么放弃 JQuery 用 Vue？

• 1.jQuery 是间接操作 DOM，Vue 不间接操作 DOM，Vue 的数据与视图是离开的，Vue 只须要操作数据即可
• 2. 在操作 DOM 频繁的场景里，jQuery 的操作 DOM 行为是频繁的，而 Vue 利用虚构 DOM 的技术，大大提高了更新 DOM 时的性能
• 3.Vue 中不提倡间接操作 DOM，开发者只须要把大部分精力放在数据层面上
• 4.Vue 集成的一些库，大大提高开发效率，比方 Vuex，Router 等

6. Vue 的作者是谁？大声说出它的名字！！！

他的名字就是：鱿鱼西

永恒钻石

7. 为什么 data 是个函数并且返回一个对象呢？

data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行 data 函数 并返回新的数据对象，这样，能够防止多处调用之间的 数据净化。

8. 应用过哪些 Vue 的修饰符呢？

能够看我这篇文章「百毒不侵」面试官最喜爱问的 13 种 Vue 修饰符

9. 应用过哪些 Vue 的外部指令呢？

10. 组件之间的传值形式有哪些？

• 父组件传值给子组件，子组件应用 props 进行接管
• 子组件传值给父组件，子组件应用 $emit+ 事件 对父组件进行传值
• 组件中能够应用 $parent 和$children获取到父组件实例和子组件实例，进而获取数据
• 应用 $attrs 和$listeners，在对一些组件进行二次封装时能够不便传值，例如 A ->B->C
• 应用 $refs 获取组件实例，进而获取数据
• 应用 Vuex 进行状态治理
• 应用 eventBus 进行跨组件触发事件，进而传递数据
• 应用 provide 和inject，官网倡议咱们不要用这个，我在看 ElementUI 源码时发现大量应用

• 应用浏览器本地缓存，例如localStorage

  11. 路由有哪些模式呢？又有什么不同呢？

• hash 模式：通过 # 号 前面的内容的更改，触发 hashchange 事件，实现路由切换

• history 模式：通过 pushState 和replaceState切换 url，触发 popstate 事件，实现路由切换，须要后端配合

  12. 如何设置动静 class，动静 style？

• 动静 class 对象：<div :class="{'is-active': true,'red': isRed}"></div>
• 动静 class 数组：<div :class="['is-active', isRed ?'red':'']"></div>
• 动静 style 对象：<div :style="{color: textColor, fontSize:'18px'}"></div>

• 动静 style 数组：<div :style="[{color: textColor, fontSize:'18px'}, {fontWeight:'300'}]"></div>

  13. v-if 和 v -show 有何区别？

• 1.v-if是通过管制 dom 元素的删除和生成来实现显隐，每一次显隐都会使组件从新跑一遍生命周期，因为显隐决定了组件的生成和销毁
• 2.v-show是通过管制 dom 元素的 css 款式来实现显隐，不会销毁

• 3. 频繁或者大数量显隐应用v-show，否则应用v-if

  14. computed 和 watch 有何区别？

• 1.computed是依赖已有的变量来计算一个指标变量，大多数状况都是 多个变量 凑在一起计算出 一个变量 ，并且computed 具备 缓存机制 ，依赖值不变的状况下其会间接读取缓存进行复用，computed 不能进行 异步操作
• 2.watch是监听某一个变量的变动，并执行相应的回调函数，通常是 一个变量 的变动决定 多个变量 的变动，watch能够进行 异步操作

• 3. 简略记就是：个别状况下 computed 是多对一 ，watch 是一对多

  15. Vue 的生命周期，讲一讲？

  16. 为什么 v -if 和 v -for 不倡议用在同一标签？

  在 Vue2 中，v-for优先级是高于 v-if 的，咱们来看例子

  <div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
  </div>

  下面的写法是 v-for 和v-if同时存在，会先把 7 个元素都遍历进去，而后再一个个判断是否为 3，并把 3 给暗藏掉，这样的害处就是，渲染了无用的 3 节点，减少无用的 dom 操作，倡议应用 computed 来解决这个问题：

  <div v-for="item in list">
    {{item}}
  </div>
  
  computed() {list() {return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

  17. vuex 的有哪些属性？用途是什么？

• State：定义了利用状态的数据结构，能够在这里设置默认的初始状态。
• Getter：容许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性。
• Mutation：是惟一更改 store 中状态的办法，且必须是同步函数。
• Action：用于提交 mutation，而不是间接变更状态，能够蕴含任意异步操作。

• Module：容许将繁多的 Store 拆分为多个 store 且同时保留在繁多的状态树中。

  至尊星耀

18. 不须要响应式的数据应该怎么解决？

在咱们的 Vue 开发中，会有一些数据，从始至终都 未曾扭转过 ，这种 死数据 ，既然 不扭转 ，那也就 不须要对他做响应式解决 了，不然只会做一些无用功耗费性能，比方一些写死的下拉框，写死的表格数据，这些数据量大的 死数据，如果都进行响应式解决，那会耗费大量性能。

// 办法一：将数据定义在 data 之外
data () {this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx}
    this.list2 = {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx}
    this.list3 = {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx}
    this.list4 = {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx}
    this.list5 = {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx}
    return {}}
    
// 办法二：Object.freeze()
data () {
    return {list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

19. watch 有哪些属性，别离有什么用？

当咱们监听一个根本数据类型时：

watch: {value () {// do something}
}

当咱们监听一个援用数据类型时：

watch: {
    obj: {handler () { // 执行回调
           // do something
       },
       deep: true, // 是否进行深度监听
       immediate: true // 是否初始执行 handler 函数
    }
}

20. 父子组件生命周期程序

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

21. 对象新属性无奈更新视图，删除属性无奈更新视图，为什么？怎么办？

• 起因：Object.defineProperty没有对对象的新属性进行属性劫持
• 对象新属性无奈更新视图：应用Vue.$set(obj, key, value)，组件中this.$set(obj, key, value)

• 删除属性无奈更新视图：应用Vue.$delete(obj, key)，组件中this.$delete(obj, key)

  22. 间接 arr[index] = xxx 无奈更新视图怎么办？为什么？怎么办？

• 起因：Vue 没有对数组进行 Object.defineProperty 的属性劫持，所以间接 arr[index] = xxx 是无奈更新视图的
• 应用数组的 splice 办法，arr.splice(index, 1, item)

• 应用Vue.$set(arr, index, value)

  23. 自定义指令

  倡议看这篇文章 8 个十分实用的 Vue 自定义指令

  24. 插槽的应用以及原理？

  倡议看我这篇文章「Vue 源码学习」你真的晓得插槽 Slot 是怎么“插”的吗

  25. 为什么不倡议用 index 做 key，为什么不倡议用随机数做 key？

  举个例子：

  <div v-for="(item, index) in list" :key="index">{{item.name}}</div>
  
  list: [{ name: '小明', id: '123'},
    {name: '小红', id: '124'},
    {name: '小花', id: '125'}
  ]
  
  渲染为
  <div key="0"> 小明 </div>
  <div key="1"> 小红 </div>
  <div key="2"> 小花 </div>
  
  当初我执行 list.unshift({name: '小林', id: '122'})
  
  渲染为
  <div key="0"> 小林 </div>
  <div key="1"> 小明 </div>
  <div key="2"> 小红 </div>
  <div key="3"> 小花 </div>
  
  
  新旧比照
  
  <div key="0"> 小明 </div>  <div key="0"> 小林 </div>
  <div key="1"> 小红 </div>  <div key="1"> 小明 </div>
  <div key="2"> 小花 </div>  <div key="2"> 小红 </div>
                         <div key="3"> 小花 </div>
  
  能够看出，如果用 index 做 key 的话，其实是更新了原有的三项，并新增了小花，尽管达到了渲染目标，然而损耗性能
  
  当初咱们应用 id 来做 key，渲染为
  
  <div key="123"> 小明 </div>
  <div key="124"> 小红 </div>
  <div key="125"> 小花 </div>
  
  当初我执行 list.unshift({name: '小林', id: '122'})，渲染为
  
  <div key="122"> 小林 </div>
  <div key="123"> 小明 </div>
  <div key="124"> 小红 </div>
  <div key="125"> 小花 </div>
  
  新旧比照
  
                           <div key="122"> 小林 </div>
  <div key="123"> 小明 </div>  <div key="123"> 小明 </div>
  <div key="124"> 小红 </div>  <div key="124"> 小红 </div>
  <div key="125"> 小花 </div>  <div key="125"> 小花 </div>
  
  能够看出，原有的三项都不变，只是新增了小林这个人，这才是最现实的后果

  用 index 和用 随机数 都是同理，随机数 每次都在变，做不到专一性，很 渣男 ，也很耗费性能，所以，回绝 渣男 ，抉择 老实人

  26. 说说 nextTick 的用途？

  我举个例子，在 vue 中：

  this.name = '林三心'
  this.age = 18
  this.gender = '男'

  咱们批改了三个变量，那问题来了，是每批改一次，DOM 就更新一次吗？不是的，Vue 采纳的是 异步更新 的策略，艰深点说就是，同一事件循环内 屡次批改，会 对立 进行一次 视图更新，这样能力节俭性能嘛

看懂了下面，那你应该也看得懂上面的例子了吧：

<div ref="testDiv">{{name}}</div>

name: '小林'

this.name = '林三心'
console.log(this.$refs.testDiv.innerHTML) // 这里是啥呢

答案是“小林”，后面说了，Vue 是 异步更新，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？

this.name = '林三心'
this.$nextTick(() => {console.log(this.$refs.testDiv.innerHTML) // 林三心
})

27. Vue 的 SSR 是什么？有什么益处？

• SSR就是服务端渲染
• 基于 nodejs serve 服务环境开发，所有 html 代码在服务端渲染
• 数据返回给前端，而后前端进行“激活”，即可成为浏览器辨认的 html 代码
• SSR首次加载更快，有更好的用户体验，有更好的 seo 优化，因为爬虫能看到整个页面的内容，如果是 vue 我的项目，因为数据还要通过解析，这就造成爬虫并不会期待你的数据加载实现，所以其实 Vue 我的项目的 seo 体验并不是很好

最强王者

28. Vue 响应式是怎么实现的？

整体思路是数据劫持 + 观察者模式

对象外部通过 defineReactive 办法，应用 Object.defineProperty 将属性进行劫持（只会劫持曾经存在的属性），数组则是通过重写数组办法来实现。当页面应用对应属性时，每个属性都领有本人的 dep 属性，寄存他所依赖的 watcher（依赖收集），当属性变动后会告诉本人对应的 watcher 去更新(派发更新)。

想具体理解过程，倡议浏览我的 Vue 源码解析系列

const {arrayMethods} = require('./array')

class Observer {constructor(value) {
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        })
        if(Array.isArray(value)) {
            value.__proto__ = arrayMethods
            this.observeArray(value)
        } else {this.walk(value)
        }
    }

    walk(data) {let keys = Object.keys(data)
        for(let i = 0; i < keys.length; i++) {const key = keys[i]
            const value = data[key]
            defineReactive(data, key, value)
        }
    }

    observeArray(items) {for(let i = 0; i < items.length; i++) {observe(items[i])
        }
    }
}

function defineReactive(data, key, value) {const childOb = observe(value)

    const dep = new Dep()

    Object.defineProperty(data, key, {get() {console.log('获取值')
            if (Dep.target) {dep.depend()

                if (childOb) {childOb.dep.depend()

                    if (Array.isArray(value)) {dependArray(value)
                    }
                }
            }
            return value
        },
        set(newVal) {if (newVal === value) return
            observe(newVal)
            value = newVal
            dep.notify()}
    })
}

function observe(value) {if (Object.prototype.toString.call(value) === '[object Object]' || Array.isArray(value)) {return new Observer(value)
    }
}

function dependArray(value) {for(let e, i = 0, l = value.length; i < l; i++) {e = value[i]

        e && e.__ob__ && e.__ob__.dep.depend()

        if (Array.isArray(e)) {dependArray(e)
        }
    }
}

// array.js
const arrayProto = Array.prototype

const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'reverse',
    'sort'
]

methodsToPatch.forEach(method => {arrayMethods[method] = function (...args) {const result = arrayProto[method].apply(this, args)

        const ob = this.__ob__

        var inserted

        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args
                break;
            case 'splice':
                inserted = args.slice(2)
            default:
                break;
        }

        if (inserted) ob.observeArray(inserted)

        ob.dep.notify()

        return result
    }
})

29. 为什么只对对象劫持，而要对数组进行办法重写？

因为对象最多也就几十个属性，拦挡起来数量不多，然而数组可能会有几百几千项，拦挡起来十分耗性能，所以间接重写数组原型上的办法，是比拟节俭性能的计划

30. Vue 的模板编译原理？

因为这个问题讲起来可能比拟长，所以：

倡议看我这篇「Vue 源码学习(二)」你不晓得的 - 模板编译原理

31. Vue 的 computed 和 watch 的原理？

因为这个问题讲起来可能比拟长，所以：

倡议看我这篇「Vue 源码学习(四)」立志写一篇人人都看的懂的 computed，watch 原理

32. Vue.set 办法的原理？

function set(target, key, val) {
    // 判断是否是数组
    if (Array.isArray(target)) {
        // 判断谁大谁小
        target.length = Math.max(target.length, key)
        // 执行 splice
        target.splice(key, 1, val)
        return val
    }

    const ob = target.__ob__

    // 如果此对象没有不是响应式对象，间接设置并返回
    if (key in target && !(key in target.prototype) || !ob) {target[key] = val
        return val
    }

    // 否则，新增属性，并响应式解决
    defineReactive(target, key, val)
    return val
}

33. Vue.delete 办法的原理？

function del (target, key) {
    // 判断是否为数组
    if (Array.isArray(target)) {
        // 执行 splice
        target.splice(key, 1)
        return
    }

    const ob = target.__ob__

    // 对象自身就没有这个属性，间接返回
    if (!(key in target)) return


    // 否则，删除这个属性
    delete target[key]

    // 判断是否是响应式对象，不是的话，间接返回
    if (!ob) return
    // 是的话，删除后要告诉视图更新
    ob.dep.notify()}

34. nextTick 的原理？

let callbacks = []; // 回调函数
let pending = false;
function flushCallbacks() {
  pending = false; // 把标记还原为 false
  // 顺次执行回调
  for (let i = 0; i < callbacks.length; i++) {callbacks[i]();}
}
let timerFunc; // 先采纳微工作并依照优先级优雅降级的形式实现异步刷新
if (typeof Promise !== "undefined") {
  // 如果反对 promise
  const p = Promise.resolve();
  timerFunc = () => {p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 次要是监听 dom 变动 也是一个异步办法
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {characterData: true,});
  timerFunc = () => {counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
} else if (typeof setImmediate !== "undefined") {
  // 如果后面都不反对 判断 setImmediate
  timerFunc = () => {setImmediate(flushCallbacks);
  };
} else {
  // 最初降级采纳 setTimeout
  timerFunc = () => {setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();}
}

35. key 有什么用？说说 diff 算法吧？

间接看这篇吧：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

我讲的没他好

冷门的知识点

36. 如果子组件扭转 props 里的数据会产生什么

• 扭转的 props 数据是根本类型

  如果批改的是根本类型，则会报错

  props: {num: Number,}
  created() {this.num = 999}

• 扭转的 props 数据是援用类型

  props: {
    item: {default: () => ({}),
    }
  }
  created() {
    // 不报错，并且父级数据会跟着变
    this.item.name = 'sanxin';
    
    // 会报错，跟根底类型报错一样
    this.item = 'sss'
  },

37. props 怎么自定义验证

props: {
    num: {
      default: 1,
      validator: function (value) {
          // 返回值为 true 则验证不通过，报错
          return [1, 2, 3, 4, 5].indexOf(value) !== -1
    }
    }
  }

38. watch 的 immediate 属性有什么用？

比方平时 created 时要申请一次数据，并且当搜寻值扭转，也要申请数据，咱们会这么写：

created(){this.getList()
},
watch: {searchInputValue(){this.getList()
  }
}

应用 immediate 齐全能够这么写，当它为 true 时，会初始执行一次

watch: {
  searchInputValue:{
    handler: 'getList',
    immediate: true
  }
}

39. watch 监听一个对象时，如何排除某些属性的监听

上面代码是，params 产生扭转就从新申请数据，无论是 a，b，c，d 属性扭转

data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {this.getList;},
    },
  }

然而如果我只想要 a，b 扭转时从新申请，c，d 扭转时不从新申请呢？

mounted() {Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对 c，d 属性的监听
      .forEach((_) => {this.$watch((vm) => vm.params[_], handler, {deep: true,});
      });
  },
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {this.getList;},
    },
  }

40. 审查元素时发现 data-v-xxxxx，这是啥？

这是在标记 vue 文件中 css 时应用 scoped 标记产生的，因为要保障各文件中的 css 不相互影响，给每个 component 都做了惟一的标记，所以每引入一个 component 就会呈现一个新的 ’data-v-xxx’ 标记

41. computed 如何实现传参？

// html
<div>{{total(3) }}

// js
computed: {total() {return function(n) {return n * this.num}
    },
  }

42. vue 的 hook 的应用

• 同一组件中应用

  这是咱们罕用的应用定时器的形式

  export default{data(){timer:null},
  mounted(){this.timer = setInterval(()=>{
      // 具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){clearInterval(this.timer);
    this.timer = null;
  }
  }

  下面做法不好的中央在于：得全局多定义一个 timer 变量，能够应用 hook 这么做：

  export default{
  methods:{fn(){let timer = setInterval(()=>{
        // 具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{clearInterval(timer);
        timer = null;
      })
    }
  }
  }

• 7.2 父子组件应用

  如果子组件须要在 mounted 时触发父组件的某一个函数，平时都会这么写：

  // 父组件
  <rl-child @childMounted="childMountedHandle"
  />
  method () {childMountedHandle() {// do something...}
  },
  
  // 子组件
  mounted () {this.$emit('childMounted')
  },

  应用 hook 的话能够更不便：

  // 父组件
  <rl-child @hook:mounted="childMountedHandle"
  />
  method () {childMountedHandle() {// do something...}
  },

43. provide 和 inject 是响应式的吗？

// 先人组件
provide(){
    return {// keyName: { name: this.name}, // value 是对象能力实现响应式，也就是援用类型
      keyName: this.changeValue // 通过函数的形式也能够[留神，这里是把函数作为 value，而不是 this.changeValue()]
   // keyName: 'test' value 如果是根本类型，就无奈实现响应式
    }
  },
data(){
  return {name:'张三'}
  },
  methods: {changeValue(){this.name = '扭转后的名字 - 李四'}
  }  
  
  // 后辈组件
  inject:['keyName']
  create(){console.log(this.keyName) // 扭转后的名字 - 李四
}

44.Vue 的 el 属性和 $mount 优先级？

比方上面这种状况，Vue 会渲染到哪个节点上

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#ggg')

这是官网的一张图，能够看出 el 和$mount同时存在时，el 优先级 > $mount

45. 动静指令和参数应用过吗？

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick",
      someProps: someCondition ? "num" : "price"
    }
  },
  methods: {handleSomeEvent(){// handle some event}
  }  
</script>

46. 雷同的路由组件如何从新渲染？

开发人员常常遇到的状况是，多个路由解析为同一个 Vue 组件。问题是，Vue 出于性能起因，默认状况下共享组件将不会从新渲染，如果你尝试在应用雷同组件的路由之间进行切换，则不会产生任何变动。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果仍然想从新渲染，怎么办呢？能够应用key

<template>
    <router-view :key="$route.path"></router-view>
</template>

47. 自定义 v -model

默认状况下，v-model 是 @input 事件侦听器和 :value 属性上的语法糖。然而，你能够在你的 Vue 组件中指定一个模型属性来定义应用什么事件和 value 属性——十分棒！

export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}

48. 如何将获取 data 中某一个数据的初始状态？

在开发中，有时候须要拿初始状态去计算。例如

data() {
    return {num: 10},
mounted() {this.num = 1000},
methods: {howMuch() {
        // 计算出 num 减少了多少，那就是 1000 - 初始值
        // 能够通过 this.$options.data().xxx 来获取初始值
        console.log(1000 - this.$options.data().num)
    }
  }

49. 为什么不倡议 v -for 和 v -if 同时存在

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>

下面的写法是 v -for 和 v -if 同时存在，会先把 7 个元素都遍历进去，而后再一个个判断是否为 3，并把 3 给暗藏掉，这样的害处就是，渲染了无用的 3 节点，减少无用的 dom 操作，倡议应用 computed 来解决这个问题：

<div v-for="item in list">
    {{item}}
</div>

computed() {list() {return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
  }

50. 计算变量时，methods 和 computed 哪个好？

<div>
    <div>{{howMuch1()}}</div>
    <div>{{howMuch2()}}</div>
    <div>{{index}}</div>
</div>

data: () {
    return {index: 0}
     }
methods: {howMuch1() {return this.num + this.price}
  }
computed: {howMuch2() {return this.num + this.price}
  }

computed会好一些，因为 computed 会有 缓存。例如 index 由 0 变成 1，那么会触发视图更新，这时候 methods 会从新执行一次，而 computed 不会，因为 computed 依赖的两个变量 num 和 price 都没变。

结语

如果你感觉此文对你有一丁点帮忙，点个赞，激励一下林三心哈哈。
想进摸鱼群的，看我个人资料，加我，我拉你进，定时会议模仿面试，答疑解惑