Vue 简介

Vue 是一套用于构建用户界面的 渐进式框架 。

与其它大型框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

最初它不过是个人项目，时至今日，已成为全世界三大前端框架之一，github 上拥有 19.8万 Star。 领先于 React 和 Angular，在国内更是首选。

Vue是什么？

  • 定义：以数据驱动视图的MVVM渐进式框架

    • 数据：对象
    • 视图：dom标签 –> 虚拟dom
    • MVVM：M model模型，V view视图。就是一种框架架构，model-view view-model， 这样的结构，主要优势在于监控者数据双向绑定的特性，vue和model之间是双向数据传递的。视图改变数据就可以改变，数据改变视图就可以改变。
    • 渐进式：轻量级框架，可以选择性的，只使用vue中很少的一部分，而不是必须使用全部

BTW——MVC和MVVM

  • MVVM有两个方向：

    1. 将model（模型）转化成 view（视图），即后端传递的数据转化成所看到的页面。实现方式为数据绑定
    2. 将view（视图）转化成 model（模型），即将所看的页面转化成后端的数据。实现方式为dom监听事件

  • 什么是mvc？

    • MVC是model-view-controller的缩写，即模型——视图——控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

  • 区别：

    • MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。
    • View更新的时候，必须要通过Controller去更新一遍Model；同样的Model更新的时候，也要去更新一遍视图。
      [!MVVM优点]:
      实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

vue.js核心？

  • 官方定义：通过尽可能简单的API实现响应的数据绑定和组合的视图组件

数据驱动

  • 传统js手动改变DOM来改变视图，vue.js只需要改变数据就会自动改变视图，就是MVVM思想的实现

视图组件化

  • 定义：把网页拆分一个个区块，每个区块我们可以看成一个组件。网页由多个组件拼接或嵌套组成

vue的特点

  • 响应式编程：编写代码基于对变化的反应
  • 组件化

组件和模块

  • 组件：把重复代码提取出来合并成为一个组件，组件最重要的是复用，位于框架最底层，其他功能依赖于组件，可供不同功能使用，独立性强

  • 模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块。位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合
    [比喻]模块就像有多个USB插口的充电宝，可以和多部手机充电，接口可以随意插拔。复用性很强，可以独立管理。

  • 组件化模块化区别？

    1. 组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行封装
    2. 而模块相当于业务逻辑模块，把同一类型项目里的功能逻辑进行需求性的封装

  • 为什么要用组件和模块

    • 开发和调式效率高
    • 可维护性强
    • 避免阻断
    • 版本管理更容易

vue的优缺点？

  • 优点：轻量级框架，数据双向绑定，组件化，虚拟dom，运行速度快
  • 缺点：
    • 不支持ie678
    • 生态环境差不如angular和react
    • 社区不大
    • 无高阶书籍
    • 首屏加载速度满，加载时，将所有的css,js文件进行加载

BTW——首屏加载慢解决方式

  • 减少入口文件体积
  • UI框架按需引入
  • 静态资源本地缓存
  • 图片资源压缩
  • 组件重复打包
  • 使用SSR（通过对文件、目录、进程、注册表和服务的强制访问控制，有效的制约和分散了原有系统管理员的权限）

BTW——粒度和耦合

  • 粒度：计算机中常指系统内存扩展增量的最小值。粒度问题是设计数据仓库的一个最重要方面。粒度是指数据仓库的数据单位中保存数据的细化或综合程度的级别。细化程度越高，粒度级就越小；相反，细化程度越低，粒度级就越大。数据的粒度一直是一个设计问题。
  • 耦合：两个东西通过某种作用连接在了一起

