vue知识点总结

看热闹不闲事大
173 阅读6分钟

  1. Vue的优点？Vue的缺点？

    优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开

      渐进式：通俗点讲就是，你想用啥你就用啥，按需引入不强求。如: vuex, router 等

    缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长

  2. Vue跟React的异同点？

    • 相同点：

      1.都使用了虚拟dom
      2.组件化开发
      3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据) 4.都支持服务端渲染

    • 不同点：

      1.React的JSX，Vue的template模板
      2.React单向绑定，Vue双向绑定
      3.React手动(setState)更新数据，Vue自动
      4.React的Redux，Vue的Vuex

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

    • MVC：

      1.Model(模型)：负责从数据库中取数据
      2.View(视图)：负责展示数据的地方
      3.Controller(控制器)：交互逻辑处理

    企业微信截图_6a4c0d51-ffb4-42d5-8d4a-d31f3dd7b3d8.png

    • MVVM:

      1. VM：也就是View-Model，做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
      2. 思想：实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

    image.png

    • 区别:

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

    • Vue是不是MVVM框架？

      1. Vue是MVVM框架，但是不是严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue的ref可以做到这点

  4. Vue和Jq的区别在那? 为什么放弃Jq用vue?

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

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

    data设计为一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

  6. Vue中的修饰符 image.png

  7. Vue的内部指令

    image.png

  8. Vue组件间传值

    • 父组件传值给子组件，子组件使用props进行接收
    • 子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
    • 组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据
    • 使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C
    • 使用$refs获取组件实例，进而获取数据
    • 使用Vuex进行状态管理
    • 使用eventBus进行跨组件触发事件，进而传递数据
    • 使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用
    • 使用浏览器本地缓存，例如localStorage

  9. computed和watch有何区别？

    • 1.computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
    • 2.watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
    • 3.简单记就是：一般情况下computed是多对一，watch是一对多

  10. 为什么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)
    }
  }

  11. 不需要响应式的数据应该怎么处理？

    在我们的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}),
    }
 }

  12. watch有哪些属性，分别有什么用？

    当我们监听一个基本数据类型时：

    watch: {
    value () {
        // do something
    }
}
复制代码

    当我们监听一个引用数据类型时：

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

  13. 父子组件生命周期顺序

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

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

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

  15. 直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

    • 原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx是无法更新视图的
    • 使用数组的splice方法，arr.splice(index, 1, item)
    • 使用Vue.$set(arr, index, value)

  16. 为什么不建议用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和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很消耗性能，所以，拒绝渣男，选择老实人

avatar
文章
阅读
粉丝