Vue学习之旅

小菜菜要逆袭
70 阅读1分钟

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。

今天的主角是Vue,国内现在大部分公司都用起了Vue，现在不学，更待何时呀？本文会涉及到Vue的一些知识点，快来看看吧~

1、MVVM模型

什么是MVVM模型？

M：moudle -> 模型 ->用于数据存储

V：view -> 视图 -> 用于页面显示

VM: View Moudle -> 主要负责业务逻辑处理(如ajax请求)，对数据进行加工后交给视图显示出来

image.png

2、Object.defineProperty()的使用

Object.defineProperty()中的set和get函数在vue的双向数据绑定功能中扮演者至关重要的角色。这里简单介绍一下该方法，具体可以去看看到底vue怎么实现双向绑定的哟~

let number = 18
Object.defineProperty(person, 'age', {
    /*value: 18,
    enumerable: true,//控制属性是否可以被枚举，默认值为false
    writable: true,//控制属性是否可以被修改，默认值为false
    configurable: true//控制属性是否可以被删除，默认值为false
    */
    //自定义get方法
    get(){...}
    //自定义set方法
    set(value){...}
})

3、vue实例的写法

  1. el的两种写法:

    • el: '#app'
    • 通过vm.$mount('#app')指定容器

  2. data的两种写法

    • 对象式

    • 函数式，返回值是data数据

      data：function(){
    return{
        name: "李红杰"
    }
}

4、Vue指令中v-if和v-show的区别

  • 当v-if为false时，会将对应代码直接从DOM删除，适用于只需渲染一次的代码
  • 当v-show为false时，只是将对应代码的样式添加一个display: none，隐藏起来了，会被渲染在DOM上，适用于需要频繁切换的内容

5、Vue中key的作用？(key的内部原理)

  1. 虚拟DOM中key的作用

    • key是虚拟DOM对象的唯一标识，当状态发生改变时，vue会根据新数据生成新的虚拟DOM，随后vue进行新DOM和旧DOM的差异对比：(1)如果旧DOM中找到和新DOM相同的key，若内容没有变，还是使用旧的真实DOM，若内容变了，会生成新的真实DOM，替换旧真实DOM；(2)旧DOM中没有找到和新DOM相同的key，会直接创建新的真实DOM，渲染到页面

  2. 用index作为key可能引发的问题

    • 如果对数据进行逆序添加、逆序删除等破坏顺序操作，会产生不必要的真实DOM更新，重复率低，效率低
    • 如果结构中还包含输入类的DOM，会产生错误DOM更新

最好使用每条数据唯一标识作为key，如果不对数据进行逆序添加破坏顺序操纵，仅用于展示，使用index作为key是没有问题的

6、Vue.set()API和vm.$set()

作用:让后来添加的数据，也可以被Vue监听到，响应式的

//语法1
Vue.set(需要添加的对象， 属性， value)

//语法2
vm.$set(需要添加的对象， 属性， value)

局限性：需要添加的对象不能是vm或者vm._data

7、v-bind和v-model指令

  • v-bind绑定元素属性，单项数据绑定, 简写 :
  • v-model，针对表单元素，可实现双向绑定，若是绑定value属性，可直接简写为v-model

好啦，今天的文章到此结束~继续加油吧！

avatar
文章
阅读
粉丝