vue核心的底层原理

  • Object.defineProperty数据劫持的API

  • Object.defineProperty定义新属性或修改原有的属性，vue的数据双向绑定原理就是Object.defineProperty，里面定义了setter和getter方法，通过观察者模式(发布订阅模式)来监听数据变化，从而做相应的逻辑处理

  • 监听对象属性变化，只关心数据不关心视图

  • 三个参数- 三个参数Object.defineProperty(object,propName,descriptor)

    • object 对象=>给谁加
    • propName 属性名=>需要加的属性的名字[类型:String]
    • descriptor 属性描述=>加的这个属性有什么特性[类型：Object]
    • 方法就是直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

  • 属性描述符

    • configurable: true 配置可删除，默认false

      • 两个作用：

        1. 目标属性是否可以使用delete删除
        2. 目标属性是否可以再次设置特性

    • writable：true 配置可修改，默认false

    • enumerable:true 可枚举，使用(for…in或Object,keys())默认false

    • value属性对应的值，可以是任意类型的值，默认undefined

    • 缺点：数组的长度

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// writable应用
    let Person = {}
    Object.defineProperty(Person,'name',{value:'Jack',
        // writable:true // 加上这个就可以输出{name:'Rose'}
    })
    console.log(Person) // {name:'Jack'}
    Person.name = 'Rose'
    console.log(Person) //undefined,因为writable默认false
// enumerable应用
    var user={name:'小五',age:'24'};
    // es6
        var keys = Object.keys(user)
        console.log(keys) // ['name','age']
    // es5
        var Key = []
        for(key in user) {
            Key.push(Key)
        }
        console.log(Key) // ['name','age']
// configurable应用
    var human={name:'李白',age:'不详'}；
    // 定义一个性别，不可被删除和重新定义特性
        Object.defineProperty(human,'gender',{
            value:'男',
            enumerable:true,
            configurable:false
        })
    // 删除一下
        delete human.gender
        console.log(human)//{name:"李白",age:"不详",gender:"男"} 并没有删除
    // 重新定义特性
        Object.defineProperty(human,'gender',{
            value:'男',
            enumerable:true,
            configurable:true
        })
        delete human.gender;
        console.log(human) // {name:"李白",age:"不详"}
  • 存取描述符

get
一个给属性提供 getter 的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。getter就是获取属性值
set
一个给属性提供 setter 的方法，如果没有setter则为undefined。该方法将接收唯一参数，并将该参数的新值分配给属性。默认为undefined。setter就是设置属性值
[!注意]：1. 当使用getter或setter方法，不允许使用writable和value这两个属性

  1. get或set不是必须成对出现，任写其一就行。如果不设置方法，get和set默认undefined

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var username = {name:"不想起名了"};
var num = 12
// 定义一个age获取值时返回定义好的变量
    Object.defineProperty(username,'age',{
        get:function() {
            return num
        }
    })
    console.log(username.age);//12
// 定义一个age获取值时返回定义好的变量num
    Object.defineProperty(username,'age',{
        get:function() {
            return num
        }
        set:function(newVal) {
            num = newVal
        }
    })
    console.log(username.age);// 12
    username.age = 145
    console.log(username.age); // 145
    console.log(num); // 145
  • 兼容性：IE8以下不行
  • 使用Object.defineProperty的优点
    1. 减少代码（少了dom,不需要写很多dom）
    2. 开发速度快

BTW——数据劫持

  • 定义：修改或访问对象的属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果

vue环境搭建

  • 环境需要:nodejs 检测cmd:node-v
  • 安装全局脚手架:npm i -g @vue/cli 检测：vue-Vyarn global add @vue/cli
  • 脚手架网站:cli.vuejs.org
  • vue官网: vuejs.org

创建vue项目

【注意】:项目名称不能是中文，不能是大写字母，不能用vue做名字

命令运行方式

vue create name

gui图形化方式

vue ui

vue脚手架

  • 定义:vue的cli脚手架底层是webpack,也就是基于webpack封装的

[官网] (https://cli.vuejs.org/zh/guide/)

BTW——是脚手架？

  1. 什么是脚手架？
    • 构建基于数据库的应用，进行增、删、改、查数据库的操作
  2. Vue-CLi是什么？
    • 是vuejs脚手架工具，就是自动帮你生成好项目目录，配置好webpack，以及各种依赖包工具
    • 为什么要用？可以帮助你快速开启一个vue项目，给你一套文件结构，包含基础的依赖库，只需要npm install 一下就可以安装，不需要为编译或其他琐碎事而浪费时间，而且不会限制到你发挥

脚手架配置

  • vue.config.js文件是脚手架配置文件，该文件必须放在项目的根目录里

请求代理【跨域方案】

脚手架->webpack->nodejs【后端】
使用后端转发请求
【注意】只能在开发环境中使用
【使用场景】在公司里和后端的测试接口进行接口调式使用

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports={
    devServer:{
        // 浏览器自动打开
        open:true,
        // 代理
        proxy:{
            "/api":{
                target:"http://xx.com",
                changeOrigin:true,
                pathRewrite:{
                    "^/api":"",
                },
            },
        },
    }
}

关闭源码映射【性能优化】

  • productionSourceMap:false
    打包的时候，每一个js文件对应生成一个map源码映射文件，它在生产环境中时没有用的。它会增加打包时间，浪费磁盘空间，以及容易造成代码泄漏等问题，因此需要在生产环境中关闭，只允许开发环境中开启

关闭eslint代码校验

  • lintOnSave:false

AIA：脚手架配置有哪些？

  1. 代码校验
  2. 代码映射的开启与关闭
  3. 请求代理vue.config.js

vue项目结构

运行命令

  • 项目根目录里有一个package.json文件，该文件有一个script对象，里面就是自定义运行命令。（是这三个里唯一一个可以删的）
  • serve开发环境，写代码时的环境
  • build生产环境，打包发布时的环境

结构

  • node_modules它是项目运行时必须依赖
  • public公共目录，存放着唯一的html模板
  • src【核心-源码】项目所有代码
  • .gitignore过滤掉git仓库里不需要的文件清单
  • babel.config.js把es6转成es5
  • package.lock.json(可以删但一般留着)，锁定依赖版本号
  • package.json【核心】依赖包管理文件
  • README.md说明书

src源码结构

  • assets存放静态资源：图片，css,js脚本
  • component放组件
  • App.vue根组件，第一个被加载的组件
  • main.js入口文件，第一个被执行的文件

模块化开发【vue核心亮点】

把一切重复使用的资源，无论是图片，样式还是js代码抽离出来，作为单独的’模块’进行复用

  • 模块包含：vue 组件，图片，js 脚本，css 样式，字体等都可以是模块。

vue里的模块化组件开发

  1. 组件必须使用import引入到当前组件
  2. 当前组件的components必须挂载引入的组件
  3. 在当前组件的template里用标签的形式使用挂载的组件

插值

  • 渲染文本
  • 写在两个大括号中间

插值语法可以写哪些值

  • 对象、字符串、数字、数组、布尔值、三元表达式、自执行函数等，凡是具有返回值的都可以，全部变成文本渲染出来

BTW——自执行函数和快速删除文件

自执行函数后面+（）

1
{function(){return 1000()}}

为什么用自执行函数而不是函数

用函数也可以，只不过返回时function(){return 1000},而不是1000

插值语法的作用

  1. 四则运算 100+(200*300)/2
  2. 插值里存放变量 (详情请找baseVue.html)

npkill和rimraf快速删除node_modules包

  1. 全局安装npm i -g npkill
  2. 进入想清理的文件夹
  3. cd文件路径
  4. 输入npkill
  5. 会自动查找文件中node_modules
  6. 光标上下移动来选择要清理的目录，释放宝贵的空间
  7. 按空格删除

内置方法

$set添加或修改对象和数组

  • 添加/修改对象的属性 $set(obj,‘name’,1)
  • 添加或修改数组成员$set(arr,index,val)

$delete删除对象和数组

  • 删除对象属性$delete(obj,name)
  • 删除数组成员$delete(arr,index)

$emit派发一个动作向上级通信

$mount手动挂载方法